使用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 = 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  
  }
相关推荐
β添砖java9 分钟前
vivo响应式官网
前端·css·html·1024程序员节
逐步前行2 小时前
C标准库--C99--布尔型<stdbool.h>
c语言·开发语言
QX_hao2 小时前
【Go】--闭包
开发语言·golang
麦麦大数据4 小时前
F032 材料科学文献知识图谱可视化分析系统(四种知识图谱可视化布局) | vue + flask + echarts + d3.js 实现
vue.js·flask·知识图谱·数据可视化·论文文献·1024程序员节·科研图谱
web打印社区5 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗5 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长5 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
林月明5 小时前
【VBA】自动设置excel目标列的左邻列格式
开发语言·excel·vba·格式
喜欢吃燃面6 小时前
数据结构算法题:list
开发语言·c++·学习·算法·1024程序员节
。TAT。6 小时前
C++ - 多态
开发语言·c++·学习·1024程序员节