cesium 模型上标点

html内容 先把点写出来 给每个点加上id

<div class="speed-points">
      <div class="test" v-for="(item, index) in speedposition" :key="'speed' + index" :id="'speed' + index">
        <p class="label-text-test">{{ item.CameraName }}</p>
        <img class="ImglabelIcon" src="http://58.49.74.231:114/bridge/source/file/105" alt="" srcset="">
      </div>
    </div>

点的css样式

.speed-points {
        pointer-events: all;
        cursor: pointer;

        .test {
            position: absolute;

            .label-text-test {
                font-size: 13px;
                color: white;
                // margin-left: -2px;
                margin-bottom: 6px;
                border: #28d4ff solid 1px;
                background-color: black;
            }

            .ImglabelIcon {
                height: 20px;
                width: 20px;
            }
        }
    }

js方法

data(){
return{
 viewer:null,
      speedposition: [
        { Position: { lng: 117.7265455283816 , lat: 30.856550471630687 , h: 95.65749310161625 }, CameraName: '下游侧02(内)' },
        { Position: { lng: 117.72654384402186, lat: 30.856541410762965, h: 95.47293678336666 }, CameraName: '下游侧01(外)' },
        { Position: { lng: 117.72625024441808, lat: 30.85644888439552, h: 94.2436027698923 }, CameraName: '上游侧01(外)' },
        { Position: { lng: 117.72625796149485, lat: 30.85644174113434, h: 95.70824900777886 }, CameraName: '上游侧02(内)' },
      ],
}
}

mounted() {
    this.test()
  },
methods: {
    test(){
this.viewer = this.getViewer();
this.speedremoveEvent = viewer.scene.preRender.addEventListener(() => {
        if (this.speedposition.length > 0) {
          this.speedposition.forEach((el, index) => {
            let ele = document.getElementById("speed" + index);
            if (ele != null) {
              const scratch = new Cesium.Cartesian2();
              const position = Cesium.Cartesian3.fromDegrees(
                el.Position.lng,
                el.Position.lat,
                el.Position.h
              );

              const canvasPosition =
              this.viewer.scene.cartesianToCanvasCoordinates(position, scratch);

              if (canvasPosition && canvasPosition.x && canvasPosition.y) {
                ele.style.left = `${canvasPosition.x - ele.offsetWidth / 2}px`;
                ele.style.top = `${canvasPosition.y - ele.offsetHeight / 2 - 30
                  }px`;
              }
            }
          });
        }
      });

    }
}

怎样获取lng lat h

// 获取点坐标
this.handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);
this.handler.setInputAction(function (event) {
  // 获取场景中的地理位置
  // var ray = viewer.camera.getPickRay(event.position);
  // var earthPosition = viewer.scene.globe.pick(ray, viewer.scene);
  var earthPosition = viewer.scene.pickPosition(event.position);

  var cartographic = Cesium.Cartographic.fromCartesian(earthPosition);
  var longitudeString = Cesium.Math.toDegrees(cartographic.longitude);
  var latitudeString = Cesium.Math.toDegrees(cartographic.latitude);
  console.log(longitudeString,latitudeString,cartographic.height)
}, Cesium.ScreenSpaceEventType.LEFT_CLICK);

将上方这段代码复制到控制台enter后点击模型上你要标点的位置 就取到以上三个值了