欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Cesium系列（二）相关的基本配置和加载天地图

程序员文章站 2022-07-01 21:48:14
...

1.index.html代码分析

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <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="Build/Cesium/Cesium.js"></script>
  <style>
       //资源文件的引入
      @import url(Build/Cesium/Widgets/widgets.css);
        //定义的css样式，必须要有一定的高度和宽度
      html, body, #cesiumContainer {
          width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;
      }
  </style>
</head>
<body>
    //主要的容器
  <div id="cesiumContainer"></div>
  <script>
    //新建cesium的对象
    var viewer = new Cesium.Viewer('cesiumContainer');
  </script>
</body>
</html>

2.cesium viewer对象的参数属性及基本信息

var viewer = new Cesium.Viewer('cesiumContainer',{
      animation: false, //是否创建动画小器件，左下角仪表
      baseLayerPicker: false, //是否显示图层选择器
      fullscreenButton: false, //是否显示全屏按钮
      geocoder: false, //是否显示geocoder小器件，右上角查询按钮
      homeButton: false, //是否显示Home按钮
      infoBox: false, //是否显示信息框
      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
        }
      }
})

3.隐藏版权信息

//方式一 js
 viewer._cesiumWidget._creditContainer.style.display = "none";
//方式二 css
.cesium-widget-credits {
  display: none !important;
  visibility: hide !important;
}

4.添加天地图一类的自定义图层

天地图服务中有两种坐标系，分别是经纬度坐标和墨卡托投影坐标，其中经纬度坐标是球面坐标，墨卡托投影坐标是平面坐标，我们利用天地图中t0到t8不同域名的轮询机制和cesium的subdomains属性，把url按照format的方式来指定参数 ，配置一下天地图的URL就可以实现在cesium中加载天地图了。

1.轮询机制下的天地图url

//天地图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"

如果没有自己申请的钥匙，会报跨域的错误。

2.在图像中加载天地图自定义的图层

①首先在对象中加载基本的地形

var viewer = new Cesium.Viewer('cesiumContainer',{
       //其他的基本配置
     //天地图影像服务（经纬度）
     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","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
}))

③之后就可以形成两个图层的叠加

相关标签： Cesium 天地图 基本配置

上一篇： 天地图 截屏功能

下一篇： 秋后的蚂蚱歇后语

推荐阅读