三、openlayers官网示例Advanced View Positioning解析——根据地图上的矢量地块定位

原创

已于 2024-05-20 11:53:56 修改 · 1.5k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #openlayers #openlayers官方示例 #地图 #GIS #vue

于 2024-05-08 18:30:00 首次发布

这篇主要讲的是如何根据地图上的矢量地块定位

首先，mounted里面加载一个底图到地图上。

const view = new View({
      projection: "EPSG:4326",
      center: [116.389, 39.903],
      zoom: 7,
    });
this.map = new Map({
      layers: [
      new TileLayer({
        source: new XYZ({
        url: "http://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png",
       }),
      })],
      target: "map",
      view: view,
 });

接下来我们来加载矢量的地块了，官网示例里引入的是它自己写的一个switzerland.geojson文件

里面有多边形，圆形，下载源码可能可以找到这个json。咱懒得找，直接找个地区的地块替代一下就好。

打开这个网址，可以获取各大地区的geojson文件。它提供了几种访问方式，可以通过网址在线获取，也可以直接把文件下下来放到项目里引用。

DataV.GeoAtlas地理小工具系列

咱们点到北京市，直接复制在线地址。

methods里面写一个方法addRegionLayer，定义一个矢量的source，把url写成我们刚刚复制的地址。110000表示的就是北京市，如果选择别的城市会发现编码不一样，其他都一样。

format属性是一个实例化的 GeoJSON 类。它告诉 OpenLayers 如何解析加载的数据。在这里，通过 new GeoJSON() 创建了一个 GeoJSON 格式解析器，这样 OpenLayers 就知道加载的数据是以 GeoJSON 格式编码的。（简单理解：固定写法，source里只要写了url，format就得写。加载geojson数据类型的矢量数据源时format就是 new GeoJSON()