1. 程式人生 > >arcgis-api-for-js-之新增圖層到地圖及地圖服務設定可見圖層

arcgis-api-for-js-之新增圖層到地圖及地圖服務設定可見圖層

1. 前言

ArcGISDynamicMapServiceLayer 類代表動態圖層,因此就有很大的屬性與方法來操作檢視服務。

2. 新增圖層到地圖

我們使用 addLayer() 方法將圖層載入到地圖中,程式碼如下:

        require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer",
                "dojo/domReady!"],
            function(Map,ArcGISDynamicMapServiceLayer){
                var map = new Map("mapDiv"
); //利用url建立一個動態地圖服務物件 var layer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/nongda/農大/MapServer",{ }); //將地圖服務物件新增到地圖容器中 map.addLayer(layer);
  • 程式碼解析
    addLayer() 方法需要傳入一個引數,引數為一個圖層,可以是快取地圖也可以是動態引數生成地圖的圖層。該引數為一個url ,指向我們所載入的圖層。

除了新增到圖層外,還可以使用 Map.removeLayer() 或者 Map.removeAllLayers() 來從地圖地圖中標移除某個或者所有圖層。

3. 地圖服務設定可見圖層

可以使用 setVisibleLayers() 方法控制動態地圖服務中單個圖層的可見性。該方法僅適用於動態地圖圖層,對切片地圖服務則不適用。該方法接受一個數組,對應地圖服務中資料圖層索引編號。
比如下面的一個動態地圖服務的資訊:

這裡寫圖片描述

上面是我釋出的一個動態地圖服務的資訊,上面 setVisibleLayers() 方法接受的陣列,陣列是從0開始的,因此地圖服務中的第一個圖層佔據位置0,就如上面的圖層,大門就是索引為0。要想顯示大門,和宿舍樓7的資訊,只需要如下程式碼:

        require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer",
                "dojo/domReady!"],
            function(Map,ArcGISDynamicMapServiceLayer){
                var map = new Map("mapDiv");
                //利用url建立一個動態地圖服務物件
                var layer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/nongda/農大/MapServer",{
                });
                layer.setVisibleLayers([0,7]);
                //將地圖服務物件新增到地圖容器中
                map.addLayer(layer);
            });
  • 顯示效果如下:

  • 所有圖層顯示效果:

這裡寫圖片描述

  • 設定顯示0,7圖層顯示效果:

這裡寫圖片描述

ArcGISDynamicMapServiceLayer 類的通過 setLayerDefinitions 方法來設定圖層的定義,該定義可用於過濾指定圖層的要素,例如:

        require(["esri/map","esri/layers/ArcGISDynamicMapServiceLayer",
                "dojo/domReady!"],
            function(Map,ArcGISDynamicMapServiceLayer){
                var map = new Map("mapDiv");
                //利用url建立一個動態地圖服務物件
                var layer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/nongda/農大/MapServer",{
                });
                var layerDefinitions=[];
                layerDefinitions[0]="POPULATION>5000000";
                layerDefinitions[5]="AREA>100000";
                layer.setLayerDefinitions(layerDefinitions);
                //將地圖服務物件新增到地圖容器中
                map.addLayer(layer);
  • 程式碼解析
    上面的程式碼中,對於第一個圖層,只顯示人口大於500萬的要素,對於第6個圖層,只顯示面積大於10萬的要素。