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

Z时代
2024-01-10
分类：问答

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

谢谢。

回答：

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

但是，该规则也有例外。

网站可以读取您在“上传文件”输入元素中选择的文件。

一页可以读取文件系统，当它从磁盘

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