标签：显示 ol openlayer title layer 力图 item import 图层

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
}

标签：显示,ol,openlayer,title,layer,力图,item,import,图层
来源： https://www.cnblogs.com/wjw1014/p/16065714.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。