openlayers热力图

import VectorSource from "ol/source/Vector";

import { Heatmap as HeatmapLayer } from "ol/layer";

import { Feature} from "ol";

import { Point } from "ol/geom";

import { fromLonLat } from "ol/proj";

handleHeatMap(val){   

      val.visible = !val.visible;

      if(val.visible){

        this.addHeatMap(); 

      }else{

        this.gisMap2D.map.removeLayer(this.heatLayer);

      }

    },

    addHeatMap() {

      // 热力图颜色

      let colors = [

          "#2200FF",

          "#16D9CC",

          "#4DEE12",

          "#E8D225",

          "#EF1616"

      ];

      // let hatmapData = [

      //     { name: "延庆1" },

      //     { name: "延庆2" },

      //     { name: "延庆3" },

      //     { name: "延庆4" },

      //     { name: "延庆5" },

      // ];

      // let codeList = {

      //     延庆1: { center: { lng: 115.974848, lat: 40.456951 } },

      //     延庆2: { center: { lng: 116.084884, lat: 40.486953 } },

      //     延庆3: { center: { lng: 116.004868, lat: 40.476961 } },

      //     延庆4: { center: { lng: 116.054878, lat: 40.456951 } },

      //     延庆5: { center: { lng: 115.944868, lat: 40.556991 } },

      // };

      let biaoZhuFeatures = this.gisMap2D.featuresSource.getFeatures();

      this.heatLayer = new HeatmapLayer({

           source: new VectorSource(),

          blur: 30,

          radius: 25,

          gradient: colors

      });

      this.gisMap2D.map.addLayer(this.heatLayer);

      // this.AppendFeatures(hatmapData, colors, codeList, 50);

    },

    // 增加要素至热力图

    AppendFeatures(hatmapData, colors, points, max) {

      for (var i in hatmapData) {

          if (points[hatmapData[i].name]) {

              var coords = points[hatmapData[i].name];

              this.max = max;

              var f = new Feature({

                  geometry: new Point(

                      fromLonLat([coords.center.lng, coords.center.lat])

                  ).transform("EPSG:3857","EPSG:4326")

              });

              // 3857转为4326经纬度

              this.heatLayer.getSource().addFeature(f);

          }

      }

    },

 "WMS": //geoserver引擎动态地图服务,

     * "ImageArcGIS": //arcgisserver引擎动态地图服务,

     * "TileArcGIS": //arcgisserver引擎瓦片地图服务,

     * "ImageStatic": //图片贴图地图服务),

     * "XYZ": //（天地图/谷歌）,

new VectorLayer({
 style:new Style({
     stroke: new Stroke({
         color: "#07B9EE",
         lineDash: [7, 10],
         width: 2
     })
 }),
 source: new VectorSource({ features: [feature] })
 });