Question

＆＃34; OpenLayers库提供了一个JavaScript API，可以轻松地将各种来源的地图合并到您的网页或应用程序中。＆＃34;但是，通过扫描文档，各种来源似乎只包括基于网络的地球地图提供者。

是否可以使用OpenLayers在本地存储的底图上显示特征，例如海图（例如http://www.charts.noaa.gov/InteractiveCatalog/nrnc.shtml?rnc=12280）或具有人工笛卡尔坐标的任意（非地球）光栅图像？

- 编辑 -

以下页面显示了本地存储的图像，与documentation相反，后者表示图像必须可通过网络访问。但是，有没有办法将多个图像文件用作图块？

<html>
  <head>
    <title>OpenLayers Example</title>
    <script src="http://openlayers.org/api/OpenLayers.js"></script>
  </head>
  <body>
    <div style="width:640px; height:480px; border:3px solid" id="map"></div>
    <script defer="defer" type="text/javascript">
        var options = {
            maxResolution: 10,
            units: 'm',
            resolutions: [10, 5, 2, 1, .5],
        };
        var map = new OpenLayers.Map('map', options);
        var extent = new OpenLayers.Bounds(-4824, -3294, 4824, 3294);
        var size = new OpenLayers.Size(4824, 3294);
        var img = new OpenLayers.Layer.Image( "Basemap",
        "maps/map0.jpg", extent, size, {layers: 'basic'} );
        map.addLayer(img);
        map.zoomToMaxExtent();
    </script>
  </body>
</html>

Answer 1

在本地使用OpenStreetMap磁贴有一个示例here，而不直接使用http。显然，你需要将你的瓷砖放在XYZ格式中才能工作。这是OSM层的source。每个图块的xyz都来自OpenLayers.Layer.XYZ，当然，它是为简化和全球覆盖而设计的。但是，您可以使用自己的坐标系轻松创建自己的图层，以便以类似的方式工作。

从装载的角度来看，相关的一行是：

 var newLayer = new OpenLayers.Layer.OSM("Local Tiles", 
                   "tiles/${z}/${x}/${y}.png",
                   {numZoomLevels: 19, 
                    alpha: true, 
                    isBaseLayer: false}
);

注意：我发现，一般来说，示例和源代码是比文档更好的信息来源。我这样说没有批评，OpenLayers像大多数开源项目一样限制了开发人员资源，所以仅仅因为没有任何文档记录，并不意味着它无法完成。

Answer 2

是的，您可以加载任何您喜欢的投影，因为对WMS的调用将完全由您发送到OpenLayer.Map构造函数的参数定义，即边界（最大范围），单位（通常为度数或米），以及可选的分辨率数组（以每个像素为单位的地图单位）。如果您没有分辨率数组（这会将缩放级别固定为这些分辨率，那么您需要提供maxResolution和numZoomLevels参数 - 默认为16.请参阅OpenLayers map documentation，其中有很好的注释并显示了许多其他参数以及一些示例映射构造函数，例如：

  var options = {
        maxExtent: new OpenLayers.Bounds(0,0,700000,1300000),
        maxResolution: 200,
        units: 'm',
        projection: "EPSG:27700",
        resolutions: [ 200, 50, 10, 5, 1, 0.5, 0.1]
  };
  var map = new OpenLayers.Map("map", options);

实际上是英国国家电网，以米为单位，但在度数方面同样有效，分辨率为每像素度数。

将添加到地图中的其他图层（如WMS）将根据地图构造函数中的这些值进行计算。如果您需要在另一个投影中加载矢量数据，也可以通过设置displayProjection来执行此操作，但您可能需要添加第三方投影库proj4js才能进行转换 - 尽管您没有明确地询问过这个问题。

我不确定你的海图是哪种投影，大概是某种UTM或纬度/经度，所以不能给你更合适的数字。

Answer 3

使用openlayers 3：

var newLayer = new ol.layer.Tile({
    source: new ol.source.OSM({
            url: 'maps/{z}/{x}/{y}.png'
    })
});

var map = new ol.Map({
    layers: [
    newLayer
    ],
  controls: [],
  target: 'map',
  view: new ol.View({
    center: ol.proj.transform([4.666389, 50.009167], 'EPSG:4326', 'EPSG:3857'),
    zoom: 4,
    minZoom: 1,
    maxZoom: 20
  })
});

使用带有本地底图的openlayers？

3 个答案: