【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秒运动至指定位置

})

}

相关推荐
weixin_457885823 分钟前
JavaScript智能对话机器人——企业知识库自动化
开发语言·javascript·自动化
机器视觉知识推荐、就业指导18 分钟前
QML 批量创建模块 【Repeater】 组件详解
前端·c++·qml
whuzhang1622 分钟前
3dgs通俗讲解
3d
lmryBC4924 分钟前
golang接口-interface
java·前端·golang
慕斯策划一场流浪30 分钟前
fastGPT—nextjs—mongoose—团队管理之团队列表api接口实现
开发语言·前端·javascript·fastgpt env文件配置·fastgpt团队列表接口实现·fastgpt团队切换api·fastgpt团队切换逻辑
LaoZhangAI1 小时前
【2025最新】Claude免费API完全指南:无需信用卡,中国用户也能用
前端
电星托马斯1 小时前
Linux系统CentOS 6.3安装图文详解
linux·运维·服务器·程序人生·centos
啞謎专家1 小时前
CentOS中挂载新盘LVM指南:轻松扩展存储空间,解决磁盘容量不足问题
linux·运维·服务器
hepherd1 小时前
Flask学习笔记 - 模板渲染
前端·flask