Cesium标记地点

shenshen_ouni

已于 2024-09-10 10:46:49 修改

阅读量210

点赞数 3

文章标签：前端

于 2024-09-10 10:44:28 首次发布

本文链接：https://blog.csdn.net/shenshen_ouni/article/details/142092621

版权

  Board() {
      // let dataSource = new Cesium.CustomDataSource("myData");

      // 监听左键点击事件
      this.handler.setInputAction((movement) => {
        // 获取鼠标点击处的椭球表面坐标
        let ray = this.viewer.camera.getPickRay(movement.position);
        let cartesian = this.viewer.scene.globe.pick(ray, this.viewer.scene);
        if (cartesian) {
          // 将Cartesian3坐标转换为经纬度坐标
          let cartographic = Cesium.Cartographic.fromCartesian(cartesian);
          let lng = Cesium.Math.toDegrees(cartographic.longitude);
          let lat = Cesium.Math.toDegrees(cartographic.latitude);

          // 添加billboard到数据源
          this.viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(lng, lat, 0),
            show: true,
            billboard: {
              image: "./images/sign.png",
              width: 35,
              height: 40,
              heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              pixelOffset: new Cesium.Cartesian2(12.5, 0),
            },
            label: {
              text: "喵喵",
              fillColor: Cesium.Color.DEEPSKYBLUE,
              font: "16px;",
            },
            point: {
              pixelSize: 8,
              color: Cesium.Color.IVORY,
            },
          });
        }
      }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
    },