Need your help.
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<!--
For more information about the view-hittest sample,
read the original sample description at developers.arcgis.com.
-->
<title>Access features with pointer events - 4.14</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#clearHighlights {
background-color: black;
opacity: 0.75;
color: orange;
font-size: 12pt;
padding: 8px;
cursor: pointer;
}
</style>
<link
rel="stylesheet"
/>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer"
], function(Map, MapView, FeatureLayer) {
const hurricanesLayer = new FeatureLayer({
url:
outFields: ["*"]
});
const map = new Map({
basemap: "dark-gray",
layers: [hurricanesLayer]
});
const view = new MapView({
container: "viewDiv",
map: map,
center: [-61.125537, 35.863534],
zoom: 4,
highlightOptions: {
color: "orange"
}
});
view.ui.add("clearHighlights", "top-right");
view
.when()
.then(function() {
return hurricanesLayer.when();
})
.then(function(layer) {
const renderer = layer.renderer.clone();
renderer.symbol.width = 4;
renderer.symbol.color = [128, 128, 128, 0.8];
layer.renderer = renderer;
// Set up an event handler for pointer-down (mobile)
// and pointer-move events (mouse)
// and retrieve the screen x, y coordinates
return view.whenLayerView(layer);
})
.then(function(layerView) {
//view.on("pointer-move", eventHandler);
view.on("pointer-down", eventHandler);
const clearBtn = document.getElementById("clearHighlights")
clearBtn.addEventListener("click", clearHighlights);
let highlightedObjs = [];
let highlight;
function eventHandler(event) {
// the hitTest() checks to see if any graphics in the view
// intersect the x, y coordinates of the pointer
console.log("clicked");
view.hitTest(event).then(getGraphics);
}
let currentYear, currentName;
function getGraphics(response) {
console.log(response);
// the topmost graphic from the hurricanesLayer
// and display select attribute values from the
// graphic to the user
if (response.results.length) {
const graphic = response.results.filter(function(result) {
return result.graphic.layer === hurricanesLayer;
})[0].graphic;
const attributes = graphic.attributes;
const name = attributes.NAME;
const year = attributes.YEAR;
// highlight all features belonging to the same hurricane as the feature
// returned from the hitTest
const query = layerView.createQuery();
query.where = "YEAR = " + year + " AND NAME = '" + name + "'";
layerView.queryObjectIds(query).then(function(ids) {
// remove highlight if already defined
if (highlight) {
highlight.remove();
}
// create array from existing highlighted objs + items returned from query
var arr = highlightedObjs.concat(ids);
console.log(arr);
// highlight all objs in array
highlight = layerView.highlight(arr);
highlightedObjs = arr;
});
}
}
view.on("click", eventHandler);
function eventHandler(event) {
if (event.button === 2) {
view.hitTest(event).then(function (evt) {
getGraphics(evt, event);
});
}
if (highlight) {
highlight.remove();
highlight = null;
}
}
function clearHighlights(){
// clear array of highlighted objs and remove highlights
highlightedObjs = [];
highlight.remove();
}
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<div id="clearHighlights">
Clear Highlights
</div>
</body>
</html>
