Openlayers 4+使用本地矢量磁贴（.pbf）无服务器

我是在线映射的新手，在过去，我已经使用Maperitive从osm数据成功创建了栅格贴图。它可以从localhost/local文件夹结构中正常工作。但我的问题：是否有可能从.pbf或geojson文件服务本地矢量地图没有任何服务器或地图盒的东西就像光栅图像？是否有可能在浏览器中直接在客户端没有提供任何服务器或API密钥服务？如果是的话，有人能给我一个工作的例子吗？Openlayers 4+使用本地矢量磁贴（.pbf）无服务器

谢谢。

来源

2017-12-03 Felicián Vass

你的意思是你想创建一个HTML页面（上有一个地图），您直接从电脑的硬盘驱动器打开？ – dube

嗯..你的问题听起来很简单，但是。基于矢量图块。可能吗？ –

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

但是，该规则也有例外。

网站可以读取您在“上传文件”输入元素中选择的文件。
一页可以读取文件系统，当它从磁盘

打开从硬盘的HTML文档opended意味着你只需双击您的计算机上，并在浏览器中打开它。那个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 }) 
});

来源

2017-12-05 12:33:17 dube

谢谢dube！这就是我等待的或类似的东西。我只有一个问题。你怎么看？我可以将整个国家转换为geojson文件吗？从PBF（150 MB）或大的OSM文件（3GB）：d？或从mapsforge文件？再次感谢您的回答。 –

它可以通过使用VectorTile，它只加载整个地图数据的片段。但是，您必须先将源文件拆分为_tiles_，以便它可以加载这些磁贴。这些瓷砖也取决于缩放级别，所以这不是一件容易的事 – dube

Openlayers 4+使用本地矢量磁贴（.pbf）无服务器

回答

相关问题