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

【问题标题】：How to use local stored X/Y/Z.png tiles from OpenLayers 3如何使用 OpenLayers 3 中本地存储的 X/Y/Z.png 切片
【发布时间】：2016-03-26 15:22:25
【问题描述】：

在 OpenStreetMap Wiki 中，有一个 nice example 关于如何将 Local Tiles 与 OpenLayers 一起使用，但这是针对 OpenLayers 的第 2 版。我正在寻找与 OpenLayers 3 相同的功能。有没有很好的示例说明如何做到这一点？

提前致谢。

【问题讨论】：

标签： openlayers-3

【解决方案1】：

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

【讨论】：

【解决方案2】：

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

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

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

【讨论】：

【解决方案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

【讨论】：