使用Mars3d加载热力图的时候，出现阴影碎片

相关链接：

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 = centerPoint1 + (Math.random() - 0.5) * 0.002;

const randomLng = centerPoint0 + (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 = arrPointi.geometry.coordinates

const val = Math.floor(Math.random() * 100) // 热力值

arr.push({ lng: item0, lat: item1, value: val })

}

return arr

}

function lerpHeatMapData(startArr, endArr, ratio, result) {

for (let i = 0; i < heatCount; i++) {

const start = startArri

const end = endArri

resulti = {

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  
  }