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