arcgis for js 4.x 悬浮显示popup
ummary
In ArcGIS API for JavaScript 4.x, pop-ups can display content from feature attributes using a mouse hover instead of a mouse click.
Procedure
The following instructions describe how to display pop-ups with a mouse hover instead of a mouse click using ArcGIS API for JavaScript.
- Open a text editor, for example, Notepad++.
- Start the <html> and the <head> tag for the script.
<html> <head>
- Within the <head> tag, start the reference to ArcGIS API for JavaScript.
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>
Display Popups on Mouse Hover | ArcGIS API for JavaScript 4.16
</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.16/"></script>
- Specify the style to be used in the map.
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
- Start the script to specify the feature to use.
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer"
], function (Map, MapView, FeatureLayer) {
var map = new Map({
basemap: "gray"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-95.7129, 37.0902],
zoom: 5,
popup: {
autoOpenEnabled: false
}
});
var featureLayer = new FeatureLayer({
url: "<Service REST Url>",
popupTemplate: {
title: "{state_abbr}",
content: "{state_name}"
}
});
map.add(featureLayer);
- Within the same script, include the code to enable the mouse hover function and close the <script> tag.
view.on("pointer-move", function (event) {
view.hitTest(event).then(function (response) {
if (response.results.length) {
var graphic = response.results.filter(function (result) {
// check if the graphic belongs to the layer of interest
return result.graphic.layer === featureLayer;
})[0].graphic;
view.popup.open({
location: graphic.geometry.centroid,
features: [graphic]
});
} else {
view.popup.close();
}
});
});
});
</script>
- Close all the opened tags and create the <body> tag.
</head> <body> <div id="viewDiv"></div> </body> </html>
- Save the file with the .html extension. The following is a sample of the entire script:
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>
Display Popups on Mouse Hover | ArcGIS API for JavaScript 4.16
</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.16/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.16/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer"
], function (Map, MapView, FeatureLayer) {
var map = new Map({
basemap: "gray"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-95.7129, 37.0902],
zoom: 5,
popup: {
autoOpenEnabled: false
}
});
var featureLayer = new FeatureLayer({
url: "https://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2",
popupTemplate: {
title: "{state_abbr}",
content: "{state_name}"
}
});
map.add(featureLayer);
view.on("pointer-move", function (event) {
view.hitTest(event).then(function (response) {
if (response.results.length) {
var graphic = response.results.filter(function (result) {
// check if the graphic belongs to the layer of interest
return result.graphic.layer === featureLayer;
})[0].graphic;
view.popup.open({
location: graphic.geometry.centroid,
features: [graphic]
});
} else {
view.popup.close();
}
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
转：https://support.esri.com/en/technical-article/000024297
