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

实现效果：

原始代码：

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  
  }