我想使用OpenLayers 3将图像图层添加到地图中。图像文件存储在本地中，而不是存储在网络上。 OL 2文档说明图片必须可以在网络上访问：http://dev.openlayers.org/docs/files/OpenLayers/Layer/Image-js.html，但是，似乎可以使用本地底图：Using openlayers with a local basemap?。本地系统上没有运行HTTP服务器。
起点是OL网站上的静态图片示例：http://openlayers.org/en/v3.12.1/examples/static-image.html
<!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: '© <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>
此处，http://imgs.xkcd.com/comics/online_communities.png应替换为本地文件的路径。 file：// ...对我不起作用。操作系统是Windows 7。
