<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Highlight point features - 4.10</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#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 src="https://js.arcgis.com/4.10/"></script>
<script type="text/javascript">
require([
"esri/Map",
"esri/WebScene",
"esri/views/SceneView"
],function(
Map,
WebScene,
SceneView
)
{
var webscene = new WebScene({
portalItem : {
id: "475a7161ed194460b5b52654e29581a2"
}
});
var view = new SceneView({
container:"viewDiv",
map:webscene,
// set highlightOptions like color and fillOpacity
highlightOptions: {
color: [255, 241, 58],
fillOpacity: 0.4
},
environment:{
atmosphereEnables:true,
atmosphere:{
quality:"high"
}
}
});
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Highlight point features - 4.10</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#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 src="https://js.arcgis.com/4.10/"></script>
<script type="text/javascript">
require([
"esri/Map",
"esri/WebScene",
"esri/views/SceneView"
],function(
Map,
WebScene,
SceneView
)
{
var webscene = new WebScene({
portalItem : {
id: "475a7161ed194460b5b52654e29581a2"
}
});
var view = new SceneView({
container:"viewDiv",
map:webscene,
// set highlightOptions like color and fillOpacity
highlightOptions: {
color: [255, 241, 58],
fillOpacity: 0.4
},
environment:{
atmosphereEnables:true,
atmosphere:{
quality:"high"
}
}
});
// these two highlight handlers are used for selection and hovering over features
var highlightSelect, highlightHover, hoverPromise;
webscene.when(function(){
//一定是在网络地图加载完成以后才能叠加其他图层和进行其他操作
//get the stationCenter layer
var stationLayer = webscene.layers.getItemAt(1);
//highlight is set on the layerView, so we need to detect when the layerView is ready
view.whenLayerView(stationLayer).then(function(layerView){
var queryStations = stationLayer.createQuery(); //创建索引对象
//get the stationCenter layer
var stationLayer = webscene.layers.getItemAt(1);
//highlight is set on the layerView, so we need to detect when the layerView is ready
view.whenLayerView(stationLayer).then(function(layerView){
var queryStations = stationLayer.createQuery(); //创建索引对象
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);
}
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 a feature is already highlighted, then remove the highlight
if (highlightSelect) {
highlightSelect.remove();
}
// the feature to be highlighted
var feature = result.features[0];
// use the objectID(unique) to highlight the feature
highlightSelect = layerView.highlight(feature.attributes[
"OBJECTID"]);
// center the feature
view.goTo({
target: feature.geometry,
tilt: 70
}, {
duration: 2000,
easing: "in-out-expo"
});
})
}
queryStations.where = "nom='" + event.target.innerText + "'";
stationLayer.queryFeatures(queryStations).then(function(result){
// if a feature is already highlighted, then remove the highlight
if (highlightSelect) {
highlightSelect.remove();
}
// the feature to be highlighted
var feature = result.features[0];
// use the objectID(unique) to highlight the feature
highlightSelect = layerView.highlight(feature.attributes[
"OBJECTID"]);
// center the feature
view.goTo({
target: feature.geometry,
tilt: 70
}, {
duration: 2000,
easing: "in-out-expo"
});
})
}
function onMouseOver(event){
queryStations.where = "nom='" + event.target.innerText + "'";
//show another writing way
hoverPromise = stationLayer.queryFeatures(queryStations);
hoverPromise.then(
function(result) {
if (highlightHover) {
highlightHover.remove();
}
var feature = result.features[0];
highlightHover = layerView.highlight(feature.attributes[
"OBJECTID"]);
});
}
function onMouseOut(event){
// cancel the promise that retrieves the hovered feature in case it's not resolved yet.
hoverPromise.cancel();
if (highlightHover) {
highlightHover.remove();
}
}
})
})
})
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="paneDiv">
<h3 style="color:white;">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>
queryStations.where = "nom='" + event.target.innerText + "'";
//show another writing way
hoverPromise = stationLayer.queryFeatures(queryStations);
hoverPromise.then(
function(result) {
if (highlightHover) {
highlightHover.remove();
}
var feature = result.features[0];
highlightHover = layerView.highlight(feature.attributes[
"OBJECTID"]);
});
}
function onMouseOut(event){
// cancel the promise that retrieves the hovered feature in case it's not resolved yet.
hoverPromise.cancel();
if (highlightHover) {
highlightHover.remove();
}
}
})
})
})
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="paneDiv">
<h3 style="color:white;">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>