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

  })

}