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

})

}

相关推荐
zwjapple3 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
一心0924 小时前
ubuntu 20.04.6 sudo 源码包在线升级到1.9.17p1
运维·ubuntu·sudo·漏洞升级
好好学习啊天天向上4 小时前
世上最全:ubuntu 上及天河超算上源码编译llvm遇到的坑,cmake,ninja完整过程
linux·运维·ubuntu·自动性能优化
你想考研啊5 小时前
三、jenkins使用tomcat部署项目
运维·tomcat·jenkins
代码老y5 小时前
Docker:容器化技术的基石与实践指南
运维·docker·容器
像风一样自由20205 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
典学长编程6 小时前
Linux操作系统从入门到精通!第二天(命令行)
linux·运维·chrome
aiprtem6 小时前
基于Flutter的web登录设计
前端·flutter
浪裡遊6 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术6 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端