Openlayers 4+ 使用本地矢量图块 (.pbf)，无需服务器

Question

我是在线制图的新手，过去我使用 osm 数据的 Maperitive 成功创建了栅格地图。它在本地主机/本地文件夹结构中运行良好。但我的问题是：是否可以像光栅图像一样在没有任何服务器或 mapbox 的情况下从 .pbf 或 geojson 文件提供本地矢量图？是否可以在没有任何服务器或 api 关键要求服务的情况下直接在客户端的浏览器中呈现？如果是，有人可以给我提供一个工作示例吗？

谢谢。

Answer 1

通常网站无法访问您的本地文件系统。这是为了保护您和您的计算机免受网站的监视。

但是，该规则也有例外。

网站可以读取您在 "upload file" 输入元素中选择的文件。
从磁盘打开的页面可以读取文件系统

从硬盘打开 html 文档意味着您只需在计算机上双击它，浏览器就会打开它。该 html 文档中的所有相关链接都是相对于该文档的。

因此，如果您使用 GeoJSON class，您可以简单地为其提供计算机上文件的路径。这是一个从文件夹 mysubfolder 中读取名为 mygeojson.geojson 的本地文件并将其显示在 OpenStreetMap 图层顶部的示例：

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.OSM()
    }),
    new ol.layer.Image({
      source: new ol.source.ImageVector({
        source: new ol.source.Vector({
          url: 'mysubfolder/mygeojson.geojson',
          format: new ol.format.GeoJSON()
        }),
        style: new ol.style.Style({
          fill: new ol.style.Fill({
            color: 'rgba(255, 255, 255, 0.6)'
          }),
          stroke: new ol.style.Stroke({
            color: '#319FD3',
            width: 1
          })
        })
      })
    })
  ],
  target: 'map',
  view: new ol.View({ center: [0, 0], zoom: 1 })
});

Answer 2

查看 this example 在离线模式下托管矢量切片。它展示了如何：

从标准瓦片地图文件夹结构中的 mbtile 包中提取原始 PBF 文件
使用 MapBoxGL 客户端库访问它们。 OpenLayers 应该以类似的方式工作

我唯一不确定的是浏览器是否允许本地访问 PBF 文件。

Openlayers 4+ 使用本地矢量图块 (.pbf)，无需服务器

Openlayers 4+ using local vector tiles (.pbf) without server

javascript

tiles

vector

local

openlayers