开源三维GIS之Cesium基本设置与加载天地图(五)

嵌入三维地球Cesium到我们的应用中，往往需要对最原始的Cesium初始化参数进行调整。下面是Cesium不经过任何参数设置的三维球界面。

现在需要对右上角的按钮取舍进行选择，以及左下角的时间控件（动画控件、时间轴）、和Cesium的logo去掉。最后做出的效果如下图所示。

开源三维GIS之Cesium基本设置与加载天地图(五)

这里还在三维球上加载天地图、以及其他地图。

开源三维GIS之Cesium基本设置与加载天地图(五)

具体实现代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Use correct character set. -->
  <meta charset="utf-8">
  <!-- Tell IE to use the latest, best version. -->
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <title>Hello World!</title>
  <script src="CesiumAPI/Cesium/Cesium.js"></script>
  <script src="js/TDTWMTSImageProvider.js"></script>
  <style>
      @import url(CesiumAPI/Cesium/Widgets/widgets.css);
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>
</head>
<body>
  <div id="cesiumContainer"></div>
  <script>

    var tian1 = new TDTWMTSImageProvider('http://t{l}.tianditu.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles', false, 1, 18);
    var tian2 = new TDTWMTSImageProvider('http://t{l}.tianditu.cn/img_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=c&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&FORMAT=tiles', false, 1, 18);

    var img_arcgis_yxdt = new Cesium.ProviderViewModel({
        name: "ArcGIS影像底图",
        tooltip: "ArcGIS影像底图",
        iconUrl: "./imgs/localtion.png",
        creationFunction: function () {
            var esri = new Cesium.ArcGisMapServerImageryProvider({
                url: 'http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
            });
            return esri;
        }
    });
    var img_arcgis_jcdt = new Cesium.ProviderViewModel({
        name: "ArcGIS基础底图",
        tooltip: "ArcGIS基础底图",
        iconUrl: "./imgs/localtion.png",
        creationFunction: function () {
            var esri = new Cesium.ArcGisMapServerImageryProvider({
                url: 'http://services.arcgisonline.com/arcgis/rest/services/World_Physical_Map/MapServer'
            });
            return esri;
        }
    });
    var img_tdt_sl = new Cesium.ProviderViewModel(
         {
             name: "天地图矢量",
             tooltip: "天地图矢量",
             iconUrl: "./imgs/localtion.png",
             creationFunction: function () { return tian1; }
         });
    var img_tdt_yx = new Cesium.ProviderViewModel(
         {
             name: "天地图影像",
             tooltip: "天地图影像",
             iconUrl: "./imgs/localtion.png",
             creationFunction: function () { return tian2; }
         });


    var viewer = new Cesium.Viewer('cesiumContainer',{
        animation:false,//是否创建动画小器件，左下角仪表 
        timeline: false,//是否显示时间轴    
        sceneModePicker: false,//是否显示3D/2D选择器    
        baseLayerPicker: true,//是否显示图层选择器   
        geocoder: false,//是否显示geocoder小器件，右上角查询按钮
        imageryProviderViewModels: [img_arcgis_yxdt, img_arcgis_jcdt, img_tdt_sl, img_tdt_yx],//可供BaseLayerPicker选择的图像图层ProviderViewModel数组   
        selectedImageryProviderViewModel: img_arcgis_jcdt,//当前地形图层的显示模型，仅baseLayerPicker设为true有意义    
        scene3DOnly: true,//如果设置为true，则所有几何图形以3D模式绘制以节约GPU资源 
        navigationHelpButton: false,//是否显示右上角的帮助按钮
        homeButton: false,//是否显示Home按钮
        infoBox: true,//是否显示信息框    
        showRenderLoopErrors: false//如果设为true，将在一个HTML面板中显示错误信息    
    });

        //去除版权信息
    viewer._cesiumWidget._creditContainer.style.display = "none";

  </script>
</body>
</html>

秒客网

开源三维GIS之Cesium基本设置与加载天地图(五)

相关文章