高亮点要素
这个示例演示了如何高亮图层中的要素。在 SceneLayer 、FeatureLayer、CSVLayer、GeoRSSLayer 和 GraphicsLayer 中的图形要素能被高亮。
要高亮要素，需调用 highlight 方法，并以要素或者要素的 objectID 为参数。当要素作为参数的时候，要素必须有 objectID。
程序完整源代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Highlight point features - 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>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
color: white;
font-family: "Avenir Next W01", "Arial", sans-serif;
}
#paneDiv {
position: absolute;
bottom: 0;
width: 100%;
padding: 20px 0;
z-index: 1;
text-align: center;
}
button {
background: white;
padding: 7px;
border: 1px solid #005e95;
font-size: 0.9em;
margin: 5px;
color: #005e95;
}
button:hover {
background: #005e95;
color: white;
cursor: pointer;
}
</style>
<script>
require([
"esri/Map",
"esri/WebScene",
"esri/views/SceneView",
"dojo/domReady!"
], function(
Map, WebScene, SceneView
) {
// 从 portal item 加载场景
var webScene = new WebScene({
portalItem: {
id: "475a7161ed194460b5b52654e29581a2"
}
});
var view = new SceneView({
map: webScene,
container: "viewDiv",
// 设置高亮样式，如颜色、透明度
highlightOptions: {
color: [255, 241, 58],
fillOpacity: 0.4
},
environment: {
atmosphereEnabled: true,
atmosphere: {
quality: "high"
}
}
});
var highlightSelect, highlightHover;
var hoverPromise;
webScene.load().then(function() {
// 从场景获取图层
var stationLayer = webScene.layers.getItemAt(1);
view.whenLayerView(stationLayer).then(function(lyrView) {
// 需要用于获取高亮元素的查询
var queryStations = stationLayer.createQuery();
// 传递给 highlight 作为参数的要素必须有 `objectID`
// 如果使用 `new Query()` 构建查询，则 `queryStations.outFields = ["objectID"]` 必须被设置
var buttons = document.querySelectorAll("button");
for (var i = 0, button = null; button = buttons[i]; i++) {
button.addEventListener("click", onClick);
button.addEventListener("mouseover", onMouseOver);
button.addEventListener("mouseout", onMouseOut);
}
function onClick(event) {
queryStations.where = "nom='" + event.target.innerText + "'";
stationLayer.queryFeatures(queryStations).then(
function(result) {
// 移除先前高亮元素
if (highlightSelect) {
highlightSelect.remove();
}
var feature = result.features[0];//将被高亮的要素
// 使用 objectID 作为参数
highlightSelect = lyrView.highlight(feature.attributes["OBJECTID"]);
// 使要素居中
view.goTo({
target: feature.geometry,
tilt: 70
}, {
duration: 2000,
easing: "in-out-expo"
});
});
}
function onMouseOver(event) {
queryStations.where = "nom='" + event.target.innerText +
"'";
hoverPromise = stationLayer.queryFeatures(queryStations);
hoverPromise.then(
function(result) {
if (highlightHover) {
highlightHover.remove();
}
var feature = result.features[0];
highlightHover = lyrView.highlight(feature.attributes["OBJECTID"]);
});
}
function onMouseOut(event) {
hoverPromise.cancel();
if (highlightHover) {
highlightHover.remove();
}
}
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="paneDiv">
<h3>Subway stations</h3>
<button>Valmy</button>
<button>St-Jean Vieux Lyon</button>
<button>Charpennes</button>
<button>Sans souci</button>
<button>Hôtel de Ville</button>
<button>Garibaldi</button>
</div>
</body>
</html>
程序运行效果：
沙箱：https://developers.arcgis.com/javascript/latest/sample-code/highlight-point-features/index.html
（完）