從要素圖層上查詢要素
需要實現的功能有：
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…</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
})
})
}
});
從要素圖層上查詢要素