arcgis api for js实现点击文字内容获取所对应的点高亮显示。

Posted 2020-10-02 we_are_young

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));  
                });  
            });  });