Openlayers 4+使用本地矢量切片(.pbf)而不使用服务器

时间:2017-12-03 08:51:12

标签: javascript vector openlayers local tiles

我是在线制图的新手,过去我使用osm数据中的Maperitive成功创建了栅格地图。它从localhost /本地文件夹结构正常工作。但是我的问题是:是否有可能从.pbf或geojson文件提供本地矢量地图而没有像光栅图像那样的任何服务器或地图框?是否可以直接在客户端浏览器中在没有任何服务器或api密钥需要的服务的情况下进行渲染? 如果是的话,有人能为我提供一个有效的例子吗?

感谢。

2 个答案:

答案 0 :(得分:0)

通常网站无法访问您的本地文件系统。这是为了保护您和您的计算机免受从事间谍活动的网站的侵害。

但是,该规则也有例外。

  1. 网站可以读取您在"上传文件中选择的文件"输入元素。
  2. 页面可以从磁盘打开时读取文件系统
  3. 从硬盘驱动器打开html文档意味着您只需在计算机上双击它,浏览器就会打开它。然后该html文档中的所有相关链接都相对于该文档。

    因此,如果您使用GeoJSON class,则只需为其提供计算机上文件的路径即可。下面是一个示例,它从文件夹mygeojson.geojson中读取名为mysubfolder的本地文件,并将其显示在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 })
    });
    

答案 1 :(得分:0)

看看this example处于离线模式的托管矢量磁贴。它显示了如何:

  • 从mbtile包中提取原始PBF文件,在标准的tile映射文件夹结构中
  • 使用MapBoxGL客户端库访问它们。 OpenLayers应该以类似的方式工作

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