openlayer5实现地图撒点，点击弹框效果

效果展示：

注意：公共代码，详细流程请看：https://blog.csdn.net/qq_41619796/article/details/100284203

实现步骤：

 第一：用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这个字段，页面是看不到的