arcgis api for js實現點擊文字內容獲取所對應的點高亮顯示。

arcgis api for js 中經常會遇到想要點擊文本就能獲取所對應的點並高亮顯示。其原理與搜索框內搜索屬性值並高亮顯示在地圖中的原理是一樣的。其核心的觀念就是將所點擊的文本值獲取並替換給搜索框所要傳入的值。即可得到我們的目的。

代碼如下：

var name;//聲明name為全局變量后面代替搜索框要傳入的值
$(function(){ 
 $('.test2 a').click(function(){
  $(this).parent().each(function () {//移除其余非點中狀態
         $('.test2 a').removeClass("special_color");
        });
        $(this).addClass("special_color");//給所點中的增加樣式
name=$(this).text();
 })
})//獲取所點擊的文本值並賦給name；
 require([  
            "esri/map",  
            "esri/layers/ArcGISTiledMapServiceLayer",  
            "esri/layers/FeatureLayer",  
            "esri/layers/GraphicsLayer",  
            "esri/graphic",  
            "esri/geometry/Point",  
            "esri/symbols/SimpleFillSymbol",  
            "esri/symbols/SimpleLineSymbol",  
            "esri/symbols/SimpleMarkerSymbol",  
            "dojo/_base/Color",  
            "esri/tasks/query",  
            "esri/tasks/QueryTask",  
            "dojo/on",  
            "dojo/dom",  
            "dojo/domReady!"],  
        function(Map,  
             Tiled,  
             FeatureLayer,  
             GraphicsLayer,  
             Graphic,  
             Point,  
             SimpleFillSymbol,  
             SimpleLineSymbol,  
             SimpleMarkerSymbol,  
             Color,  
             Query,  
             QueryTask,  
             on,  
             dom)  
        {   
           $('.test2 a').click(function(event){
                map.graphics.clear(); 
                var city = new FeatureLayer("http://192.168.58.138:6080/arcgis/rest/services/%E6%9C%80%E5%90%8E%E7%9A%84%E5%9B%BE%E5%B1%82/%E4%B8%9D%E7%BB%B8%E4%B9%8B%E8%B7%AF/FeatureServer/0");   
                // var name = dom.byId("name").value;  
                var query = new Query();  
                query.where = "name = '"+name+"'";  
                city.queryFeatures(query, function(results) {  
                    var features = results.features;  
                    console.log(features);  
                    map.centerAndZoom(features[0].geometry,4);  
                    var symbol= new esri.symbol.SimpleMarkerSymbol();
                    symbol.setSize(35);
                    symbol.setColor(new dojo.Color([250,128,114,0.3]));
                    map.graphics.add(new Graphic(features[0].geometry,symbol));  
                });  
            });  });