引言
調用動态地圖服務
需求
- 1根據需求隐藏服務中的某一個圖層
  - 11代碼解釋
- 2通過屬性查詢地圖服務中的資訊
  - 21代碼實作
  - 22代碼解釋
- 3通過空間查詢地圖服務中的資訊
  - 31代碼實作
  - 32代碼解釋
- 4補充

1.引言

在本篇部落格中主要記錄一下在ArcGIS API如何調用自己釋出的動态地圖服務,利用動态地圖服務我們可以完成哪一些需求等等。

注：（如何利用ArcGIS Server釋出動态地圖服務請看部落格ArcGIS Server釋出動态地圖服務），

2.調用動态地圖服務

在ArcGIS API 中給我們提供了一個類叫做

ArcGISDynamicMapServiceLayer

利用這個類，我們可以獲得釋出的地圖服務。調用動态地圖服務一般隻需要兩步：

通過地圖服務的URL建立一個 ArcGISDynamicMapServiceLayer 對象
将動态地圖服務的對象添加到地圖容器中

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
    <script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>
    <script>
        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/Test/MyServer/MapServer");
                    //将地圖服務對象添加到地圖容器中
                    map.addLayer(layer);
                })
    </script>
</head>
<body class="tundra">
<div id="mapDiv" style="width:900px; height:600px; border:1px solid #000;"></div>
</body>
</html>

ArcGIS API For Javascript之調用動态地圖服務+屬性、空間查詢1.引言2.調用動态地圖服務3.需求

點選運作，運作之後如圖所示：

ArcGIS API For Javascript之調用動态地圖服務+屬性、空間查詢1.引言2.調用動态地圖服務3.需求

注：

在ArcGIS API中與ArcMap不同的是：一個服務圖層相當于一組圖層的集合（即多個圖層）。

3.需求

在真實開發過程中，動态地圖服務可以幫助我們完成很多的功能需求，例如：

根據需求隐藏服務中的某一個圖層（動态地圖服務可以實作，但是切片地圖服務就不能實作）
通過屬性查詢地圖服務中的資訊
通過空間查詢地圖服務中的資訊（包括點查詢，線查詢，面查詢等等）

3.1.根據需求隐藏服務中的某一個圖層

我們釋出的地圖服務中有四個圖層

ArcGIS API For Javascript之調用動态地圖服務+屬性、空間查詢1.引言2.調用動态地圖服務3.需求

在本需求中。我們主要是給頁面添加一個按鈕，然後将地圖服務中的road2隐藏

代碼為：

require(["esri/map","dojo/dom","dojo/on","esri/layers/ArcGISDynamicMapServiceLayer",
                    "dojo/domReady!"],
                function(Map,dom,on,ArcGISDynamicMapServiceLayer){
                    var map = new Map("mapDiv");
                    var layer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/Test/MyServer/MapServer");
                    map.addLayer(layer);
                    //給id為btn的按鈕綁定click事件
                    on(dom.byId("btn"),"click",function()
                    {
                        layer.setVisibleLayers([,,]);
                    })
                })

ArcGIS API For Javascript之調用動态地圖服務+屬性、空間查詢1.引言2.調用動态地圖服務3.需求

3.1.1代碼解釋：

此代碼功能的實作非常簡單，隻利用了 setVisibleLayers 方法，告訴服務，我要顯示圖層編号為 1，2，3 的圖層。
在 require 中加載了一個新的子產品 dojo/dom 子產品，此子產品給我們提供了一個方法 dom.byId(id) ,我們可以通過id獲得dom對象，類似于 document.getElementById() 方法。
在 require 中加載了一個新的子產品 dojo/on 子產品，在dojo中 on 是用來綁定事件的, on(target,type,listener) 的第一個參數是給哪一個對象綁定事件，第二個參數是事件的類型，第三個是參數是回調函數。

3.2.通過屬性查詢地圖服務中的資訊

在開發過程中，經常有這樣的需求：

根據屬性查詢出我們想要的要素圖形，然後将該圖形高亮（在本事例中查詢教學樓的資訊，例如根據教學樓的名稱将該樓層成高亮）

教學樓圖層的屬性表資訊：

ArcGIS API For Javascript之調用動态地圖服務+屬性、空間查詢1.引言2.調用動态地圖服務3.需求

在實作這個功能的時候我們分幾步開始考慮：

在網頁上建立一個文本框
将文本框中的教學樓名稱擷取，并建立屬性查詢對象
将查詢到的樓層資訊（幾何資訊）擷取，利用 graphics 高亮顯示

3.2.1.代碼實作

建立一個文本框

Name:<input class="nm" type="text">
<input type="button" value="查詢">

ArcGIS API For Javascript之調用動态地圖服務+屬性、空間查詢1.引言2.調用動态地圖服務3.需求

将文本框中的教學樓名稱擷取，并建立屬性查詢對象

query("#btn").on("click",function(){
                        //獲得教學樓的名稱
                        var name=query(".nm")[].value;
                        //執行個體化查詢參數
                        var findParams = new esri.tasks.FindParameters();
                        findParams.returnGeometry = true;
                        findParams.layerIds = [];
                        findParams.searchFields = ["name"];
                        findParams.searchText = name;
                        //執行個體化查詢對象
                        var FindTask = new esri.tasks.FindTask("http://localhost:6080/arcgis/rest/services/Test/MyServer/MapServer");
                        //進行查詢
                        FindTask.execute(findParams,ShowFindResult)
                    })

ArcGIS API For Javascript之調用動态地圖服務+屬性、空間查詢1.引言2.調用動态地圖服務3.需求

将查詢到的樓層資訊（幾何資訊）擷取，利用 graphics 高亮顯示

function showFindResult(queryResult)
                    {
                        if (queryResult.length == ) {
                            alert("沒有該元素");
                            return;
                        }
                        for (var i = ; i < queryResult.length; i++) {
                                //獲得該圖形的形狀
                                var graphic = queryResult[i].feature;
                                var geometry = graphic.geometry;
                                //定義高亮圖形的符号
                                //1.定義面的邊界線符号
                                var outline= new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([, , ]), );
                                //2.定義面符号
                                var PolygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outline,new Color([, , , ]));
                                //建立用戶端圖形
                                var graphic = new Graphic(geometry, PolygonSymbol);
                                //将用戶端圖形添加到map中
                                map.graphics.add(graphic);
                        }
                    }

ArcGIS API For Javascript之調用動态地圖服務+屬性、空間查詢1.引言2.調用動态地圖服務3.需求

檢視結果

屬性查詢前：

ArcGIS API For Javascript之調用動态地圖服務+屬性、空間查詢1.引言2.調用動态地圖服務3.需求

屬性查詢後：

ArcGIS API For Javascript之調用動态地圖服務+屬性、空間查詢1.引言2.調用動态地圖服務3.需求

完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
    <script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>
    <script>


        require(["esri/map","dojo/query","dojo/on",
            "esri/layers/ArcGISDynamicMapServiceLayer",
            "esri/tasks/FindTask",
            "esri/tasks/FindParameters",
            "esri/symbols/SimpleLineSymbol",
            "esri/symbols/SimpleFillSymbol",
            "esri/Color",
            "esri/graphic",
            "dojo/domReady!"],
                function(Map,query,on,ArcGISDynamicMapServiceLayer,FindTask,FindParameters,SimpleLineSymbol,SimpleFillSymbol,Color,Graphic){
                    var map = new Map("mapDiv");
                    var layer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/Test/MyServer/MapServer");
                    map.addLayer(layer);
                    query("#btn").on("click",function(){
                        //獲得教學樓的名稱
                        var name=query(".nm")[].value;
                        //執行個體化查詢參數
                        var findParams = new FindParameters();
                        findParams.returnGeometry = true;
                        findParams.layerIds = [];
                        findParams.searchFields = ["name"];
                        findParams.searchText = name;
                        //執行個體化查詢對象
                        var findTask = new FindTask("http://localhost:6080/arcgis/rest/services/Test/MyServer/MapServer");
                        //進行查詢
                        findTask.execute(findParams,showFindResult)
                    });
                    function showFindResult(queryResult)
                    {
                        if (queryResult.length == ) {
                            alert("沒有該元素");
                            return;
                        }
                        for (var i = ; i < queryResult.length; i++) {
                                //獲得該圖形的形狀
                                var feature= queryResult[i].feature;
                                var geometry = feature.geometry;
                                //定義高亮圖形的符号
                                //1.定義面的邊界線符号
                                var outline= new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([, , ]), );
                                //2.定義面符号
                                var PolygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outline,new Color([, , , ]));
                                //建立用戶端圖形
                                var graphic = new Graphic(geometry, PolygonSymbol);
                                //将用戶端圖形添加到map中
                                map.graphics.add(graphic);
                        }
                    }



                })
    </script>
</head>
<body class="tundra">
<div id="mapDiv" style="width:900px; height:580px; border:1px solid #000;"></div>
    Name:<input class="nm" type="text">
    <input id="btn" type="button" value="查詢">
</body>
</html>

ArcGIS API For Javascript之調用動态地圖服務+屬性、空間查詢1.引言2.調用動态地圖服務3.需求

3.2.2代碼解釋

FindTask 是Esri提供的一個屬性查詢的類，他所對應的參數為： FindParameters ， FindTask 隻能用于屬性查詢，不能用于空間查詢
FindTask 類中有一個方法叫做 execute , execute 的第一個參數是屬性查詢的參數，第二個參數是一個回調函數（即是一個異步函數），當伺服器傳回資料時，此函數才會被觸發。
dojo/query 是 dojo 提供的一個DOM選擇器，他的功能非常強大，與 JQuery 中的 $ 符一樣強大，可以根據id選擇 query（"#id"） ,也可以根據類名選擇 query（".classname"） ， query 方法還有很多強大的地方，具體可以參考官方文檔
query("#btn").on() 是dojo提供給我們第二種綁定事件的方式。
graphic esri提供給我們使用的用戶端圖層，利用 graphic ，我們可以完成很多操作， graphic 具體的使用，将在 Draw 工具時說明。

3.3通過空間查詢地圖服務中的資訊

相信大家都遇到過這種問題，當我點選地圖時，将我點選的圖形進行高亮顯示，此時就用到了空間查詢。為了實作該功能我們可以分為以下幾步：

因為要點選地圖，是以首先我們給地圖綁定點選事件
獲得點選的地圖坐标(點坐标)，并建立空間查詢參數對象
将教學樓與點相交的樓層查詢出來，然後利用 graphic 進行高亮顯示

注：此事例查詢是教學樓圖層

3.3.1代碼實作

給地圖綁定點選事件

map.on("click",mapClick);

ArcGIS API For Javascript之調用動态地圖服務+屬性、空間查詢1.引言2.調用動态地圖服務3.需求

獲得點選的地圖坐标(點坐标)，并建立空間查詢參數對象

function mapClick(e){
                        //獲得使用者點選的地圖坐标
                        var point=e.mapPoint;
                        //執行個體化查詢參數
                        query=new Query();
                        query.geometry = point;
                        query.outFields = ["*"];
                        query.outSpatialReference = map.spatialReference;
                        query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
                        query.returnGeometry = true;
                        //執行個體化查詢對象
                        var queryTask = new QueryTask("http://localhost:6080/arcgis/rest/services/Test/MyServer/MapServer/3");
                        //進行查詢
                        queryTask.execute(query,showFindResult)

                    }

ArcGIS API For Javascript之調用動态地圖服務+屬性、空間查詢1.引言2.調用動态地圖服務3.需求

将教學樓與點相交的樓層查詢出來，然後利用 graphic 進行高亮顯示

function showFindResult(queryResult)
                    {
                        if (queryResult.features == ) {
                            alert("沒有該元素");
                            return;
                        }
                        for (var i = ; i < queryResult.features.length; i++) {
                            //獲得該圖形的形狀
                            var feature = queryResult.features[i];
                            var geometry = feature.geometry;
                            //定義高亮圖形的符号
                            //1.定義面的邊界線符号
                            var outline= new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([, , ]), );
                            //2.定義面符号
                            var PolygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outline,new Color([, , , ]));
                            //建立用戶端圖形
                            var graphic = new Graphic(geometry, PolygonSymbol);
                            //将用戶端圖形添加到map中
                            map.graphics.add(graphic);
                        }
                    }

ArcGIS API For Javascript之調用動态地圖服務+屬性、空間查詢1.引言2.調用動态地圖服務3.需求

檢視結果

滑鼠點選前：

ArcGIS API For Javascript之調用動态地圖服務+屬性、空間查詢1.引言2.調用動态地圖服務3.需求

滑鼠點選後：

ArcGIS API For Javascript之調用動态地圖服務+屬性、空間查詢1.引言2.調用動态地圖服務3.需求

完整代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/dijit/themes/tundra/tundra.css"/>
    <link rel="stylesheet" type="text/css" href="http://localhost/arcgis_js_api/library/3.17/3.17/esri/css/esri.css" />
    <script type="text/javascript" src="http://localhost/arcgis_js_api/library/3.17/3.17/init.js"></script>
    <script>
        require(["esri/map","dojo/query","dojo/on",
                    "esri/layers/ArcGISDynamicMapServiceLayer",
                    "esri/tasks/QueryTask",
                    "esri/tasks/query",
                    "esri/symbols/SimpleLineSymbol",
                    "esri/symbols/SimpleFillSymbol",
                    "esri/Color",
                    "esri/graphic",
                    "dojo/domReady!"],
                function(Map,query,on,ArcGISDynamicMapServiceLayer,QueryTask,Query,SimpleLineSymbol,SimpleFillSymbol,Color,Graphic){
                    var map = new Map("mapDiv");
                    var layer=new ArcGISDynamicMapServiceLayer("http://localhost:6080/arcgis/rest/services/Test/MyServer/MapServer");
                    map.addLayer(layer);
                    map.on("click",mapClick);
                    function mapClick(e){
                        //獲得使用者點選的地圖坐标
                        var point=e.mapPoint;
                        //執行個體化查詢參數
                        query=new Query();
                        query.geometry = point;
                        query.outFields = ["*"];
                        query.outSpatialReference = map.spatialReference;
                        query.spatialRelationship = Query.SPATIAL_REL_INTERSECTS;
                        query.returnGeometry = true;
                        //執行個體化查詢對象
                        var queryTask = new QueryTask("http://localhost:6080/arcgis/rest/services/Test/MyServer/MapServer/3");
                        //進行查詢
                        queryTask.execute(query,showFindResult)

                    }
                    function showFindResult(queryResult)
                    {
                        if (queryResult.features == ) {
                            alert("沒有該元素");
                            return;
                        }
                        for (var i = ; i < queryResult.features.length; i++) {
                            //獲得該圖形的形狀
                            var feature = queryResult.features[i];
                            var geometry = feature.geometry;
                            //定義高亮圖形的符号
                            //1.定義面的邊界線符号
                            var outline= new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT,new Color([, , ]), );
                            //2.定義面符号
                            var PolygonSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, outline,new Color([, , , ]));
                            //建立用戶端圖形
                            var graphic = new Graphic(geometry, PolygonSymbol);
                            //将用戶端圖形添加到map中
                            map.graphics.add(graphic);
                        }
                    }
                })
    </script>
</head>
<body class="tundra">
<div id="mapDiv" style="width:900px; height:580px; border:1px solid #000;"></div>
</body>
</html>

ArcGIS API For Javascript之調用動态地圖服務+屬性、空間查詢1.引言2.調用動态地圖服務3.需求

3.3.2代碼解釋

QueryTask 是esri提供給我們的一個工具類，可用于屬性查詢，也可用于空間查詢， QueryTask 隻能作用于地圖服務的某一個圖層，而不能作用于一整個地圖服務（ IdentifyTask 類可作用于一整個地圖服務）
Query 類是 QueryTask 參數類，用于設定空間查詢的參數。
QueryTask 類中有一個方法叫做 execute , execute 的第一個參數是查詢的參數，第二個參數是一個回調函數（即是一個異步函數），當伺服器傳回資料時，此函數才會被觸發

3.4補充

綁定事件之後，在某些情況下也解除事件的綁定，下面提供幾種方法解除事件綁定

直接通過事件句柄解除（dojo新版本）

//綁定事件
var handle=map.on("click",mapClick);
//解除事件
handle.remove();

ArcGIS API For Javascript之調用動态地圖服務+屬性、空間查詢1.引言2.調用動态地圖服務3.需求

通過老版本的方法解除

//綁定事件 

var handle=map.on("click",mapClick); 

//解除事件 

dojo.disconnect(handle)

ArcGIS API For Javascript之調用動态地圖服務+屬性、空間查詢1.引言2.調用動态地圖服務3.需求

(function () {('pre.prettyprint code').each(function () {

var lines = (this).text().split(′\n′).length;var numbering = $('

').addClass('pre-numbering').hide();

(this).addClass(′has−numbering′).parent().append( numbering);

for (i = 1; i <= lines; i++) {

numbering.append( ('

').text(i));

};

$numbering.fadeIn(1700);

});

});

ArcGIS API For Javascript之調用動态地圖服務+屬性、空間查詢1.引言2.調用動态地圖服務3.需求

1.引言

2.調用動态地圖服務

3.需求

3.1.根據需求隐藏服務中的某一個圖層

3.1.1代碼解釋：

3.2.通過屬性查詢地圖服務中的資訊

3.2.1.代碼實作

3.2.2代碼解釋

3.3通過空間查詢地圖服務中的資訊

3.3.1代碼實作

3.3.2代碼解釋

3.4補充

繼續閱讀

關于ArcGIS Server10.1 for Windows站點管理者無法登陸的問題

ARCGIS SERVER 10.1 的安裝和授權ARCGIS SERVER 10.1 的安裝和授權

ArcGIS Server的配置

arcgisRESTapi操作arcgisserver服務，比如啟動、停止服務等使用generateToken擷取零時token

ArcGIS Server常見問題

ArcGIS Enterprise 10.6安裝常見問題I —— 運作software authorization報錯問題描述解決方案補充

2(下)_ARCGIS ENTERPRISE的安裝與配置林業地理資訊資料管理之二（下）

Linux系統下搭建Arcgis GeoAnalystics Server環境所用到的各種軟體

Windows上安裝ArcGIS Enterprise（ArcGIS 10.5為例）

更換IP後Portal ,Server, DataStore無法正常通路

ArcGIS Server釋出地圖服務

ArcGIS Server釋出地圖服務在ArcCatalog中釋出MapSevice在ArcGIS Server建立.sd檔案使用ArcGIS for Desktop注冊檔案夾用arcgis server manager注冊檔案夾

ArcGIS Server的配置與地圖服務釋出。

ArcGIS Server 地圖服務無法預覽問題

ArcGIS Android應用用戶端加載JSON格式業務資料1 概述2 準備JSON檔案3 Android用戶端讀取

arcgis10.1建立企業級地理資料庫的時候報錯：提供的SDE主目錄無效