Cesium加载建筑物模型（shp转Geojson\3Dtiles）

      本文主要介绍cesium加载Geojson和3dtile格式的建筑物模型文件，除此之外还介绍了Cesium工具栏的屏蔽方法、天地图的加载、地球初始状态设置等几个部分的内容，其中又不乏参照、优化诸如： 想成为大神的前端王菜鸟、 loves小鱼儿、 Alice爱俪丝等大神作品的内容，在此表示感谢，他们的文章地址分别如下：

         https://blog.csdn.net/wwqqqq123/article/details/90400366

         https://blog.csdn.net/xiaoyuer666999/article/details/75370428

         https://blog.csdn.net/qq_18144905/article/details/81979807

         文章内容都是我在学习和项目中实际遇到的需求，希望对大家也有所助益。

1.关于数据的获取和处理

       建筑物模型数据很多地方都号称有，不过获取可能要花点周折。本着开放学习交流的初心，文章会附带我做试验的原始及成果数据，希望对大家有用。

       （1）shp数据转换为Geojson数据

         虽然有很多工具，但Geojson数据和json数据还是有差别的，大家首先会想到ArcGIS，但我并没有用它达到理想的效果，最终采用的是QGIS实现shp数据转Geojson数据的，操作很简单，仅为加载，图层右键输出Geojson格式数据这样简单的操作。

        （2）3dtile数据的生成

          网上会宣称shp转换为3dtiles数据的处理工具，但同样要想使用这些工具，也要花费周折，我因刚接触Cesium不久，但终会在不久后会做出这样的工具，并将代码开放出了，敬请博文公告。这里就会在数据包中连同数据处理工具。

2.加载Geojson建筑物模型数据并渲染

    var viewer = new Cesium.Viewer('cesiumContainer');
    //添加geojson格式地理数据（由shp格式文件转换得来）
    Cesium.Math.setRandomNumberSeed(0);
    var promise =Cesium.GeoJsonDataSource.load('ShangHai3Dtiles.geojson');
    promise.then(function (dataSource) {
        viewer.dataSources.add(dataSource);
        var entities =dataSource.entities.values;
        for (var i = 0; i < entities.length;i++) {
            var entity = entities[i];
            var builingHeight = entity.properties.Floor;
            if(builingHeight>=3&&builingHeight<10){
                entity.polygon.material = Cesium.Color.GOLDENROD;
            }else if(builingHeight>=10&&builingHeight<20){
                entity.polygon.material = Cesium.Color.GRAY;
            }else if(builingHeight>=20&&builingHeight<30){
                entity.polygon.material = Cesium.Color.GHOSTWHITE;
            }else if(builingHeight>=30&&builingHeight<50){
                entity.polygon.material = Cesium.Color.CADETBLUE;
            }else if(builingHeight>=50){
                entity.polygon.material = Cesium.Color.GOLD ;
            }else{
                entity.polygon.material = Cesium.Color.FIREBRICK;
            }
            entity.polygon.outline = false;
            entity.polygon.extrudedHeight =(entity.properties.Floor)*10;
        }
    });
    viewer.flyTo(promise);

注意：大家在添加自己的数据时请注意文件的名称及路径。

3.加载3dtiles格式数据

var viewer = new Cesium.Viewer('cesiumContainer');     
//加载3Dtiles
var tileset = new Cesium.Cesium3DTileset({ url: 'tileset.json' });
viewer.scene.primitives.add(tileset);
viewer.flyTo(tileset);

注意：3dtile数据不同于Geojson数据，这个数据的渲染后面会有专门的博文介绍，但大家不要受有些博文的误导，硬是拿Entity实体结构的渲染方法去渲染3dtile模型文件。

4.Cesium工具栏的屏蔽方法

var viewer = new Cesium.Viewer("cesiumContainer", {
          animation: false,  //是否显示动画控件
          baseLayerPicker: false, //是否显示图层选择控件
          geocoder: true, //是否显示地名查找控件
          timeline: false, //是否显示时间线控件
          sceneModePicker: true, //是否显示投影方式控件
          navigationHelpButton: false, //是否显示帮助信息控件
          infoBox: true,  //是否显示点击要素之后显示的信息
          sceneModePicker: false, //是否显示3D/2D选择器
          selectionIndicator: false, //是否显示选取指示器组件
          timeline: false, //是否显示时间轴
          sceneMode: Cesium.SceneMode.SCENE3D, //设定3维地图的默认场景模式:Cesium.SceneMode.SCENE2D、Cesium.SceneMode.SCENE3D、Cesium.SceneMode.MORPHING
          navigationHelpButton: false, //是否显示右上角的帮助按钮
          scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
          navigationInstructionsInitiallyVisible: false,
          showRenderLoopErrors: false, //是否显示渲染错误
          //设置背景透明
          orderIndependentTranslucency:false,
          contextOptions:{
              webgl:{
                  alpha:true
              }
          },
      });
//隐藏版权信息
viewer._cesiumWidget._creditContainer.style.display = "none";

5.加载天地图的方法

//天地图URL配置
//在线天地图影像服务地址(墨卡托投影)
var TDT_IMG_W="http://{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
    "&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
    "&style=default&format=tiles&tk=自己的申请的tk" ;
//在线天地图矢量地图服务(墨卡托投影) 
var TDT_VEC_W="http://{s}.tianditu.gov.cn/vec_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
    "&LAYER=vec&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
    "&style=default&format=tiles&tk=自己的申请的tk";
//在线天地图影像中文标记服务(墨卡托投影)  
var TDT_CIA_W="http://{s}.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
    "&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
    "&style=default.jpg&tk=自己的申请的tk"
 //在线天地图矢量中文标记服务(墨卡托投影)            
var TDT_CVA_W="http://{s}.tianditu.gov.cn/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
    "&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
    "&style=default.jpg&tk=自己的申请的tk";
//在线天地图影像服务地址(经纬度)           
var 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=自己的申请的tk";
//在线天地图矢量地图服务(经纬度)  
var TDT_VEC_C="http://{s}.tianditu.gov.cn/vec_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
    "&LAYER=vec&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
    "&style=default&format=tiles&tk=自己的申请的tk";
//在线天地图影像中文标记服务(经纬度)   
var 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=自己的申请的tk" 
 //在线天地图矢量中文标记服务(经纬度)     
var TDT_CVA_C="http://{s}.tianditu.gov.cn/cva_c/wmts?service=wmts&request=GetTile&version=1.0.0" +
    "&LAYER=cva&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
    "&style=default&format=tiles&tk=自己的申请的tk"      

    var viewer = new Cesium.Viewer("cesiumContainer", {
          animation: false,  //是否显示动画控件
          baseLayerPicker: false, //是否显示图层选择控件
          geocoder: true, //是否显示地名查找控件
          timeline: false, //是否显示时间线控件
          sceneModePicker: true, //是否显示投影方式控件
          navigationHelpButton: false, //是否显示帮助信息控件
          infoBox: true,  //是否显示点击要素之后显示的信息
          sceneModePicker: false, //是否显示3D/2D选择器
          selectionIndicator: false, //是否显示选取指示器组件
          timeline: false, //是否显示时间轴
          sceneMode: Cesium.SceneMode.SCENE3D, //设定3维地图的默认场景模式:Cesium.SceneMode.SCENE2D、Cesium.SceneMode.SCENE3D、Cesium.SceneMode.MORPHING
          navigationHelpButton: false, //是否显示右上角的帮助按钮
          scene3DOnly: true, //如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源
          navigationInstructionsInitiallyVisible: false,
          showRenderLoopErrors: false, //是否显示渲染错误
          //设置背景透明
          orderIndependentTranslucency:false,
          contextOptions:{
              webgl:{
                  alpha:true
              }
          },
          //天地图影像服务（经纬度）
          imageryProvider:new Cesium.WebMapTileServiceImageryProvider({
              url: TDT_VEC_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
          }),
      });
      //调用影响中文注记服务
      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
      }));

6.改变球体初始位置

     //调整视图初始位置
      viewer.camera.rotateRight(Cesium.Math.toDegrees(0.5).toFixed(1));

      // /*定义初始缩放，值可以改动，以下括号里的值可以看情况自己设置。*/
      // viewer.camera.zoomIn(0);
      // /*放大*/
      // viewer.camera.zoomIn(1000);
      // /*缩小*/
      // viewer.camera.zoomOut(1000);
      // /*左旋转*/
      // viewer.camera.rotateLeft(Cesium.Math.toDegrees(0.005).toFixed(2));
      // /*viewer.camera.rotateLeft(0.000001);*/
      // /*右旋转*/
      // viewer.camera.rotateRight(Cesium.Math.toDegrees(0.005).toFixed(2));
      // /*viewer.camera.rotateRight(0.000001);*/
      // /*上倾斜，偏左旋转*/
      // viewer.camera.twistRight(Cesium.Math.toDegrees(0.005).toFixed(2));
      // /*下倾斜，偏右旋转*/
      // viewer.camera.twistLeft(Cesium.Math.toDegrees(0.005).toFixed(2));

      //配置home键的位置
      Cesium.Camera.DEFAULT_VIEW_RECTANGLE =
          Cesium.Rectangle.fromDegrees(80, 22, 130, 50);//home定位到中国范围

本文所用数据及数据处理工具请在此处下载//download.csdn.net/download/feixiegis/11505844，有相关领域的问题需要探讨和交流的请关注和私信，谢谢。

最后，祝愿大家在Cesium的技术之旅中载誉而归！！！