Openlayers 3 带有*本地*存储图像的图像层_Openlayers 3

Openlayers 3 带有*本地*存储图像的图像层

openlayers-3

Openlayers 3 带有*本地*存储图像的图像层,openlayers-3,Openlayers 3,我想使用OpenLayers 3向地图添加一个图像层。图像文件存储在本地，而不是web上。OL 2文档说明必须在web上访问映像：，但是，似乎可以使用本地基本映射：。本地系统上没有运行HTTP服务器起点是OL网站上的静态图像示例：静态图像 //地图视图总是需要投影。这里我们只想映射图像 //坐标直接映射到地图坐标，所以我们创建一个使用 //以像素为单位的图像范围。变量范围=[0,0,1024,968]； var投影=新的ol.proj.projection({ 代码：“xkcd图像”，

我想使用OpenLayers 3向地图添加一个图像层。图像文件存储在本地，而不是web上。OL 2文档说明必须在web上访问映像：，但是，似乎可以使用本地基本映射：。本地系统上没有运行HTTP服务器

起点是OL网站上的静态图像示例：


静态图像
//地图视图总是需要投影。这里我们只想映射图像
//坐标直接映射到地图坐标，所以我们创建一个使用
//以像素为单位的图像范围。
变量范围=[0,0,1024,968]；
var投影=新的ol.proj.projection({
代码：“xkcd图像”，
单位：'像素'，
范围：范围
});
var map=新ol.map({
图层：[
新ol.layer.Image({
来源：new ol.source.ImageStatic({
归因：[
新ol.归属({
html:“©；”
})
],
网址：'http://imgs.xkcd.com/comics/online_communities.png',
投影：投影，
imageExtent：范围
})
})
],
目标：“地图”，
视图：新ol.view({
投影：投影，
中心：ol.extent.getCenter（范围），
缩放：2，
最大缩放：8
})
});

此处，应替换为本地文件的路径。file://... 不适合我。操作系统是Windows 7。

对不起，我想我弄错了。我使用OpenLayers online，我认为地图是在服务器上渲染的。所以，我想我不能使用本地文件，可以吗？地图在客户端渲染，您可以使用由web服务器提供服务的本地文件。

<!DOCTYPE html>
<html>
<head>
  <title>Static Image</title>
  <link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css" type="text/css">
  <script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script>
</head>
<body>
  <div id="map" class="map"></div>
  <script>
    // Map views always need a projection.  Here we just want to map image
    // coordinates directly to map coordinates, so we create a projection that uses
    // the image extent in pixels.
    var extent = [0, 0, 1024, 968];
    var projection = new ol.proj.Projection({
      code: 'xkcd-image',
      units: 'pixels',
      extent: extent
    });

    var map = new ol.Map({
      layers: [
        new ol.layer.Image({
          source: new ol.source.ImageStatic({
            attributions: [
              new ol.Attribution({
                html: '&copy; <a href="http://xkcd.com/license.html">xkcd</a>'
              })
            ],
            url: 'http://imgs.xkcd.com/comics/online_communities.png',
            projection: projection,
            imageExtent: extent
          })
        })
      ],
      target: 'map',
      view: new ol.View({
        projection: projection,
        center: ol.extent.getCenter(extent),
        zoom: 2,
        maxZoom: 8
      })
    });
  </script>
</body>
</html>