ArcGis for JS 利用QueryTask查詢實作對地圖的定位功能

  一、首先我們要把地圖map加載到我們的頁面中，然後就是根據已知的資訊内容實作在map上的定位操作。

  二、實作點選已知的資訊内容在地圖上定位，這就是一般的DOM操作。（我們是把DOM操作和arcgis的操作分離的，需要的時候直接調用函數方法就可以了。）

  三、我們現在隻帖出來arcgis的js代碼。

var map;
function initMap(){
    require([
        "esri/map",
        "esri/layers/ArcGISDynmicMapServiceLayer",
        "esri/layers/GraphicLayer",
        "esri/InfoTemplate",
        "esri/geometry/Point",
        "esri/geometry/Extent",
        "esri/symbol/SimpleMarkerSymbol",
        "esri/symbol/SimpleLineSymbol",
        "esri/symbol/SimpleFillSymbol",
        "esri/tasks/QueryTask",
        "esri/tasks/query"],
    function(){
        //定義一個map實體
        map = new esri.map("mapDiv",{logo:false,slider:false});
        //裝載地圖
        map.addLayer(new esri.layers.ArcGISDynmicMapServiceLayer(mapServiceURL));
        
    })
}
function clickBuildListRow(buildNo){
    var query = new esri.tasks.Query();
    //把需要查詢的底圖服務加載進來
    var queryTask = new esri.tasks.QueryTask(mapServiceURL);
    //需要傳回Geometry
    query.returnGeometry = true;
    //需要傳回的字段
    query.outFields = ["*"];
    //設定查詢條件，buildNo是之前DOM操作時從資訊内容裡取出來的
    query.where = "PFHOUSID ='"+buildNo+"'";
    //進行查詢
    queryTask.execute(query,function(res){
        var showExtent;
        for(var i=0;i<res.features.length;i++){
            var fea = res.features[i];
            var point = fea.geometry.getExtent().getCenter();
            //設定資訊模闆infoWindow
            map.infoWindow.setTitle("詳情資訊");
            map.infoWindow.setConten("<p>位址："+fea.attributes.BUILD_SITE+"</p>");
            //把資訊模闆顯示在中心點上
            map.infoWindow.show(point);
            //查詢結果樣式
            var symbol = new esri.symbol.SimpleFillSymbol(esri.SimpleFillSymbol.STYLE_SOLID,
                new esri.symbol.SimpleLineSymbol(esri.symbolSimpleLineSymbol.STYLE_SOLID,new dojo.Color([255,0,0,0.8]),1),
                new dojo.Color([125,125,125,0.35]));
            var graphic = new esri.Graphic();
            graphic.setGeometry(fea.geometry);
            //設定查詢到的graphic的顯示樣式
            graphic.setSymbol(symbol);
            //把查詢結果添加到map.graphics中進行顯示
            map.graphics.add(graphic);
            //擷取查詢到的所有geometry的Extent用來設定查詢後的地圖顯示
            if(i == 0){
                showExtent = fea.geometry.getExtent();
            }else{
                showExtent = showExtent.union(fea.geometry.getExtent());
            }
            //設定地圖的視圖範圍
            map.setExtent(showExtent.expand(3));
        }
    })
}