javascript – OpenLayers.js要使用哪些文件？

正如我从自述文件中看到的那样,openlayers.js有多种选择来包含文件和主题.

我想要的是使用最轻的openlayers.js文件解决方案.

我在我的应用程序中包含了openlayers.light.js,它创建了地图但没有显示它们,请检查：

我忘了包含其他一些文件吗？

我的结构结构如下：

/vendor
   /js
     openlayers.light.js
     /img
     /theme

如何显示地图图层？

openlayers.light.js也适用于移动设备(一旦解决了这个问题：P)？或者我还需要包括openlayers.mobile.js？

这是不使用openlayers.light.js但使用openlayers.js(740kb)的代码：

var _element = "#map";
 var map = new OpenLayers.Map (_element,{
    controls: [
    new OpenLayers.Control.Navigation({
      dragPanOptions: {
        enableKinetic: true
      }
    }),new OpenLayers.Control.Zoom()
    ],projection: new OpenLayers.Projection("EPSG:900913"),displayProjection: new OpenLayers.Projection("EPSG:4326")
  });

  var lonLat = new OpenLayers.LonLat(_lon,_lat).transform (
new OpenLayers.Projection("EPSG:4326"),// transform from WGS 1984
new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
// map.getProjectionObject() doesn't work for unknown reason
);
  var markers = new OpenLayers.Layer.Markers( "Markers" );
  map.addLayer(markers);

  var size = new OpenLayers.Size(21,25);
  var offset = new OpenLayers.Pixel(-(size.w/2),-size.h);
  var icon = new OpenLayers.Icon(_img_map_marker,size,offset);
  markers.addMarker(new OpenLayers.Marker(lonLat,icon.clone()));

  var mapnik = new OpenLayers.Layer.OSM("Test");
  map.addLayer(mapnik);

  map.setCenter (lonLat,3);

PS：我的openlayers地图js init方法没问题,它可以使用巨大的openlayers.js(740KB),但不能使用openlayers.light.js,如上所示

HTML

<div id="map"></div>

CSS

img{max-width:none;}
#map{
width:300px;
height:300px;
}

解决方法

如果你想使用openlayers的移动属性作为平移或用手进行缩放,你必须使用openlayers.mobile.js.

您可以将openlayers.light.js与移动设备配合使用,但不能使用移动设备.

我认为你的结构应该是：

myProject
   /js
      openlayers.light.js
   /img
   /theme

我在http://jsfiddle.net/aragon/ZecJj/尝试过openlayers.light.js并没有问题.

我的代码：

var map = new OpenLayers.Map({
    div: "map",minResolution: "auto",maxResolution: "auto",});

var osm = new OpenLayers.Layer.OSM();
var toMercator = OpenLayers.Projection.transforms['EPSG:4326']['EPSG:3857'];
var center = toMercator({x:-0.05,y:51.5});
map.addLayers([osm]);


map.setCenter(new OpenLayers.LonLat(center.x,center.y),13);

并尝试阅读Deploying (Shipping OpenLayers in your Application).

OpenLayers comes with pre-configured examples out of the box: simply
download a release of OpenLayers,and you get a full set of easy to
use examples. However,these examples are designed to be used for
development. When you’re ready to deploy your application,you want a
highly optimized OpenLayers distribution,to limit bandwidth and
loading time.

您可以使用此链接更改src文件,并且可以看到它仍然有效.

<script type="text/javascript" src="http://openlayers.org/dev/OpenLayers.light.debug.js"></script>

至

<script type="text/javascript" src="https://view.softwareborsen.dk/Softwareborsen/Vis%20Stedet/trunk/lib/OpenLayers/2.12/OpenLayers.light.js?content-type=text%2Fplain"></script>

我希望它可以帮助你……

javascript – OpenLayers.js要使用哪些文件？

解决方法

相关推荐