1. 程式人生 > >arcgis api for javascript 3.21和4.4載入天地圖

arcgis api for javascript 3.21和4.4載入天地圖

arcgis js api目前有兩條路線,4.4支援2D和3D地圖,3.21主要做2D全景圖,兩種的地圖載入方式和介面的用法還是有些不同的,以前用3.21載入天地圖的時候直接用天地圖的REST url就可以載入地圖,在用新的4.4載入天地圖的時候參照官網的載入例子缺怎麼都無法將天地圖載入進來,傳送了請求會返回正確的json資料,但是不會去請求瓦片圖。經研究後發現還是空間參考的問題,arcgis預設用的4326參考,而天地圖用的是4490參考。如果不定義號空間參考是不會去載入地圖瓦片的。

用重慶.天地圖的rest api作為例子:http://www.digitalcq.com/RemoteRest/services/CQMap_VEC/MapServer,直接進可以檢視天地圖的各種引數.

在3.21中直接通過url載入地圖:

createMap() {
            esriLoader.dojoRequire([
                "esri/map",
                "esri/basemaps",
            ], (Map, esriBasemaps) => {
                esriBasemaps.tianditu = {
                    baseMapLayers: [{ url: "http://www.digitalcq.com/RemoteRest/services/CQMap_VEC/MapServer" }],
                    title: "TianDitu"
                };

                var map = new Map("map", {
                    basemap: "tianditu",  
                    center: [106.588252, 29.567552], 
                    zoom: 8,
                });
            });
        }

在4.4中需要定義空間參考:


createMap() {
            esriLoader.dojoRequire(["esri/Map",
                "esri/views/MapView",
                "esri/Basemap",
                "esri/layers/TileLayer",
                "esri/geometry/SpatialReference",
                "esri/geometry/Extent"
            ], (Map, MapView, Basemap,TileLayer,SpatialReference,Extent) => {
                var sr = new SpatialReference({wkid:4490});
                var fullextent = new Extent({
                    xmax:1000.0,xmin:0.0,ymax:1000,ymin:0.0,spatialReference:sr
                });
                var initialextent = new Extent({
                    xmax:108.13817851680021,xmin:105.3831598117314,ymax:30.46728535770415,ymin:28.897172489811304,spatialReference:sr
                })

                var tileBaseLayer = new TileLayer({
                    url: "http://www.digitalcq.com/RemoteRest/services/CQMap_VEC/MapServer",
                    spatialReference:sr,
                    fullExtent:fullextent
                })

                var cq_map = new Basemap({
                    baseLayers: [tileBaseLayer],
                    title: "arcgis",
                    id: "arcgis",
                });

                var map = new Map({
                    basemap: cq_map
                });

                var view = new MapView({
                    container: "viewDiv",
                    map: map,
                    extent:initialextent,
                    spatialReference:sr,
                });
}

Done: