cesium加载3dtiles模型贴图到地图

最新推荐文章于 2024-03-15 14:46:31 发布

汪小敏同学

最新推荐文章于 2024-03-15 14:46:31 发布

阅读量1.9k

点赞数

分类专栏： vue基础知识总结文章标签： 3d 贴图

本文链接：https://blog.csdn.net/weixin_44692055/article/details/126915464

版权

vue基础知识总结专栏收录该内容

70 篇文章 5 订阅

订阅专栏

  
  
<template>
 
    <div id="cesiumContainer">  </div>
</template>
  
<script>
var viewer;
export default {
  data() {
    return {
    
    }
  },

  mounted() {
    //天地图token
    let TDT_tk = "fb258b4c0bbf60ff7a0205b519ad9a96";
    //Cesium token
    let cesium_tk = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjMzEyYTYxYS1jNDVjLTQwNWQtOWMxMS00YTBkODA5ZWM5ZTAiLCJpZCI6MTA4MjEyLCJpYXQiOjE2NjMzMTI1Mzd9.wzgyyPRkywsre6aZ7HPP-w5UqfSnuPgJa7EuWjPqccc";
    //天地图影像
    let TDT_IMG_C = "http://{s}.tianditu.gov.cn/img_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
      "&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
      "&style=default&format=tiles&tk=" + TDT_tk;

    //标注
    let TDT_CIA_C = "http://{s}.tianditu.gov.cn/cia_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
      "&LAYER=cia&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
      "&style=default&format=tiles&tk=" + TDT_tk;

    // //初始页面加载
    Cesium.Ion.defaultAccessToken = cesium_tk;
    viewer = new Cesium.Viewer('cesiumContainer', {
      geocoder: false,   // 位置查找工具
      baseLayerPicker: false,// 图层选择器（地形影像服务）
      timeline: false, // 底部时间线
      homeButton: false,// 视角返回初始位置
      fullscreenButton: false, // 全屏
      animation: false,   // 左下角仪表盘（动画器件）
      sceneModePicker: false,// 选择视角的模式（球体、平铺、斜视平铺）
      navigationHelpButton: false, //导航帮助按钮
      requestRenderMode: true, //启用请求渲染模式
        scene3DOnly: false, //每个几何实例将只能以3D渲染以节省GPU内存
        sceneMode: 3, //初始场景模式 1 2D模式 2 2D循环模式 3 3D模式  Cesium.SceneMode
      imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
        url: TDT_IMG_C,
        layer: "tdtImg_c",
        style: "default",
        format: "tiles",
        // tileMatrixSetID: "c",
        subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
        tilingScheme: new Cesium.GeographicTilingScheme(),
        tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18"],
        maximumLevel: 18,
        show: false,
      
        tileMatrixSetID: 'w',
        
      })
    });

     //调用影响中文注记服务
    viewer.imageryLayers.addImageryProvider(new Cesium.WebMapTileServiceImageryProvider({
      url: TDT_CIA_C,
      layer: "tdtImg_c",
      style: "default",
      format: "tiles",
      tileMatrixSetID: "c",
      subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
      tilingScheme: new Cesium.GeographicTilingScheme(),
      tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"],
      maximumLevel: 50,
      show: false
    }));

    this.loadModelFun();
  },
  methods: {
    loadModelFun() {
      viewer._cesiumWidget._creditContainer.style.display = "none"; //去除版权信息
      let tileSetModel = new Cesium.Cesium3DTileset({ url: "/terra_pnts/tileset.json" , maximumScreenSpaceError: 2,
            maximumNumberOfLoadedTiles: 100000});
      // tileSetModel.readyPromise.then(tileset => {
      //   console.log("加载完成")
      //   viewer.scene.primitives.add(tileset);
      //   viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.5, -0.5, tileset.boundingSphere.radius * 1.0));
      // }).catch(function (error) {
      //   console.log(error);
      // });

   //控制模型的位置
   tileSetModel.readyPromise.then(function (palaceTileset) {
          viewer.scene.primitives.add(palaceTileset);
          var heightOffset = 2.0; //可以改变3Dtiles的高度
          var boundingSphere = palaceTileset.boundingSphere;
          var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
          var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
          var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
          var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
          palaceTileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
          viewer.zoomTo(palaceTileset, new Cesium.HeadingPitchRange(0.5, -0.2, palaceTileset.boundingSphere.radius *
              1.0));
      });

     },


  }
}
</script>
  
<style scoped>
#cesiumContainer {
  width: 100%;
  height: 100vh;
}

</style>