cesium实现二三维联动

最新推荐文章于 2024-05-15 22:50:31 发布

m0_45305745

最新推荐文章于 2024-05-15 22:50:31 发布

阅读量696

点赞数

分类专栏： cesium 文章标签：前端 javascript

本文链接：https://blog.csdn.net/m0_45305745/article/details/135194310

版权

cesium 专栏收录该内容

6 篇文章 3 订阅

订阅专栏

记录项目中实现二三维地图联动

效果如下：

第一步：现在页面中加载二三维地图（地图的初始化已省略）

<template>
  <div>
    <div><button @click="show">二三维联动</button></div>
    <div>
      <div id="cesiumcontainer3D" @mouseenter="mouseleave3d"></div>
      <div id="cesiumcontainer2D" @mouseenter="mouseleave2d"></div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
#cesiumcontainer3D {
  height: calc(100vh - 0px);
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  float: left;
}
#cesiumcontainer2D {
  height: calc(100vh - 0px);
  width: 100%;
  margin: 0 0 0 0;
  padding: 0 0 0 0;
  float: right;
}
</style>

第二步：监听实现联动

    mouseleave3d() {
      window.is3d = true;
    },
    mouseleave2d() {
      window.is3d = false;
    },
    setView23D(is2D_show) {
      // 二维地图事件
      if (is2D_show == false) {
        window.removeChanged();
        map_2D.off("moveend");
      } else {
        map_2D.on("moveend", (event) => {
          if (window.is3d) return;
          const bounds = map_2D.getBounds();
          this.viewer.camera.flyTo({
            destination: Cesium.Rectangle.fromDegrees(
              bounds._southWest.lng,
              bounds._southWest.lat,
              bounds._northEast.lng,
              bounds._northEast.lat
            ),
            duration: 0.25,
          });
        });

        // 三维地图事件
        const fitBounds2d = () => {
          if (!window.is3d) return;
          let levelInfo = "级数：0级  ";
          let tileRender = this.viewer.scene._globe._surface._tilesToRender;
          if (tileRender && tileRender.length > 0) {
            levelInfo =
              "级数：" +
              this.viewer.scene._globe._surface._tilesToRender[0]._level +
              "级  ";
            console.log(levelInfo);
          }
          const rectangle = this.viewer.camera.computeViewRectangle();
          // 弧度转为经纬度
          const west = (rectangle.west / Math.PI) * 180;
          const north = (rectangle.north / Math.PI) * 180;
          const east = (rectangle.east / Math.PI) * 180;
          const south = (rectangle.south / Math.PI) * 180;
          map_2D.fitBounds([
            [south, west],
            [north, east],
          ]);
        };
        window.removeChanged =
          this.viewer.scene.camera.moveEnd.addEventListener(function () {
            fitBounds2d();
          });
      }
    },
    show() {
      this.is2D_show = !this.is2D_show;
      this.setView23D(this.is2D_show);
      if (this.is2D_show) {
        this.switchMapView("23D");
      } else {
        this.switchMapView("3D");
      }
    },
    // 切换地图视图
    switchMapView(type) {
      switch (type) {
        case "3D":
          document.getElementById("cesiumcontainer3D").style.width = "99.9%";
          document.getElementById("cesiumcontainer2D").style.width = "0.1%";
          break;
        case "23D":
          document.getElementById("cesiumcontainer3D").style.width = "50%";
          document.getElementById("cesiumcontainer2D").style.width = "50%";
          break;
      }
    },