Leaflet 加载天地图服务和Arcgis server服务

本文主要将如何通过leaflet加载天地图服务，并通过leaflet加载Arcgis  Server服务。

由于项目需要，原本是想通过加载切片服务得方式加载天地图作为底图，天地图图层也是通过太乐底图助手或者第三方底图助手下载TIF图片，然后进行系列配准，发布服务，加载arcgis server图层。

这种方式得缺点有以下几点：

• 第三方地图下载助手下载得地图到一定等级会模糊，而且收费。
• 切图占用服务器空间，影响效率。
• 地图数据不会在进行更新。

因此采用国家天地图服务，用leaflet加载天地图WMTS服务。由于leaflet默认不可以加载wmts服务，使用Leaflet扩展插件leaflet-tilelayer-wmts.js加载wmts，默认是只支持EPSG3857.无法支持EPSG4326。因为项目中图层坐标系统一采用EPSG4326。

所以leaflet-tilelayer-wmts.js代码需要修改一下配置。修改了内部的getDefaultMatrix方法：

   getDefaultMatrix : function () {
        /**
         * the matrix3857 represents the projection 
         * for in the IGN WMTS for the google coordinates.
         */
        var matrixIds3857 = new Array(22);
        for (var i= 0; i<22; i++) {
            matrixIds3857[i]= {
                identifier    : "" + i,
                topLeftCorner : new L.LatLng(90,-180)  //修改代码
            };
        }
        return matrixIds3857;
    }

 其他不多说，上代码：

     　　var url='http://t0.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&tk=eb35dddb3aa33c7a8fb4218b39d1e424';
        var url1="http://t0.tianditu.gov.cn/cva_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&tk=eb35dddb3aa33c7a8fb4218b39d1e424'"
        var emap = new L.TileLayer.WMTS( url ,
                                {
                                    tileSize:256,
                                    layer: 'vec',
                                 　　 style: "default",
                                   tilematrixSet: "c",
                                    format: "tile",
                                    attribution: "<a href='https://github.com/mylen/leaflet.TileLayer.WMTS'>GitHub</a>&copy; <a href='http://www.ign.fr'>IGN</a>"
                                }
                                );
        var map = L.map('map',{crs:L.CRS.EPSG4326, measureControl: true, center: {lon:118.615 , lat:32},zoom: 18})
        map.addLayer(emap)
        var emap1 = new L.TileLayer.WMTS( url1 ,
            {
                tileSize:256,
              //  layer: 'cva',
                style: "default",
                tilematrixSet: "c",
                format: "tile",
                attribution: "<a href='https://github.com/mylen/leaflet.TileLayer.WMTS'>GitHub</a>&copy; <a href='http://www.ign.fr'>IGN</a>"
            }
        );
    map.addLayer(emap1)

加载arcgis server 服务代码：

L.esri.dynamicMapLayer(gxLayers[i].url, {
                id: gxLayers[i].name,
                layers: []
           }).addTo(map);

好了，大功告成。

 

一下需要注意得几点：

• 调用天地图服务现在需要key
• 天地图服务等级最大是19等级
• 天地图服务坐标系和图层坐标系一致