cesium加载倾斜摄影模型

最新推荐文章于 2023-12-01 11:43:01 发布

devil-J

最新推荐文章于 2023-12-01 11:43:01 发布

阅读量1.2k

点赞数

分类专栏： Cesium vue 文章标签： vue Cesium

本文链接：https://blog.csdn.net/weixin_45660011/article/details/127519661

版权

vue 同时被 2 个专栏收录

19 篇文章 2 订阅

订阅专栏

Cesium

7 篇文章 1 订阅

订阅专栏

在这里插入图片描述

倾斜摄影模型在本地用nginx开一个虚拟主机进行测试，具体方法会单独讲解，切斜摄影的模型你们就自己在网上下载吧

<template>
  <!-- 导入倾斜摄影数据 -->
  <div class="cesium">
    <div id="cesiumContainer"></div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {};
  },
  mounted() {
    this.mapInit();
  },
  methods: {
    mapInit() {
      Cesium.Ion.defaultAccessToken = "你的token";//具体申请方法在https://blog.csdn.net/weixin_45660011/article/details/127244399中有讲解
      var viewer = new Cesium.Viewer("cesiumContainer", {
        animation: false, // 是否显示动画控件
        baseLayerPicker: false, // 是否显示图层选择控件
        vrButton: false, // 是否显示VR控件
        geocoder: false, // 是否显示地名查找控件
        timeline: false, // 是否显示时间线控件
        sceneModePicker: false, // 是否显示投影方式控件
        navigationHelpButton: false, // 是否显示帮助信息控件
        navigationInstructionsInitiallyVisible: false, // 帮助按钮，初始化的时候是否展开
        infoBox: false, // 是否显示点击要素之后显示的信息
        fullscreenButton: false, // 是否显示全屏按钮
        selectionIndicator: false, // 是否显示选中指示框
        homeButton: false, // 是否显示返回主视角控件
        scene3DOnly: false, // 如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
      });
      viewer._cesiumWidget._creditContainer.style.display = "none"; // 隐藏版权
      // 倾斜摄影模型
      // viewer.scene.globe.depthTestAgainstTerrain = true; //重要  固定物体在位置上
      viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100; //限制地图浏览范围的观看最低高度
      var palaceTileset = new Cesium.Cesium3DTileset({
        url: "http://127.0.0.1/tileset.json", //nginx开服务，加载倾斜摄影的模型
      });

      palaceTileset.readyPromise.then(function (tileset) {
        var cartographic = Cesium.Cartographic.fromCartesian(
          tileset.boundingSphere.center
        );
        var surface = Cesium.Cartesian3.fromRadians(
          cartographic.longitude,
          cartographic.latitude,
          0
        );
        var offset = Cesium.Cartesian3.fromRadians(
          cartographic.longitude + 0.000065,//调整位置
          cartographic.latitude - 0.000002,//调整位置
          -70.0 //填高度差值
        );
        var translation = Cesium.Cartesian3.subtract(
          offset,
          surface,
          new Cesium.Cartesian3()
        );

        tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
        viewer.scene.primitives.add(tileset);
        viewer.flyTo(tileset);
      });

      viewer.scene.primitives.add(palaceTileset);
    },
  },
};
</script>
<style lang='scss' scoped>
.cesium {
  position: absolute;
  width: 100%;
  height: 100%;
  #cesiumContainer {
    width: 100%;
    height: 100%;
  }
}
</style>