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等級
• 天地圖服務坐標系和圖層坐標系一致