如何使用 OpenLayers 3 中本地存储的 X/Y/Z.png 瓦片

Question

在 OpenStreetMap Wiki 中有一个 nice example 关于如何将本地图块与 OpenLayers 一起使用，但这是针对 OpenLayers 版本 2 的。我正在寻找与 OpenLayers 3 相同的东西。有什么好的例子可以说明如何做到这一点吗？

提前致谢。

Answer 1

所有体面的浏览器都有充分的理由限制网页可以对本地文件执行的操作。允许网页读取本地文件的内容会引发严重的隐私和安全问题。

OpenLayers 3 与默认的 canvas 渲染器配合使用效果最佳，这要求脚本可以读取图块。

如果您使用 DOM 渲染器，您应该能够使用 OpenLayers 3 显示本地图块。请注意，只有 canvas 渲染器支持矢量数据。

Answer 2

在 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
  })
});

Answer 3

一个有效的示例代码是：

 <!DOCTYPE html>
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
       lang="en" dir="ltr">
   <head>
     <link rel="stylesheet" href="http://openlayers.org/en/v3.14.2/css/ol.css" type="text/css">
     <style>
       .map {
         height: 256px;
         width: 256px;
       }
     </style>
     <script src="http://openlayers.org/en/v3.14.2/build/ol.js" type="text/javascript"></script>
     <title>OpenLayers 3 example</title>
   </head>
   <body>
     <h2>My Map</h2>
     <div id="map" class="map"></div>
         <!-- Map -->
         <script src="libraries/ol.js"></script>
         <script>
                 var map = new ol.Map({
                   layers: [
                         new ol.layer.Tile({
                                 source: new ol.source.OSM({
                                         url: '../Maps/OSM/{z}/{x}/{y}.png'
                                         })
                           })
                   ],
                   controls: [],
                   target: 'map',
                   view: new ol.View({
                    <!--
                         center: ol.proj.transform([11.622789, 48.052647], 'EPSG:4326', 'EPSG:3857'),
                    -->
                         center: ol.proj.fromLonLat([11.622789, 48.052647]),
                         zoom: 18,
                         minZoom: 1,
                         maxZoom: 20
                   })
                 });
         </script>
   </body>
 </html>

在 chrome 浏览器中运行良好：

chrome --allow-file-access-from-files 2nd.html

如何使用 OpenLayers 3 中本地存储的 X/Y/Z.png 瓦片

How to use local stored X/Y/Z.png tiles from OpenLayers 3

openlayers-3