【mars3d】graphic.addDynamicPosition({矢量数据移动时增加监听事件进行其他操作

【mars3d】graphic.addDynamicPosition({矢量数据移动时增加监听事件进行其他操作的实现方案

关键代码:

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

const graphic = new mars3d.graphic.ModelEntity({

viewFrom: new Cesium.Cartesian3(-500, -500, 200),

style: {

url: "//data.mars3d.cn/gltf/mars/qiche.gltf",

scale: 0.5,

minimumPixelSize: 20,

// 高亮时的样式(默认为鼠标移入,也可以指定type:'click'单击高亮),构造后也可以openHighlight、closeHighlight方法来手动调用

highlight: {

type: mars3d.EventType.click,

silhouette: true,

silhouetteColor: "#ff0000",

silhouetteSize: 4

},

label: {

// 不需要文字时,去掉label配置即可

text: "皖A000" + i,

font_size: 16,

color: "#ffffff",

outline: true,

outlineColor: "#000000",

pixelOffsetY: -20,

distanceDisplayCondition: true,

distanceDisplayCondition_far: 50000,

distanceDisplayCondition_near: 0

}

},

// forwardExtrapolationType: Cesium.ExtrapolationType.NONE,

attr: { index: i, remark: "Model示例" }

})

graphicLayer.addGraphic(graphic)

// 仅 forwardExtrapolationType: Cesium.ExtrapolationType.NONE时触发

graphic.on(mars3d.EventType.stop, function (event) {

console.log("已停止运行", event.target?.attr)

})

}

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

const graphic = new mars3d.graphic.BillboardEntity({

viewFrom: new Cesium.Cartesian3(-500, -500, 200),

style: {

image: "img/marker/mark-blue.png",

horizontalOrigin: Cesium.HorizontalOrigin.CENTER,

verticalOrigin: Cesium.VerticalOrigin.BOTTOM,

scaleByDistance: new Cesium.NearFarScalar(10000, 1.0, 500000, 0.1)

},

attr: { index: i, remark: "Billboard示例" }

})

graphicLayer.addGraphic(graphic)

}

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

const graphic = new mars3d.graphic.DivUpLabel({

style: {

text: "火星科技",

color: "#fff",

font_size: 13,

font_family: "微软雅黑",

lineHeight: 20,

circleSize: 5,

distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 100000)

},

attr: { index: i, remark: "DivUpLabel示例" }

})

graphicLayer.addGraphic(graphic)

}

// 设置动态位置

changePosition(0)

// 定时更新动态位置(setInterval为演示)

const interval = 30

changePosition(interval)

setInterval(() => {

changePosition(interval)

}, interval * 1000)

}

// 改变位置

function changePosition(time) {

graphicLayer.eachGraphic((graphic) => {

if (graphic.isPrivate) {

return

}

graphic.addDynamicPosition(randomPoint(), time) // 按time秒运动至指定位置

})

}

相关推荐
A了LONE2 分钟前
h5的底部导航栏模板
java·前端·javascript
专注VB编程开发20年4 分钟前
各版本操作系统对.NET支持情况(250707更新)
开发语言·前端·ide·vscode·.net
Zsnoin能14 分钟前
AI + TailwindCSS快速搭建一个属于自己的TailwindCSS学习网站
前端·css
五号厂房15 分钟前
聊一聊Javascript 中 hasOwnProperty和in操作之间的区别
前端
轻语呢喃16 分钟前
JavaScript :事件循环机制的深度解析
javascript·后端
摆烂为不摆烂19 分钟前
😁深入JS(六): 一文让你完全理解浏览器进程与线程
前端·javascript
qiyue7719 分钟前
Cursor 深度使用指南(二) - 新能力使用教程
前端·ai编程·cursor
ghie909041 分钟前
在Centos系统上如何有效删除文件和目录的指令汇总
linux·运维·centos
伟笑1 小时前
React 的常用钩子函数在Vue中是如何设计体现出来的。
前端·react.js
Linux-palpitate1 小时前
Keepalived+LVS实现LNMP网站的高可用部署
linux·运维·服务器·mysql·lvs