# 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.getLayerInMap(this.map, 'heatMap')
if (!layer) {
layer = new HeatmapLayer({
title: 'heatMap',
source: new VectorSource(),
blur: 3,
radius: 1,
gradient: ["#2200FF", "#E8D225", "#EF1616"]
});
this.map.addLayer(layer)
} else {
layer.getSource().clear();
}
heatData.forEach(item => {
let f = new Feature({
geometry: new Point([item.x, item.y]) // 添加点坐标
});
layer.getSource().addFeature(f);
})
},
设置半径大小
layer.setRadius(pixe)
设置颜色深度
layer.setBlur(50)
获取地图是否存在图层的函数。
// 根据图层title获取地图图层,如果有就返回图层,没有就返回null
getLayerInMap(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
}
【版权声明】本博文著作权归作者所有,任何形式的转载都请联系作者获取授权并注明出处!
【重要说明】博文仅作为本人的学习记录,论点和观点仅代表个人而不代表技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!
【博客园地址】叫我+V : http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V : https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V :https://gitee.com/wjw1014
【重要说明】博文仅作为本人的学习记录,论点和观点仅代表个人而不代表技术的真理,目的是自我学习和有幸成为可以向他人分享的经验,因此有错误会虚心接受改正,但不代表此刻博文无误!
【博客园地址】叫我+V : http://www.cnblogs.com/wjw1014
【CSDN地址】叫我+V : https://wjw1014.blog.csdn.net/
【Gitee地址】叫我+V :https://gitee.com/wjw1014