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

})

}

相关推荐
WEI_Gaot1 分钟前
React Hooks useRef useId
前端·react.js
一天睡25小时2 分钟前
视频HLS分片与关键帧优化深度解析
前端·javascript
孤鸿玉3 分钟前
[Flutter小试牛刀] 低配版signals,添加多层监听链
android·前端·响应式设计
漫漫漫丶3 分钟前
基于Node+HeadlessBrowser的浏览器自动化方案
前端
WEI_Gaot3 分钟前
React Hooks useContext useReducer
前端·react.js
用户2031196600966 分钟前
空合并运算符
前端·后端
Java~~6 分钟前
山东大学软件学院项目实训-基于大模型的模拟面试系统-网页图片显示问题
javascript·vue.js
我头上有犄角ovo8 分钟前
🤯 什么?!还在跪求后端大佬帮你上线项目?NodeSSH 让你前端也能玩转部署:从求人到自主的逆袭之路!
前端
柳如烟@21 分钟前
Docker安装ES :确保 Kibana 正确连接 Elasticsearch
运维·数据库·elasticsearch·docker·容器·kibana
app1e23428 分钟前
ctfshow web入门 命令执行(29-77)
android·前端