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

最新推荐文章于 2024-05-15 12:55:44 发布

想成为大神的前端王菜鸟

最新推荐文章于 2024-05-15 12:55:44 发布

阅读量6k

点赞数 2

分类专栏： Cesium 文章标签： Cesium 天地图基本配置

本文链接：https://blog.csdn.net/wwqqqq123/article/details/90400366

版权

Cesium 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

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
}))

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

想成为大神的前端王菜鸟

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
4
评论
Cesium系列（二）相关的基本配置和加载天地图

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" con...
复制链接

扫一扫