Cesium 中 entity 简单移动

最新推荐文章于 2024-07-13 20:41:16 发布

大木博士的叮当喵

最新推荐文章于 2024-07-13 20:41:16 发布

阅读量3k

点赞数 2

分类专栏： cesium 文章标签： js webgl

本文链接：https://blog.csdn.net/qq_37202724/article/details/111550730

版权

cesium 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

Cesium entity 简单移动

w/s 控制 entity 高度
鼠标单击控制经纬度

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link href="../Cesium/Widgets/widgets.css" rel="stylesheet" />
    <script src="../Cesium/Cesium.js"></script>
    <style>
      html,
      body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
      }

      #cesiumContainer {
        width: 100%;
        height: 100%;
      }
      .pop_up {
        background: rgba(42, 42, 42, 0.8);
        color: white;
        font-size: 12px;
      }
    </style>
  </head>
  <body>
    <div id="cesiumContainer"></div>
    <table id="entityAttr" class="pop_up"></table>
    <script>
      let entityAttrEl = document.getElementById("entityAttr");
      let viewer = new Cesium.Viewer("cesiumContainer", {
        selectionIndicator: false,
        infoBox: false,
        shouldAnimate: true,
        imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
          url:
            "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",
        }),
      });
      let entity = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(120, 31),
        point: {
          pixelSize: 5,
          color: Cesium.Color.RED,
          outlineColor: Cesium.Color.WHITE,
          outlineWidth: 2,
        },
        label: {
          text: "Citizens Bank Park",
          font: "14pt monospace",
          style: Cesium.LabelStyle.FILL_AND_OUTLINE,
          outlineWidth: 2,
          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          pixelOffset: new Cesium.Cartesian2(0, -9),
        },
        ellipsoid: {
          //可以指定三个轴的半径
          radii: new Cesium.Cartesian3(200, 200, 200),
          material: Cesium.Color.BLUE,
        },
      });
      var ellipsoid01 = viewer.entities.add({
        name: "Blue ellipsoid",
        position: Cesium.Cartesian3.fromDegrees(120, 31, 3000.0),
        ellipsoid: {
          //可以指定三个轴的半径
          radii: new Cesium.Cartesian3(200, 500, 200),
          material: Cesium.Color.RED,
        },
      });

      // 添加辅助线
      let line_height, line_lat, line_lng;
      let modelEntity = viewer.entities.add({
        position: Cesium.Cartesian3.fromDegrees(120, 31.5),
        model: {
          uri: "../model/shengli/ww3.gltf",
        },
      });
      viewer.zoomTo(entity);
      adjustEntity();
      function adjustEntity() {
        let moveFlag = false; // 是否移动 entity
        let entitySelected = null; // 单击选中的 entity
        let position = { x: 0, y: 0, z: 0 };
        const handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);
        // 鼠标左键按下,拾取 entity
        handler.setInputAction(function (e) {
          // 拾取坐标
          var pick = viewer.scene.pick(e.position);
          if (pick && pick.id) {
            moveFlag = true;
            if (!line_height) {
              addAssistLine()
            }
            // 禁止相机移动
            viewer.scene.screenSpaceCameraController.enableInputs = false;
            if (entitySelected && entitySelected == pick.id) {
              return;
            }
            if (entitySelected && entitySelected != pick.id) {
              setPosition();
            }

            // 获取实体 entity
            entitySelected = pick.id;
            // 获取实体坐标并赋值给 position
            let p = worldToLng(viewer, entitySelected.position._value);
            position.x = p.x;
            position.y = p.y;
            position.z = p.z;
            // position 添加 callbackProperty
            entitySelected.position = new Cesium.CallbackProperty(function () {
              return Cesium.Cartesian3.fromDegrees(
                position.x,
                position.y,
                position.z
              );
            }, false);
          } else {
            setPosition();
            entitySelected = undefined;
            moveFlag = false;
            viewer.scene.screenSpaceCameraController.enableInputs = true;
          }
        }, Cesium.ScreenSpaceEventType.LEFT_DOWN);
        // 左键抬起, 完成移动
        handler.setInputAction(function (e) {
          moveFlag = false;
          viewer.scene.screenSpaceCameraController.enableInputs = true;
        }, Cesium.ScreenSpaceEventType.LEFT_UP);
        // 右击事件, 完成高度设置
        handler.setInputAction(function (e) {
          if (moveFlag) return;
          console.log(position);
          setPosition();
          entitySelected = undefined;
          // 移除辅助线
          viewer.entities.remove(line_height)
          viewer.entities.remove(line_lng)
          viewer.entities.remove(line_lat)
          line_height=undefined
          line_lng=undefined
          line_lat=undefined
        }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);

        handler.setInputAction(function (e) {
          if (entitySelected && moveFlag) {
            let p = mousePointToLngLat(viewer, e.endPosition);
            position.x = p.lng;
            position.y = p.lat;
          }
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);

        window.addEventListener("keydown", (e) => {
          if (!entitySelected) return;
          switch (e.keyCode) {
            case 87:
              position.z += 1;
              break;
            case 83:
              position.z -= 1;
          }
        });

        function setPosition() {
          if (!entitySelected) return;
          console.log(position);
          entitySelected.position = Cesium.Cartesian3.fromDegrees(
            position.x,
            position.y,
            position.z
          );
        }
        // 世界坐标转经纬度
        function worldToLng(viewer, position) {
          var ellipsoid = viewer.scene.globe.ellipsoid;
          var cartographic = ellipsoid.cartesianToCartographic(position);
          if (cartographic == null) return null;
          var lat = Cesium.Math.toDegrees(cartographic.latitude);
          var lng = Cesium.Math.toDegrees(cartographic.longitude);
          var height = cartographic.height;
          var result = new Cesium.Cartesian3(lng, lat, height);
          return result;
        }

        // 屏幕坐标转经纬度
        function mousePointToLngLat(viewer, mousePoint) {
          var ellipsoid = viewer.scene.globe.ellipsoid;
          var pick1 = new Cesium.Cartesian2(mousePoint.x, mousePoint.y);
          var cameraRay = viewer.camera.getPickRay(pick1);
          var cartesian = viewer.scene.globe.pick(cameraRay, viewer.scene);
          if (!cartesian) {
            return;
          }
          var cartographic = ellipsoid.cartesianToCartographic(cartesian);
          var lat = Cesium.Math.toDegrees(cartographic.latitude);
          var lng = Cesium.Math.toDegrees(cartographic.longitude);
          return { lng: lng, lat: lat };
        }

        function addAssistLine() {
          line_height = viewer.entities.add({
            id: "line_height",
            polyline: {
              positions: new Cesium.CallbackProperty(function () {
                return Cesium.Cartesian3.fromDegreesArrayHeights([
                  position.x,
                  position.y,
                  position.z - 1000,
                  position.x,
                  position.y,
                  position.z + 1000,
                ]);
              }, false),
              width: 10,
              material: new Cesium.PolylineArrowMaterialProperty(
                Cesium.Color.RED
              ),
            },
          });
          line_lng = viewer.entities.add({
            id: "line_lng",
            polyline: {
              positions: new Cesium.CallbackProperty(function () {
                return Cesium.Cartesian3.fromDegreesArrayHeights([
                  position.x - 0.01,
                  position.y,
                  position.z,
                  position.x + 0.01,
                  position.y,
                  position.z,
                ]);
              }, false),
              width: 10,
              material: new Cesium.PolylineArrowMaterialProperty(
                Cesium.Color.YELLOW
              ),
            },
          });
          line_lat = viewer.entities.add({
            id: "line_lat",
            polyline: {
              positions: new Cesium.CallbackProperty(function () {
                return Cesium.Cartesian3.fromDegreesArrayHeights([
                  position.x,
                  position.y - 0.01,
                  position.z,
                  position.x,
                  position.y + 0.01,
                  position.z,
                ]);
              }, false),
              width: 10,
              material: new Cesium.PolylineArrowMaterialProperty(
                Cesium.Color.BLUE
              ),
            },
          });
        }
      }
    </script>
  </body>
</html>

三连哦!!!

大木博士的叮当喵

关注

2
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
Cesium 中 entity 简单移动

Cesium entity 简单移动w/s 控制 entity 高度鼠标单击控制经纬度<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document<
复制链接

扫一扫