相关链接：
http://mars3d.cn/editor-vue.html?key=ex_10_0_3&id=layer-other/heatmap/heatLayer-dynamics
实现效果：
原始代码：
import * as mars3d from "mars3d"
export let map // mars3d.Map三维地图对象
let heatLayer
// 需要覆盖config.json中地图属性参数（当前示例框架中自动处理合并）
export const mapOptions = {
scene: {
center: { "lat": 29.714782, "lng": 90.957092, "alt": 6368.4, "heading": 6.8, "pitch": -88.4 }
}
}
// 初始化地图业务，生命周期钩子函数（必须）,框架在地图初始化完成后自动调用该函数
export function onMounted(mapInstance) {
map = mapInstance // 记录map
map.basemap = 2017 // 蓝色底图
showHeatMap()
}
// 释放当前地图业务的生命周期函数,具体项目中时必须写onMounted的反向操作（如解绑事件、对象销毁、变量置空）
export function onUnmounted() {
map = null
}
function showHeatMap() {
// 随机数据的生成
const heatMapData0 = getRandomPoints()
const heatMapData1 = getRandomPoints()
const resultHeatMapData = getRandomPoints()
const newHeatData = [];
let points = [
[90.956005, 29.709817],
[90.956747, 29.714955],
[90.958907, 29.725692],
[90.960716, 29.720297],
];
// 为每个中心点生成周围的热力数据点
points.forEach((centerPoint) => {
// 每个中心点生成20个随机点
for (let i = 0; i < 20; i++) {
// 在中心点周围随机生成经纬度偏移
const randomLat = centerPoint[1] + (Math.random() - 0.5) * 0.002;
const randomLng = centerPoint[0] + (Math.random() - 0.5) * 0.002;
// 生成30-100之间的随机值
const randomValue = Math.floor(Math.random() * 70) + 30;
newHeatData.push({
lng: randomLng,
lat: randomLat,
value: randomValue,
});
}
});
// 热力图 图层
heatLayer = new mars3d.layer.HeatLayer({
positions: newHeatData,
// 以下为热力图本身的样式参数，可参阅api：https://www.patrick-wied.at/static/heatmapjs/docs.html
heatStyle: {
radius: 26,
},
// 以下为矩形矢量对象的样式参数
style: {
// arc: true, // 是否为曲面
clampToGround: true,
height: 0
}
})
map.addLayer(heatLayer)
// 为了演示动态更新
// let ratio = 0
// setInterval(() => {
// if (!isDynamic) {
// return
// }
// ratio += 0.003
// if (ratio > 1.0) {
// ratio = 0.0
// }
// lerpHeatMapData(heatMapData0, heatMapData1, ratio, resultHeatMapData)
// // 更新数据
// heatLayer.positions = resultHeatMapData
// }, 100)
}
let isDynamic = true
export function chkUnderground(enabled) {
isDynamic = enabled
}
const rectangle = {
xmin: 117.226189,
xmax: 117.245831,
ymin: 31.828858,
ymax: 31.842967
}
const heatCount = 1000
// 获取bbox矩形区域内的count个随机点
function getRandomPoints() {
const arr = []
const arrPoint = turf.randomPoint(heatCount, { bbox: [rectangle.xmin, rectangle.ymin, rectangle.xmax, rectangle.ymax] }).features // 随机点
for (let i = 0; i < arrPoint.length; i++) {
const item = arrPoint[i].geometry.coordinates
const val = Math.floor(Math.random() * 100) // 热力值
arr.push({ lng: item[0], lat: item[1], value: val })
}
return arr
}
function lerpHeatMapData(startArr, endArr, ratio, result) {
for (let i = 0; i < heatCount; i++) {
const start = startArr[i]
const end = endArr[i]
result[i] = {
lng: start.lng * (1 - ratio) + end.lng * ratio,
lat: start.lat * (1 - ratio) + end.lat * ratio,
value: start.value * (1 - ratio) + end.value * ratio
}
}
}
问题原因：
1.贴地的热力图，在出现部分阴影的时候，cesium底层可能暂未修复，需要增加参数控制下。
解决方案：
1.修改以下配置
scene: {
center: { "lat": 29.714782, "lng": 90.957092, "alt": 6368.4, "heading": 6.8, "pitch": -88.4 },
logarithmicDepthBuffer: false
}