openlayers 实现聚合点 img图片型

openlayers+vue 实现聚合点 img图片型

首先是在data中去引入静态图片

//图片引入
imgUrl: require("@/assets/77.png"),

然后在methods中写个函数

   groundgreendot(mapListdataS){
      //创建画板
      let sourceArr = new SourceVec({});
      for (var i = 0; i <= mapListdataS.length - 1; i++) {
        //点的坐标信息
        // let coordinates = [120.0 + Math.random(), 30.0 + Math.random()];
        let coordinates = [mapListdataS[i].lon, mapListdataS[i].lat];
        //console.log(mapListdataS[i],"iiiii")
       //将点的信息存入self中***
          let feature = new Feature({
            geometry: new Point(coordinates),
            self: mapListdataS[i]
          });
          let markerStyle = new Style({
            //设置icon大小
            image: new Icon({
              scale: 0.4, //大小
              src:this.imgUrl, //图片
              color: "#409EFF" //颜色
            
            })
            
          });
          //设置样式
          feature.setStyle(markerStyle);
          //添加
          sourceArr.addFeature(feature);
      }
      //LayerVec /VectorLayer  这两种都可以
      var layer = new VectorLayer({
        source: sourceArr,
        visible: this.layerShowFlag, //先测试下,这样就行了，设置true或者false=
        name: "地面显示点", //设置图层名称，根据名称查找图层
      });

      //地图添加画板
      this.map.addLayer(layer);
     },

实现删除name名的方法

   //根据图层名称移出图层
    removeLayerByName(layerName) {
      let layerArr = this.map.getLayers().array_;
      for (let i = 0; i < layerArr.length; i++) {
        let ln = layerArr[i].values_.name;
        if (ln == layerName) {
          this.map.removeLayer(layerArr[i]);
        }
      }
    },