A010：vue+openlayers中根据地图上的矢量地块定位

最新推荐文章于 2025-07-13 23:53:34 发布

前端忍者

最新推荐文章于 2025-07-13 23:53:34 发布

阅读量867

点赞数 34

CC 4.0 BY-SA版权

分类专栏： openlayers 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/jiadsadfasfs/article/details/140775832

文章目录

前言
一、加载矢量的地块
二、矢量地块定位
三、示例效果
四、完整代码

前言

提示：如果对操作流程还不熟悉的话，可以参考之前的文章，这些内容会帮助你更好地了解 OpenLayers 的功能点。我们会持续更新相关内容，如果你感兴趣或有这方面的需求，欢迎关注并收藏。

一、加载矢量的地块

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,
 });

打开这个网址DataV.GeoAtlas地理小工具系列，可以获取各大地区的geojson文件。它提供了几种访问方式，可以通过网址在线获取，也可以直接把文件下下来放到项目里引用。
在这里插入图片描述
咱们点到北京市，直接复制在线地址。methods里面写一个方法addRegionLayer，定义一个矢量的source，把url写成我们刚刚复制的地址。110000表示的就是北京市，如果选择别的城市会发现编码不一样，其他都一样。

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

addRegionLayer() {
   
   
     const source = new VectorSource({
   
   
        url: "https://geo.datav.aliyun.com/areas_v3/bound/110000_full.json",
        format: new GeoJSON(),
     });
     
 },

然后再把矢量的source放到矢量图层上，style里面是样式，stroke表示描边，fill表示填充。官网里写了一些circle圆形的样式，但是我们的地块都是多边形，所以不要circle相关的。style其实还有别的写法，这个咱们后面再说。

this.vectorLayer = new VectorLayer({
   
   
        source: source,
        style: {
   
   
          "fill-color": "rgba(255, 255, 255, 0.6)",
          "stroke-width": 2