Cesium加载天地图

标签： Cesium 分类： Gis 创建时间：2020-09-28 08:23:13 更新时间：2024-12-03 13:01:36

1.使用天地图自带的CesiumTdt插件

使用Censium加载天地图，直接上代码吧

<!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="./Build/Cesium/Cesium.js"></script>
  <script src="http://api.tianditu.gov.cn/cdn/plugins/cesium/cesiumTdt.js" ></script>
  <style>
      @import url(./Build/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 cgs2000Ellipsolid = new Cesium.Ellipsoid(6378137.0, 6378137.0, 6356752.31414035585);
    // var cgs2000GeographicProj = new Cesium.GeographicProjection(cgs2000Ellipsolid); // 这里为什么这么定义，我忘记在哪里找到的代码了，应该是定义坐标系的问题

    // // 国家天地图
    // var url="http://{s}.tianditu.gov.cn/vec_c/wmts?tilematrix={TileMatrix}&layer=img&style=default&tilerow={TileRow}&tilecol={TileCol}&tilematrixset=w&format=tiles&service=WMTS&version=1.0.0&request=GetTile&tk=9de7f344995fa0cdd4ac8fa71d3a1c3c";

    // var viewer = new Cesium.Viewer('cesiumContainer',{
    //   geocoder:false,
    //   homeButton:false,
    //   sceneModePicker:false,
    //   baseLayerPicker:false,
    //   navigationHelpButton:false,
    //   animation:false,
    //   // creditContainer:"credit",
    //   timeline:false,
    //   fullscreenButton:false,
    //   vrButton:false,

    //   //添加自定义图层

    //   imageryProvider : new Cesium.WebMapTileServiceImageryProvider({
    //     url : url,
    //     subdomains:["t0","t1","t2","t3","t4","t5","t6","t7"],
    //     maximumLevel:16,
    //     tilingScheme: new Cesium.GeographicTilingScheme(),
    //     tileMatrixLabels:["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17"]
    //   }),
    //    //mapProjection:cgs2000GeographicProj // 这里还没有使用上
    // });
    // //去掉版权信息
    // viewer._cesiumWidget._creditContainer.style.display="none";
    // //加载国家天地图影像注记图层
    // url="http://{s}.tianditu.gov.cn/cva_c/wmts?tilematrix={TileMatrix}&layer=cia&style=default&tilerow={TileRow}&tilecol={TileCol}&tilematrixset=c&format=tiles&service=WMTS&version=1.0.0&request=GetTile&tk=9de7f344995fa0cdd4ac8fa71d3a1c3c";
    // var imgAnnoProvider=new Cesium.WebMapTileServiceImageryProvider({
    //   url : url,
    //   subdomains:["t0","t1","t2","t3","t4","t5","t6","t7"],
    //   maximumLevel:16,
    //   tilingScheme: new Cesium.GeographicTilingScheme(),
    //   tileMatrixLabels:["1","2","3","4","5","6","7","8","9","10","11","12","13","14","15","16","17"]
    // });

    // var imgAnnolayer=new Cesium.ImageryLayer(imgAnnoProvider,{
    //   minimumTerrainLevel:1,
    //   maximumTerrainLevel:16
    // });
    // viewer.imageryLayers.add(imgAnnolayer);


    //添加地形数据
    //viewer.terrainProvider = Cesium.createWorldTerrain();
    // var terrainProvider = new Cesium.CesiumTerrainProvider({
    //     url : 'https://assets.agi.com/stk-terrain/v1/tilesets/world/tiles', // 默认立体地表
    //     // 请求照明
    //     requestVertexNormals: true,
    //     // 请求水波纹效果
    //     requestWaterMask: true
    // });
    // viewer.terrainProvider=terrainProvider;

    //定位到指定位置
    // viewer.camera.flyTo({
    //   destination: Cesium.Cartesian3.fromDegrees(120.349,30.34, 2000)
    // });

    var token = '';
    // 服务域名
    var tdtUrl = 'https://t{s}.tianditu.gov.cn/';
    // 服务负载子域
    var subdomains=['0','1','2','3','4','5','6','7'];

    // cesium 初始化
    var viewer = new Cesium.Map('cesiumContainer', {
        shouldAnimate: true,
        selectionIndicator:true,
        infoBox:false
    });

    // 叠加影像服务
    var imgMap = new Cesium.UrlTemplateImageryProvider({
        url: tdtUrl + 'DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + token,
        subdomains: subdomains,
        tilingScheme : new Cesium.WebMercatorTilingScheme(),
        maximumLevel : 18
    });
    viewer.imageryLayers.addImageryProvider(imgMap); 

    // 叠加国界服务
    var iboMap = new Cesium.UrlTemplateImageryProvider({
        url: tdtUrl + 'DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=' + token,
        subdomains: subdomains,
        tilingScheme : new Cesium.WebMercatorTilingScheme(),
        maximumLevel : 10
    });
    viewer.imageryLayers.addImageryProvider(iboMap);

    // 叠加地形服务
    var terrainUrls = new Array();

    for (var i = 0; i < subdomains.length; i++){
        var url = tdtUrl.replace('{s}', subdomains[i]) + 'mapservice/swdx?tk=' + token;
        terrainUrls.push(url);
    }

    var provider = new Cesium.GeoTerrainProvider({
        urls: terrainUrls
    });

    viewer.terrainProvider = provider;

    // 将三维球定位到中国
    viewer.camera.flyTo({
        destination: Cesium.Cartesian3.fromDegrees(103.84, 31.15, 17850000),
        orientation: {
            heading :  Cesium.Math.toRadians(348.4202942851978),
            pitch : Cesium.Math.toRadians(-89.74026687972041),
            roll : Cesium.Math.toRadians(0)
        },
        complete:function callback() {
            // 定位完成之后的回调函数

            // 加载3d模型
            var url="./resource/city/tileset.json"
            var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
                url: url,  //数据路径  
                maximumScreenSpaceError: 2,        //最大的屏幕空间误差
                maximumNumberOfLoadedTiles: 1000,  //最大加载瓦片个数
            }));
            tileset.readyPromise.then(function(tileset) {
              console.log("dsf")
                viewer.scene.primitives.add(tileset);
                viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.5, -0.2, tileset.boundingSphere.radius * 1.0));
                // changeHeight(20);
                //创建平移矩阵方法二
                // var translation=Cesium.Cartesian3.fromArray([0, 0, -2000]);
                // m= Cesium.Matrix4.fromTranslation(translation);
                //
                // //生效
                // tileset._modelMatrix = m;
            }).otherwise(function(error) {
                console.log(error);
            });
        }
    });

    // 叠加三维地名服务
    var wtfs = new Cesium.GeoWTFS({
        viewer,
        subdomains:subdomains,
        metadata:{
            boundBox: {
                minX: -180,
                minY: -90,
                maxX: 180,
                maxY: 90
            },
            minLevel: 1,
            maxLevel: 20
        },
        aotuCollide: true, //是否开启避让
        collisionPadding: [5, 10, 8, 5], //开启避让时，标注碰撞增加内边距，上、右、下、左
        serverFirstStyle: true, //服务端样式优先
        labelGraphics: {
            font:"28px sans-serif",
            fontSize: 28,
            fillColor:Cesium.Color.WHITE,
            scale: 0.5,
            outlineColor:Cesium.Color.BLACK,
            outlineWidth: 5,
            style:Cesium.LabelStyle.FILL_AND_OUTLINE,
            showBackground:false,
            backgroundColor:Cesium.Color.RED,
            backgroundPadding:new Cesium.Cartesian2(10, 10),
            horizontalOrigin:Cesium.HorizontalOrigin.MIDDLE,
            verticalOrigin:Cesium.VerticalOrigin.TOP,
            eyeOffset:Cesium.Cartesian3.ZERO,
            pixelOffset:new Cesium.Cartesian2(0, 8)
        },
        billboardGraphics: {
            horizontalOrigin:Cesium.HorizontalOrigin.CENTER,
            verticalOrigin:Cesium.VerticalOrigin.CENTER,
            eyeOffset:Cesium.Cartesian3.ZERO,
            pixelOffset:Cesium.Cartesian2.ZERO,
            alignedAxis:Cesium.Cartesian3.ZERO,
            color:Cesium.Color.WHITE,
            rotation:0,
            scale:1,
            width:18,
            height:18
        }
    });

    //三维地名服务，使用wtfs服务
    wtfs.getTileUrl = function(){
        return tdtUrl + 'mapservice/GetTiles?lxys={z},{x},{y}&tk='+ token; 
    }

    wtfs.initTDT([{"x":6,"y":1,"level":2,"boundBox":{"minX":90,"minY":0,"maxX":135,"maxY":45}},{"x":7,"y":1,"level":2,"boundBox":{"minX":135,"minY":0,"maxX":180,"maxY":45}},{"x":6,"y":0,"level":2,"boundBox":{"minX":90,"minY":45,"maxX":135,"maxY":90}},{"x":7,"y":0,"level":2,"boundBox":{"minX":135,"minY":45,"maxX":180,"maxY":90}},{"x":5,"y":1,"level":2,"boundBox":{"minX":45,"minY":0,"maxX":90,"maxY":45}},{"x":4,"y":1,"level":2,"boundBox":{"minX":0,"minY":0,"maxX":45,"maxY":45}},{"x":5,"y":0,"level":2,"boundBox":{"minX":45,"minY":45,"maxX":90,"maxY":90}},{"x":4,"y":0,"level":2,"boundBox":{"minX":0,"minY":45,"maxX":45,"maxY":90}},{"x":6,"y":2,"level":2,"boundBox":{"minX":90,"minY":-45,"maxX":135,"maxY":0}},{"x":6,"y":3,"level":2,"boundBox":{"minX":90,"minY":-90,"maxX":135,"maxY":-45}},{"x":7,"y":2,"level":2,"boundBox":{"minX":135,"minY":-45,"maxX":180,"maxY":0}},{"x":5,"y":2,"level":2,"boundBox":{"minX":45,"minY":-45,"maxX":90,"maxY":0}},{"x":4,"y":2,"level":2,"boundBox":{"minX":0,"minY":-45,"maxX":45,"maxY":0}},{"x":3,"y":1,"level":2,"boundBox":{"minX":-45,"minY":0,"maxX":0,"maxY":45}},{"x":3,"y":0,"level":2,"boundBox":{"minX":-45,"minY":45,"maxX":0,"maxY":90}},{"x":2,"y":0,"level":2,"boundBox":{"minX":-90,"minY":45,"maxX":-45,"maxY":90}},{"x":0,"y":1,"level":2,"boundBox":{"minX":-180,"minY":0,"maxX":-135,"maxY":45}},{"x":1,"y":0,"level":2,"boundBox":{"minX":-135,"minY":45,"maxX":-90,"maxY":90}},{"x":0,"y":0,"level":2,"boundBox":{"minX":-180,"minY":45,"maxX":-135,"maxY":90}}]);
  </script>
</body>
</html>

参考文章：
1.三维服务 (国家天地图专门针对Cesium开发了一个插件，也同时提供了示例代码)
2.天地图三维服务接入代码示例 (三维服务计入代码示例,这是国家天地图的官方插件)
3.Cesium使用天地图、高德地图、ArcGIS切片地图 (这里有加载高德天地图和ArcGIS切片地图的示例)
4.其他坐标转高德坐标
5.Cesium-Viewer基本配置与底图配置 (基础底图的改变)
6.修改cesium引擎默认坐标系 (修改Cesium默认的坐标系，将其改为cgcs2000坐标系)
7.cesium绘制图形 (这里也有写到了cgs2000GeographicProj，但是这个怎么来的没有说明)

2.使用WMTS服务

第二种方式就是直接使用WebMapTileServiceImageryProvider进行底图的加载,这里不需要加载天地图的CesiumTDT.js代码

var token = '';
// 服务域名
var tdtUrl = 'https://t{s}.tianditu.gov.cn/';
// 服务负载子域
var subdomains=['0','1','2','3','4','5','6','7'];

// cesium 初始化
var viewer = new Cesium.Map('cesiumContainer', {
    shouldAnimate: true,
    selectionIndicator:true,
    infoBox:false,
    homeButton:true,
});
//去掉版权信息
viewer._cesiumWidget._creditContainer.style.display="none";

// 创建相机初始位置和朝向
var initialPosition = new Cesium.Cartesian3.fromDegrees(120.355,30.335,300.0);
var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(0, -35, 0);
var homeCameraView = {
    destination : initialPosition,
    orientation : {
        heading : initialOrientation.heading,
        pitch : initialOrientation.pitch,
        roll : initialOrientation.roll
    }
};
// 设置视图
viewer.scene.camera.setView(homeCameraView);
// 增加相机飞行动画参数
homeCameraView.duration = 2.0;
homeCameraView.maximumHeight = 2000;
homeCameraView.pitchAdjustHeight = 2000;
homeCameraView.endTransform = Cesium.Matrix4.IDENTITY;
// Override the default home button
viewer.homeButton.viewModel.command.beforeExecute.addEventListener(function (e) {
    e.cancel = true;
    viewer.scene.camera.flyTo(homeCameraView);
});
// 加载天地图底图
var imageryProvider=new Cesium.WebMapTileServiceImageryProvider({
    url: "http://{s}.tianditu.com/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=e378319b5250eff0fdd562f3aa190e62",
    layer: "img",
    style: "default",
    format: "tiles",
    tileMatrixSetID: "w",
    credit: new Cesium.Credit('天地图全球影像服务'),
    subdomains: ['t0', "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
    maximumLevel: 18,
    show: true
})
viewer.imageryLayers.addImageryProvider(imageryProvider);

参考文章:
1.三维地图之cesium加载天地图（有代码） (加载了墨卡托投影)
2.cesium加载arcgis 发布的 CGCS2000坐标系的WMTS地图服务 (Cesium的加载mapserver服务，必须是4326或者墨卡托。而对于切片地图服务，没有这个限制)
3.Cesium加载4490坐标系ArcGIS服务 (这里也是用WMTS代替的自定义坐标系)

往期推荐

文章目录

1. 1.使用天地图自带的CesiumTdt插件
2. 2.使用WMTS服务

微信公众号

广告位

诚心邀请广大金主爸爸洽谈合作

每日一省

isNaN 和 Number.isNaN 函数的区别？

1.函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。

2.函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，不会进行数据类型的转换，这种方法对于 NaN 的判断更为准确。

每日二省

为什么0.1+0.2 ! == 0.3，如何让其相等?

一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2-52，在ES6中，提供了Number.EPSILON属性，而它的值就是2-52，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3。

每日三省

== 操作符的强制类型转换规则？

1.首先会判断两者类型是否**相同，**相同的话就比较两者的大小。

2.类型不相同的话，就会进行类型转换。

3.会先判断是否在对比 null 和 undefined，是的话就会返回 true。

4.判断两者类型是否为 string 和 number，是的话就会将字符串转换为 number。

5.判断其中一方是否为 boolean，是的话就会把 boolean 转为 number 再进行判断。

6.判断其中一方是否为 object 且另一方为 string、number 或者 symbol，是的话就会把 object 转为原始类型再进行判断。

每日英语

Happiness is time precipitation, smile is the lonely sad.

幸福是年华的沉淀，微笑是寂寞的悲伤。