OpenLayers 热力图实战20 行代码画出点数据与轨迹密度图【免费下载链接】openlayersOpenLayers项目地址: https://gitcode.com/gh_mirrors/op/openlayers想在地图上回答哪里更密集OpenLayers 热力图比逐点绘制直观得多。这篇以ol/layer/Heatmap图层为主线只用几行配置就能搭出两类空间数据密度可视化地震点热力图与船舶轨迹热力图。该图层走 WebGL 渲染管线几万级数据量也不会给页面带来太大负担。先看你手上是什么空间数据先对号入座点事件地震、店铺、传感器点位每个点可以带一个强度字段震级、计数交给weight即可。线轨迹船舶 AIS、车辆 GPS 轨迹热度来自线路本身线重叠越多颜色越热。其他POI、交通流量凡能画成点或线的矢量数据都适用。第一张点热力图不到 20 行代码跑通密度渲染一个VectorSource加三个参数第一张热力图就有了import Map from ol/Map.js; import View from ol/View.js; import KML from ol/format/KML.js; import Heatmap from ol/layer/Heatmap.js; import VectorSource from ol/source/Vector.js; const heatmap new Heatmap({ source: new VectorSource({ url: data/kml/2012_Earthquakes_Mag5.kml, format: new KML(), }), radius: 5, blur: 15, weight: (feature) parseFloat(feature.get(name).substr(2)) - 5, }); new Map({ target: map, layers: [heatmap], view: new View({center: [0, 0], zoom: 2}), });weight这里从 KML 的name属性里解析震级做归一化如果你的数据带数值字段直接把字段名当字符串传入即可。带滑块的完整版见 examples/heatmap-earthquakes.html。另外别忘了给地图加一个底图图层OSM、StadiaMaps 均可浅色瓦片衬出的热力色更明显类似下图这种 WMS 栅格瓦片热力图参数调优radius、blur、weight 怎么搭配参数默认值作用建议取值radius8数据点影响半径像素线的宽度为半径的 2 倍点 5~15线 3~8blur15叠加在 radius 之外的过渡带越大越柔、越小越锐比 radius 大 8~15weightweight字段名或函数决定单个点强度值会被截断到 0~1归一化到 0~1opacity1图层整体透明度叠底图时 0.6~0.8gradient蓝→红五色CSS 颜色数组生成渐变纹理低密度对应第一色首色用浅色 常用组合小radius 大blur出柔和的大片感大radius 小blur出锐利的斑点感。接上 range 滑块、调用setRadius()/setBlur()就能实时调官方示例就是这么做的。轨迹热力图线数据与采样间隔的取舍与点数据的差异只有一个source 里放线几何渲染器会沿线连续绘制不需要你手动把线打散成点。注意官方Heatmap并没有采样间隔参数如果你想要逐点权重比如按速度加权需要自己在预处理阶段把线采样成点取舍在于间隔越小细节越好、点越多、渲染越重。官方轨迹示例 examples/heatmap-trajectories.html 用恒定 weight并通过filter表达式按船舶类型筛选、用updateStyleVariables()运行时刷新是很实用的交互模式。常见坑快速排查画面空白数据坐标系与 View 不匹配数据 4326、地图 3857。用fromLonLat()包一下坐标或重投影数据同时确认 source 真的加载到了要素。点位偏移、海岸线出现两遍投影不一致现象参考下图。没有颜色层次weight 全部被截断到 1超过 1 的值会被 clamp或字段名写错undefined会回退成 1。先把 weight 归一化。⚠️ 出现黑块或颜色发灰weight 返回了 NaN。确认字段存在并用Number()做转换。大数据量卡顿10 万点以上先抽稀或简化点位或改用瓦片化方案分块加载。小结热力图 矢量数据源 radius / blur / weight 三件套参数归一化之后密度自然就出来了。深入实现看图层源码 src/ol/layer/Heatmap.js练习数据可用 examples/data/geojson/ship-trajectories.json。【免费下载链接】openlayersOpenLayers项目地址: https://gitcode.com/gh_mirrors/op/openlayers创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
