我有 ArcGIS for javascript 4.24 和以下代码，如果用户在多边形之外单击，我想在其中显示弹出窗口。
view.on("click", function (evt) {
view.hitTest(evt).then((response) => {
// check if an existing marker is selected
if (response.results.length && response.results[0].graphic.popupTemplate != null) {
// do nothing as the popup is set to automatically open on click event
} else {
let newPoint = view.toMap({
x: evt.x,
y: evt.y
});
let newMarker = new Graphic(newPoint, markerSymbol);
positionLayer.removeAll();
if (!geometryEngine.contains(boundaryPolygon, newPoint)) {
view.openPopup({
title: "some title",
content: "This location is outside the boundary",
location: newPoint
});
} else {
// Custom data handling
}
}
});
});
但是 openPopup 函数仅在 ArcGIS v 4.27 中可用
如何在 ArcGIS v 4.24 中打开弹出窗口？我尝试了以下方法，但它也不起作用：
view.popup.open({
title: "some title",
content: "This location is outside the boundary",
location: newPoint
});
我认为您只需要通过将弹出窗口属性
autoOpenEnabledfalse<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>
Code Popup Open 4.24
</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.24/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.24/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/GraphicsLayer",
"esri/Graphic"
], (Map, MapView, GraphicsLayer, Graphic) => {
const map = new Map({
basemap: "satellite"
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 5,
center: [-101.94981250000075, 41.20977753557709]
});
const graphicsLayer = new GraphicsLayer();
const graphic = new Graphic({
geometry: {
type: "point",
x: -101.94981250000075,
y: 41.20977753557709
},
symbol: {
type: "picture-marker",
url: "https://developers.arcgis.com/javascript/latest/sample-code/satellites-3d/live/satellite.png",
width: 64,
height: 64
}
});
view.popup.autoOpenEnabled = false; // <-- deactivate popup auto open
graphicsLayer.add(graphic);
map.add(graphicsLayer);
view.on("click", function (evt) {
view.hitTest(evt).then((response) => {
if (response.results.length === 0) {
view.popup.open({
title: "Miss",
content: "You need to click the satellite!.",
location: evt.mapPoint
});
} else {
view.popup.feature = graphic;
view.popup.open({
title: "On Target",
content: "You click the satellite!.",
location: evt.mapPoint
});
}
});
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>重要：禁用弹出窗口自动打开所需的操作从弹出窗口（如上所述）更改为版本
4.27中的视图（属性
popupEnabled）（公平地说，逻辑也有点不同）。