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

})

}

相关推荐
excel16 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼18 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping18 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙19 小时前
[译] Composition in CSS
前端·css
白水清风19 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix19 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780019 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端19 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧19 小时前
Promise 的使用
前端·javascript
NBtab19 小时前
Vite + Vue3项目版本更新检查与页面自动刷新方案
前端