openlayers学习——15、openlayers加载热力图

前言：基于Vue，学习openlayers，根据官网demo，记录常用功能写法。
     本人不是专业GIS开发，只是记录，方便后续查找。

参考资料：
openlayers官网：https://openlayers.org/
geojson下载网站：https://datav.aliyun.com/portal/school/atlas/area_selector
地图坐标拾取网站：https://api.map.baidu.com/lbsapi/getpoint/index.html

openlayers核心：Map对象、View视图、Layer图层、Source来源、Feature特征等

需要引入和包

/** 热力图图层 */
import { Heatmap } from 'ol/layer'
import { Vector } from 'ol/source'
import { GeoJSON } from 'ol/format'
/** 准备好geojson */
import QYWZ from '@/assets/geojson/qywz.json'

注：
1、主要用到layer中的热力图图层Heatmap
2、geojson是很多点的geojosn。可以使用ArcMap准备一个点集图层，然后使用mapshaper导出geojson。如图所示
3、我用的geojosn测试数据，测试数据，0积分的，可以下载 的


以上准备好前提，下面是加载热力图核心代码，比较简单，就是创建个图层，放入map对象中即可

 // 创建geojson数据源，QYWZ是上述所说的geojson
 const source = new Vector({
   features: new GeoJSON().readFeatures(QYWZ)
 })
 // 定义热力图图层
 const heatLayer = new Heatmap({
   source: source,
   blur: 10, // 模糊度
   radius: 2 // 半径
 })
 heatLayer.setMap(this.$refs.baseMap.map) // 自己的map对象

注：当geojosn越大，出来结果越慢，我用到的geojson大小约3.4M，热力图大约3~4秒才能出来

最后效果如下图所示