openlayers +vue 实现聚合点text文字显示和base64图片显示

openlayers +vue 实现聚合点text文字显示和base64图片显示

在业务中广泛是运用 所以在这里记录下

mapListdataS是接口中传过来的值
addMarker(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];
        
        let feature = new Feature(new Point(coordinates));
        let markerStyle = new Style({
          image: new CircleStyle({
            stroke: new Stroke({
              color: "white",
              width: 3,
            }),
            fill: new Fill({
              color: "blue",
            }),
          }),
          text: new Text({
            scale: 2,  //字的大小
            text: mapListdataS[i].value.toString(), //这个储存的是后台传的值 例如温度等一些值。。
            fill: new Fill({
              color: "white",
            }),
          }),
        });
        feature.setStyle(markerStyle);
        sourceArr.addFeature(feature);
      }
      //LayerVec /VectorLayer  这两种都可以
      var layer = new VectorLayer({
        source: sourceArr,
        visible: this.layerShowFlag, //先测试下,这样就行了，设置true或者false=
        name: "xxx", //设置图层名称，根据名称查找图层
      });

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

这样就实现了 在地图上渲染text文字 。。。

实现base64渲染图片到地图上

首先 feature —> source —> layer —> map 一层一层

addpicMarker(mapListdataS) {
      let sourceArr = new SourceVec({});
      for (var i = 0; i <= mapListdataS.length-1; i++) {
        let coordinates = [120.00 + Math.random(), 30.00 + Math.random()];
        let feature = new Feature(new Point(coordinates));
        let markerStyle = new Style({
          image: new Icon({
            opacity: 0.75,
     //base64图片
     src:"data:image/gif;base64,R0lGODlhLwAvAPcAAAAAABEAAJoBAdcBAfIAAP0AAP4AAP4AAP4AAP4AAP4AAP4AAP4AAP4AAP4AAP4AAP4AAP4AAP4AAP4AAP4AAP4BAf4BAf4CAv4CAv4DA/4DA/4EBP4EBP4FBf4GBv4GBv4ICP8JCf4KCv4LC/4MDP4ODv4PD/4REf4SEv4TE/4UFP4WFv4YGP4aGv4dHf4hIf4kJP4nJ/4oKP4sLP4wMP40NP43N/46Ov5BQf5GRv5KSv5MTP5OTv5QUP1MTPxGRvk+PvU3N/AzM+kwMN4sLNMsLMUtLbIvL5oyMow2Nnw7O2pBQVdISE1NTU5OTk9PT1BQUFFRUVJSUlNTU1RUVFVVVVZWVldXV1hYWFlZWVpaWltbW1xcXF1dXV5eXl9fX2BgYGFhYWJiYmNjY2RkZGVlZWZmZmdnZ2hoaGlpaWpqamtra3VtbX9vb4hxcZFzc5l1daF2dqh4eK95ebV6ert7e8B8fMV9fcl+fs1+ftF/f9R/f9l/f+B+fuR9fed8fOl8fOl8fOl9feqCguqFheaEhN+CgtyDg9qDg9iEhNaEhNSFhdGFhc6GhsuHh8eIiMSJicCKiryLi7eNjbKOjq6QkKmSkqOUlJ6WlpmZmZqampubm5ycnJ2dnZ6enp+fn6CgoKGhoaKioqOjo6SkpKWlpaampqyoqLKrq7itrb2vr8GxscWyssm0tMy1tdK4uNe6ut2+vuLAwObCwurExOzFxe/IyPHKyvPMzPTNzfbPz/fR0fjT0/nV1frX1/rZ2fvc3Pze3vzg4P3h4f3h4f3i4v7j4/7j4/7k5P7k5P7l5f7m5v7n5/7o6P7p6f7q6v7q6v7r6/7r6/7r6/7s7P7s7P7t7f7t7f7u7v7v7/7v7/7w8P7w8P7x8f7x8f7y8v709P739/76+v78/P78/P79/f79/f7+/v7+/v7+/v7+/v/+/v/+/v/+/v/+/v/+/v/+/v///yH/C05FVFNDQVBFMi4wAwEAAAAh+QQJAwDxACwAAAAALwAvAAAI/gDjCRxIsKDBgwgTKlzIsKHDhxAjSpxIsaLFixgJ3gJ0K+NEQCIAeZTYw0CPkQbHfQOHsOTJg+DAjbPYLMegcAddHgxHSEczi79OkLCV88LLgrZImPBlsdsODzdwFiSkYpDBcDc87OhmsVwwFR4IrSvYjNezgusIeVARrNzFcIAyuIjWkJqLDICkXnwGw4OusfHWlRtHeBzgdbs8wDibcR2wWoB/EdoBg4QKG4R+CVxHy5fbkW6tASrhIcOFChUydCgB6Gw5wBKj5fLFsmAwGyAqGNjN20AFDzOCGfzmKxc1hoBQnHDRgxazwNlkbNDdu3eFDTW4xmM2q4eLEyhE/i60NYPEBg8lZAwT1yMD9erWN/QQZ0wGCQ8b0tdiGE6ZLkI9vDBDM7uU8F5vHbhgXQm7NDPDCz0QoosyejEkzjfKNAMXfLtlEEMO8AECTjPLfCOORd/MwKEBKRBSA3wyfONRNiZwGAIgvyhYnQnZeITNBvBlYMMwvrAAXwfY+MihCrWMg4sKG2RQXZIZYQOfB4OwVIsOONAwpZK9XXDDTwKJQ0sIX1ZZHQm4hDPTOr/AAB+VGFnZWwsuwLBfNiXNCSZvqKWAiziEgMAhnRfZWV0LvujiwoG8IWqRor290MsOQB76Z283ADLCigZIWhGlvOWAwgWgikoRqbuRIGWqNh5FA+qsx10kTjCAzAoqIM3MVNEzNnSg64pQMUbRMD0kq+yyzDab7DAoRSvttNRWa+212BYUEAAh+QQJBADxACwAAAAALwAvAIcAAAABAQFpERHFHh7bIiL0JSX5Jib+Jib+Jib+Jib+Jib+Jib+Jib+Jib+Jib+Jib+Jyf+Jyf+Jyf+Jyf+Jyf+Jyf+Jyf+Jyf+Jyf+Jyf+Jyf+Jyf+KCj+KCj+KSn+KSn+Kir+Kyv+Li7+MTH+NTX+PDz+Q0"
            //,scale: 100,  //大小
          }),
        });
        feature.setStyle(markerStyle);
        sourceArr.addFeature(feature);
      }
        let layer = new VectorLayer({
        source: sourceArr,
        name: "xxx-设置名称", //设置图层名称，根据名称查找图层
      });
      添加到地图上
      this.map.addLayer(layer);

    },