本文共 1803 字，大约阅读时间需要 6 分钟。

效果展示：

注意：公共代码，详细流程请看：

实现步骤：

 第一：用geoserver发布地图图层

 第二：在页面引用公共efgis.js文件

import webgisT from '../../config/efgis';//引入公共js文件

 第三：在页面用openlayer引入地图

this.map = webgisT.init('map_tqT');//调动公共js中的初始化方法

 第四：定义撒点方法，并调用

methods: {      // 地图初始化      init: function () {        // geoserver图层        this.map = webgisT.init('map_tq');//map_tq是容器id      },      // 作业点初始化      initzydPoint() {        let list = [];        let pointsData = [];        for (let i = 0; i < this.zydPoints.length; i++) {          let data = this.zydPoints[i];          let obj = {            name:'',            lon: data.lon,//经度            lat: data.lat,//纬度            sb:data.sb,            params: [],            html:{//html不传弹框的内容会由params决定，传的值不为空，则取html的              'class':'sbyw_zntq',//设备运维-智能台区              'data':data.sb,//数据名称              'VandA':[]            }          };              let lx =  obj.sb;              if(lx == '杆'){                obj['img'] = 'map_tq_gt';              }else  if(lx == '表'){                 obj['img'] = 'map_tq_db';              } else if (lx == '变压器') {                obj['img'] = 'map_tq_byq';              }else{                obj['img'] = '';              }          list.push(obj);        }        this.zydLayer = webgisT.addPointsLayer_zygk(list);      },      removezydPoint() {        webgisT.removePointslayer(this.zydLayer);      },    },

调用：

props: ['zydPoints'],//传入的撒点数据watch: {      zydPoints(val, old) {        if (val != old) {           if (this.zydLayer != null) {            this.removezydPoint();          }          this.initzydPoint();        }      }    }

我这里的数据格式：

[{          "name":"电压:10kV,电流:10A",          "lat":"22.698915973305702",//维度          "lon":"112.25102931261064",//经度          "sb":"杆"        }]

注，我这里是根据类型来决定他这个点使用那张图片的，一定要注意，没有sb这个字段，页面是看不到的

转载地址：http://rawrn.baihongyu.com/