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

Question

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

谢谢。

Answer 1

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

但是，该规则也有异常(exception)。

1. 网站可以读取您在“上传文件”输入元素中选择的文件。
2. 从磁盘打开的页面可以读取文件系统

从硬盘打开 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 })
});