-
Notifications
You must be signed in to change notification settings - Fork 0
/
hoverHightLight.html
121 lines (107 loc) · 3.3 KB
/
hoverHightLight.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<html lang="en">
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1, maximum-scale=1,user-scalable=no"
/>
<title>Feature Widget | Sample | ArcGIS Maps SDK for JavaScript 4.26</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.26/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.26/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
.esri-feature {
letter-spacing: 0em;
line-height: 1.55rem;
font-feature-settings: 'liga' 1, 'calt' 0;
background: #fff;
padding: 1em;
}
</style>
<script>
require([
'esri/core/promiseUtils',
'esri/Map',
'esri/layers/FeatureLayer',
'esri/views/MapView',
'esri/widgets/Feature',
], (promiseUtils, Map, FeatureLayer, MapView, Feature) => {
const fLayer = new FeatureLayer({
portalItem: {
id: '673e64cb978d4e79ab47f541a7c52d65',
},
outFields: ['*'],
});
const map = new Map({
basemap: 'gray-vector',
layers: [fLayer],
});
const view = new MapView({
container: 'viewDiv',
map: map,
center: [-80, 40],
scale: 5000000,
});
// Create a default graphic for when the application starts
const graphic = {
popupTemplate: {
content: 'Mouse over features to show details...',
},
};
// Provide graphic to a new instance of a Feature widget
const feature = new Feature({
graphic: graphic,
map: view.map,
spatialReference: view.spatialReference,
});
view.ui.add(feature, 'bottom-left');
view.whenLayerView(fLayer).then((layerView) => {
let highlight;
let objectId;
const debouncedUpdate = promiseUtils.debounce(async (event) => {
// Perform a hitTest on the View
const hitTest = await view.hitTest(event);
// Make sure graphic has a popupTemplate
const results = hitTest.results.filter((result) => {
return result.graphic.layer.popupTemplate;
});
console.log('hittest--->', hitTest, results, fLayer.objectIdField);
const result = results[0];
const newObjectId =
result?.graphic.attributes[fLayer.objectIdField];
if (!newObjectId) {
highlight?.remove();
objectId = feature.graphic = null;
} else if (objectId !== newObjectId) {
highlight?.remove();
objectId = newObjectId;
feature.graphic = result.graphic;
highlight = layerView.highlight(result.graphic);
}
});
// Listen for the pointer-move event on the View
view.on('pointer-move', (event) => {
debouncedUpdate(event).catch((err) => {
if (!promiseUtils.isAbortError(err)) {
throw err;
}
});
});
});
});
</script>
</head>
<body>
<div id="viewDiv" class="esri-widget"></div>
</body>
</html>