查询 FeatureLayerView 的要素
FeatureLayerView 允许访问显示在视图中的图层中的要素。
当视图加载完成时，需要设置 updating 监听。在执行查询之前，不许等待视图中的所有要素更新完成。
lyrView.watch("updating", function (val) {
//...
}
获取到视图中的图形之后，有很多种用途。在本示例中使用获取到的图形创建了列表，当单击列表节点的时候，将在和节点相关的图形的位置处弹窗。
程序完整源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Query features from a FeatureLayerView - 4.5</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script src="https://js.arcgis.com/4.5/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"dojo/domReady!"
],
function(
Map, MapView,
FeatureLayer
) {
var map = new Map({
basemap: "dark-gray"
});
var view = new MapView({
container: "sceneDiv",
map: map,
center: [-73.950, 40.702],
zoom: 11,
padding: {
right: 300
}
});
// 列表元素
var listNode = document.getElementById("nyc_graphics");
// 创建弹窗模板
var popupTemplate = {
title: "Marriage in NY, Zip Code: {ZIP}",
content: "<p><b> Marriage Rate: {MARRIEDRATE}% </b></p>" +
"<p> Married: {MARRIED_CY}</p>" +
"<p> Never Married: {NEVMARR_CY}</p>" +
"<p> Divorced: {DIVORCD_CY}</p>"
};
// 创建图层并引用弹窗模板
var featureLayer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NYCDemographics1/FeatureServer/0",
outFields: ["*"],
popupTemplate: popupTemplate
});
map.add(featureLayer);
var graphics;
view.whenLayerView(featureLayer).then(function(lyrView) {
lyrView.watch("updating", function(val) {
if (!val) { // 等待视图更新完成
// 查询可用的要素
lyrView.queryFeatures().then(function(results) {
graphics = results;
var fragment = document.createDocumentFragment();
results.forEach(function(result, index) {
var attributes = result.attributes;
var name = attributes.ZIP + " (" +
attributes.PO_NAME + ")"
// 创建列表
var li = document.createElement("li");
li.classList.add("panel-result");
li.tabIndex = 0;
li.setAttribute("data-result-id", index);
li.textContent = name;
fragment.appendChild(li);
});
// 更新列表节点内容
listNode.innerHTML = "";
listNode.appendChild(fragment);
});
}
});
});
// 监听列表单击事件
listNode.addEventListener("click", onListClickHandler);
function onListClickHandler(event) {
var target = event.target;
var resultId = target.getAttribute("data-result-id");
// 获取相关图形
var result = resultId && graphics && graphics[parseInt(resultId, 10)];
if (result) {
// 弹窗
view.popup.open({
features: [result],
location: result.geometry.centroid
});
}
}
});
</script>
<style>
html,
body,
#sceneDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: sans-serif;
}
.panel-container {
position: relative;
width: 100%;
height: 100%;
}
.panel-side {
padding: 2px;
box-sizing: border-box;
width: 300px;
height: 100%;
position: absolute;
top: 0;
right: 0;
color: #fff;
background-color: rgba(0, 0, 0, 0.6);
overflow: auto;
z-index: 60;
}
.panel-side h2 {
padding: 0 20px;
margin: 20px 0;
}
.panel-side ul {
list-style: none;
margin: 0;
padding: 0;
}
.panel-side li {
list-style: none;
padding: 10px 20px;
}
.panel-result {
cursor: pointer;
margin: 2px 0;
background-color: rgba(0, 0, 0, 0.3);
}
.panel-result:hover,
.panel-result:focus {
color: orange;
background-color: rgba(0, 0, 0, 0.75);
}
</style>
</head>
<body>
<div class="panel-container">
<div class="panel-side">
<h2>Marriage in NY by Zip</h2>
<ul id="nyc_graphics">
<li>Loading…</li>
</ul>
</div>
<div id="sceneDiv"></div>
</div>
</body>
</html>
程序运行效果：
沙箱地址：（完）