OpenLayers.js 使用哪些文件？

Question

正如我从 readme 文件中提取的一样，openlayers.js 有多种选择来包含文件和主题。

我想要的是使用lightest solution of 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 map js init 方法没问题，它可以使用巨大的 openlayers.js (740KB)，但不能使用上面显示的 openlayers.light.js

html

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

css

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

Answer 1

如果您想使用带有 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 带有开箱即用的预配置示例：只需 下载一个版本的 OpenLayers，你会得到一整套容易上手的 使用示例。但是，这些示例旨在用于 发展。当您准备好部署应用程序时，您需要一个 高度优化的 OpenLayers 分布，以限制带宽和 加载时间。

您可以使用此链接更改 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>

希望对你有帮助……