【开源WebGIS】08-Openlayers+Vue 热力图

使用openlayers实现点要素的热力图

主要步骤

创建一个source数据源

const sourceHeat = new VectorSource({
  format:new GeoJSON(),
  url:(你自己的wfs服务的地址)'http://localhost:...&outputFormat=application%2Fjson'
});

创建一个heatlayer（热力图）图层

Heatmap api的官网链接

https://openlayers.org/en/latest/apidoc/module-ol_layer_Heatmap-Heatmap.html

radius：（number|undefined类型）可选项，设置热力图半径的大小(以像素为单位)。
默认是8。
blur：（number|undefined类型）可选项，设置热力图模糊的大小(以像素为单位)。
默认是15。

const layerHeat  = new Heatmap({
   source:sourceHeat,//设置数据源
   title: 'heatmap',//设置标题，可有可无
   blur: 30,//设置模糊半径
   radius: 15,//设置符号半径
   gradient: ["#2200FF", "#E8D225", "#EF1616"],//设置色带
   zIndex: 2,
   opacity: 0.9,//设置透明度
 })

将改图层添加到map中

this.map.addLayer(layerHeat)

获取代码

关注公粽号“老靳的WebGIS”回复ol08获取，代码是vue的，使用方法如下：

1 使用vscode打开
2 使用npm i 命令安装引用的库
3 使用npm run serve 命令运行程序

推荐一个学习cesium的网站

网站链接在这里学习cesium的网站，里面有很多cesium的demo，有什么奇怪的想法或者不懂的参数都可以在这里尝试修改代码得到自己满意的效果，所见即所得的感觉很好。