高亮场景图层
本示例演示了如何高亮 SceneLayer 图层中的代表 Esri 办公室的要素。当 SceneLayerView 完成更新时，我们遍历所有要素，并把它们放在一个列表中。每个列表项都会被添加一个事件监听器，以实现高亮选中要素的并缩放到要素。
高亮要素需要调用要素相关的 layerView 的 highlight 方法，以要素或者要素的 objectID 作为参数。
程序完整源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Highlight SceneLayer - 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/WebScene",
"esri/views/SceneView",
"esri/tasks/support/Query",
"esri/widgets/Legend",
"dojo/domReady!"
], function(
WebScene, SceneView, Query,
Legend
) {
var webscene = new WebScene({
portalItem: {
id: "fbbc829fa7d342e7ae8d18c54a5eab37"
}
});
// 创建视图并设置高亮选项
var view = new SceneView({
container: "viewDiv",
map: webscene,
qualityProfile: "high",
environment: {
lighting: {
directShadowsEnabled: false,
ambientOcclusionEnabled: true
}
},
highlightOptions: {
color: [0, 255, 255],
fillOpacity: 0.6
}
});
var highlight = null; //用于存储高亮的要素
view.then(function() {
// 从场景获取图层
var officeSceneLayer = webscene.allLayers.filter(function(elem) {
return elem.title === "Esri Offices";
}).items[0];
// 获取DOM元素节点,这个节点将用于存放要素清单
var container = document.getElementById("roomsList");
// 当 layerView 加载完成之后
view.whenLayerView(officeSceneLayer).then(
function(officeLayerView) {
// layer 更新完成之后
officeLayerView.watch("updating", function(val) {
if (!val) {
// 查询所有可用要素，获取所有属性
var query = new Query({
outFields: ["*"]
});
officeLayerView.queryFeatures(query).then(
function(result) {
// 清空 DOM 元素
container.innerHTML = "";
// 对每个类型为 office 的创建列表并添加到 container
result.features.forEach(function(feature) {
var attributes = feature.attributes;
if (attributes.SPACETYPE === "Office") {
var li = document.createElement("li");
li.setAttribute("class","panel-result");
li.innerHTML = "Room " + attributes.ROOMNUMBER;
li.addEventListener("click",
function(evt) {
var target = evt.target;
var objectId = feature.attributes.OBJECTID;
// 创建一个查询要素三维范围的 query 对象
var queryExtent = new Query({
objectIds: [objectId]
});
officeLayerView.queryExtent(
queryExtent).then(
function(result) {
// 缩放到要素
// 使用 expand 函数阻止缩放得太近
view.goTo(result.extent
.expand(7), {
speedFactor: 0.5
});
});
// 移除先前高亮的
if (highlight) {
highlight.remove();
}
// 高亮
highlight = officeLayerView.highlight(
[objectId]);
});
container.appendChild(li);
}
});
});
}
});
});
});
// 添加图例
var legend = new Legend({
view: view
});
view.ui.empty("top-left");
view.ui.add(legend, "bottom-left");
});
</script>
<style>
html,
body,
#viewDiv {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
font-family: sans-serif;
}
.panel-side {
width: 200px;
position: absolute;
top: 14px;
right: 14px;
bottom: 28px;
color: #323232;
background-color: rgb(255, 255, 255);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
overflow: auto;
z-index: 60;
font-size: 12px;
text-align: center;
}
.panel-side h2 {
padding: 0 20px;
margin: 20px 0;
font-size: 14px;
font-weight: 600;
}
.panel-side ul {
list-style: none;
margin: 0;
padding: 0;
font-weight: 100;
}
.panel-side li {
list-style: none;
padding: 3px 10px;
}
.panel-result {
cursor: pointer;
margin: 2px 0;
}
.panel-result:hover,
.panel-result:focus,
.panel-result.selected {
background-color: rgba(200, 200, 200, 0.6);
}
</style>
</head>
<body>
<div class="panel-side">
<h2>Office rooms</h2>
<ul id="roomsList">
<li>Loading…</li>
</ul>
</div>
<div id="viewDiv"></div>
</body>
</html>
程序运行效果：
沙箱地址：https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=highlight-scenelayer
（完）