基于cesuim框架开发接入在线天地图服务（特别全的）

1、首先理解在线天地图服务的两种坐标系；
（1）经纬度坐标；
（2）墨卡托投影坐标；

2、其实经纬度坐标与墨卡托投影坐标的差别，你只需记住经纬度坐标是球面坐标，墨卡托投影坐标是平面坐标；

3、还需要注意：Cesium大多是默认Provider是按照墨卡托投影的，所以你要用经纬度的天地图服务需要进行一定的配置；

4、cesuim中添加经纬度坐标下的天地图服务：
（1）需要在创建Provider时需要同时构建tilingScheme，指定其为经纬度坐标系；
（2）需要配置tileMatrixLabels，因为level是从1开始（而不是0），所以需要指定每一层级的索引号（由于天地图最大层级为18级，所以在配置tileMatrixLabels的时候，配满18级即可）。

5、创建天地图不麻烦，但如何更好的创建呢？
（1）轮询机制，我们知道天地图提供了’t0’,‘t1’,‘t2’,‘t3’,‘t4’,‘t5’,‘t6’,'t7’8个域名，服务端TCP最大链接数是有限制的，轮询机制下瓦片下载的速度更有保证；
（2）利用Cesium提供了subdomains的属性，把url按照format的方式来指定参数，配置一下天地图的URL就可以实现了；

6、轮询机制配置的天地图URL，参照以下代码，亲测有效：

var URL_CONFIG={
    TDT_IMG_W:"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"   //在线天地图影像服务地址(墨卡托投影)
    ,TDT_VEC_W:"http://{s}.tianditu.com/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"   //在线天地图矢量地图服务(墨卡托投影)
    ,TDT_CIA_W:"http://{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
    "&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
    "&style=default.jpg"            //在线天地图影像中文标记服务(墨卡托投影)
    ,TDT_CVA_W:"http://{s}.tianditu.com/cva_w/wmts?service=wmts&request=GetTile&version=1.0.0" +
    "&LAYER=cva&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}" +
    "&style=default.jpg"            //在线天地图矢量中文标记服务(墨卡托投影)
    ,TDT_IMG_C:"http://{s}.tianditu.com/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"  //在线天地图影像服务地址(经纬度)
    ,TDT_VEC_C:"http://{s}.tianditu.com/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"   //在线天地图矢量地图服务(经纬度)
    ,TDT_CIA_C:"http://{s}.tianditu.com/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"      //在线天地图影像中文标记服务(经纬度)
    ,TDT_CVA_C:"http://{s}.tianditu.com/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"       //在线天地图矢量中文标记服务(经纬度)
};

7、cesuim天地图服务接入代码：

var viewerObj = new Cesium.Viewer('cesiumContainer',  {
                selectionIndicator: false,
                animation: false,  //是否显示动画控件
                baseLayerPicker: false, //是否显示图层选择控件
                geocoder: false, //是否显示地名查找控件
                timeline: false, //是否显示时间线控件
                sceneModePicker: true, //是否显示投影方式控件
                navigationHelpButton: false, //是否显示帮助信息控件
                infoBox: false,  //是否显示点击要素之后显示的信息
                fullscreenButton:true,
                //天地图影像服务（经纬度）
                imageryProvider:new Cesium.WebMapTileServiceImageryProvider({
                    url: URL_CONFIG.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:18,
                    show: false
                })
            });
            //设置初始位置
            viewerObj.camera.setView( {
                destination: Cesium.Cartesian3.fromDegrees(118.63854163, 32.04047801, 1000)
            } );
            //调用设置天地图函数
            //setOnlineMap.setTdt();
        });

8、cesuim叠加多图层代码：

//天地图影像中文标记服务（经纬度）
    var tdtCva=new Cesium.WebMapTileServiceImageryProvider({
        url: URL_CONFIG.TDT_CIA_C,
        layer: "tdtCva",
        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:18,
        show: false
    });
    var layers = viewerObj.imageryLayers;
    layers.addImageryProvider(tdtCva);

好的整理完成。

基于cesuim框架开发接入在线天地图服务（特别全的）

猜你喜欢