从要素图层上查询要素

需要实现的功能有：

1、图上点击要素会出现自定义的信息窗口

2、将视图内的要素显示到右侧的标签中

3、点击右侧的标签，定位到指定要素视图

========================================================

1、图上点击要素会出现自定义的信息窗口——注意书写顺序，不规范结果是出不来的

var map = new map({

　　basemap:"dark-gray"

});

var view = new mapview({

　　container:"viewdiv",

　　map:map,

　　center:[-73.950, 40.702],

　　zoom:13

});

var popuptemplate = {

　　title:"marriage in ny, zip code: {zip}",

　　content:[{

　　　　type:"fields",

　　　　fieldinfos:[{

　　　　　　fieldname:"marriedrate",

　　　　　　label:"% married",

　　　　　　format:{places:0,digitseparator:true}

　　　　},...]

　　}]

}

var featurelayer = new featurelayer({

url:"https://services.arcgis.com/v6zhfr6zdgnzuvg0/arcgis/rest/services/nycdemographics1/featureserver/0",

　　outfields:["*"],

　　popuptemplate:popuptemplate

});

map.add(featurelayer);

2、将视图内的要素显示到右侧的标签中

——定义标签：

<div id="panel-side">

　　<ul id="nyc">

　　　　<li>loading&hellip;</li>

　　</ul>

</div>

——查询

var nyccontent = document.getelementbyid("nyc");

view.whenlayerview(featurelayer).then(function(layerview){　　

　　layerview.watch("updating",function(value){

　　　　if(!value){

　　　　　　layerview.queryfeatures({

　　　　　　　　geometry:view.extent,

　　　　　　　　returngeometry:true

　　　　　　}).then(function(results){

　　　　　　　　var graphics = results.features;

　　　　　　　　var frag = document.createdocumentfragment();　　//先存放到一个整体里

　　　　　　　　graphics.foreach(function(result,index){

　　　　　　　　　　var name = result.attributes.zip+"("+result.attributes.po_name+")";

　　　　　　　　　　var li = document.createelement("li");

　　　　　　　　　　li.textcontent = name;　　//显示的内容

　　　　　　　　　　li.classlist.add("panel-result");　　//用于修改样式

　　　　　　　　　　li.setattribute("data-result-id",index);

　　　　　　　　　　li.appendchild(frag);

　　　　　　　　});

　　　　　　　　nyccontent.innerhtml = "";　　//先将初始的内容全部删除

　　　　　　　　nyccontent.appendchild(frag);　　//再加入新的元素

　　　　　　})

　　　　}

　　})

})；

3、点击右侧的标签，定位到指定要素视图

nyccontent.addeventlistener("click",function(event){

　　var resultid = event.target.getattribute("data-result-id");

　　var result = resultid && graphics && graphics[parseint(resultid,10)];

　　if(result){

　　　　view.goto(result.geometry.extent.expand(2)).then(function(){

　　　　　　view.popup.open({

　　　　　　　　features:[result],

　　　　　　　　location:result.geometry.centroid

　　　　　　})

　　　　})

　　}

});