# openlayer 热力图显示

Posted 2022-03-28 超级无敌炫酷暴龙战神

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了# openlayer 热力图显示相关的知识，希望对你有一定的参考价值。

openlayer 热力图显示

相关库类

  import moment from \'moment\'
  import Projection from \'ol/proj/Projection\'
  import Static from \'ol/source/ImageStatic\'
  import Map from \'ol/Map\'
  import ImageLayer from \'ol/layer/Image\'
  import View from \'ol/View\'
  import VectorLyr from \'ol/layer/Vector\'
  import VectorSource from \'ol/source/Vector\'
  import  getCenter  from \'ol/extent\'
  import Polygon from \'ol/geom/Polygon\'
  import Feature from \'ol/Feature\'
  import  Circle as CircleStyle, Style, Fill, Stroke  from \'ol/style\'
  import Point from \'ol/geom/Point\'
  import  Heatmap as HeatmapLayer  from "ol/layer";

javascript 代码

// 添加热力图
      addHeatMap(heatData) 
        let layer = this.getLayerFromMap(this.map, \'heatMap\')
        if (!layer) 
          layer = new HeatmapLayer(
            title: \'heatMap\',
            source: new VectorSource(),
            blur: 3,
            radius: 1,
            gradient: ["#2200FF", "#16D9CC", "#4DEE12", "#E8D225", "#EF1616"]
          );
          this.map.addLayer(layer)
         else 
          layer.getSource().clear();
        
        heatData.forEach(item => 
          let f = new Feature(
            geometry: new Point([item.first_location_x, this.reverseY(this.area.areaWidth, item.first_location_y)])  // 添加点坐标
          );
          layer.getSource().addFeature(f);
        )
      ,

设置半径大小

layer.setRadius(pixe)

设置颜色深度

layer.setBlur(50)

获取地图是否存在图层的函数。

// 根据图层title获取地图图层，如果有就返回图层，没有就返回null
getLayerFromMap(map, name) 
   var layers = map.getLayers()   // 获取地图所有图层
   var layer = null
   layers.forEach((item, index) => 
       if (item.values_.title !== undefined) 
          if (item.values_.title === name) 
            layer = item
            return layer
          
       
    )
    return layer

以上是关于# openlayer 热力图显示的主要内容，如果未能解决你的问题，请参考以下文章

openlayers6热力图(附源码下载)