我正在为一个应用程序使用 ArcGIS API Sketch Widget，它有一个点图形层作为要素源层，Sketch Widget 在将鼠标悬停在地图上时使用它来捕捉。我需要获取捕捉到的点的坐标。有谁知道如何做到这一点？
我创建了一个基本的代码笔来演示捕捉：https://codepen.io/kathryndev/pen/ZEMorwm
在代码笔中，单击地图右上角的“绘制点”按钮。光标应更改为十字准线。当您在地图上移动光标时，您可以在左侧看到纬度/经度值。当光标足够接近以捕捉到黑点时，该点变为橙色。虽然该点是橙色的，但您可以看到当您围绕该点移动时纬度/经度值不断变化，但我需要将其移动到如果草图工具捕捉到一个点的位置，它将获取该点的坐标。
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>Sketch 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" />
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#hover-box{
background-color: white;
left: 15px;
position: absolute;
min-width: 200px;
top: 100px;
display:flex;
flex-direction: column;
padding: 5px;
}
#draw-btn{
height: 50px;
width: 100px;
}
</style>
<script src="https://js.arcgis.com/4.26/"></script>
<script>
require([
"esri/widgets/Sketch",
"esri/Map",
"esri/Graphic",
"esri/layers/GraphicsLayer",
"esri/views/MapView",
"esri/geometry/geometryEngine"
], (Sketch, Map, Graphic, GraphicsLayer, MapView, esriGeometryEngine) => {
let drawingActive = false;
let xElement = document.getElementById("hover-x");
let yElement = document.getElementById("hover-y");
const drawLayer = new GraphicsLayer();
const graphicsLayer = new GraphicsLayer();
const map = new Map({
basemap: "topo-vector",
layers: [drawLayer, graphicsLayer]
});
const view = new MapView({
container: "viewDiv",
map: map,
zoom: 15,
center: [-118.80657463861, 34.0005930608889]
});
const point = { //Create a point
type: "point",
longitude: -118.80657463861,
latitude: 34.0005930608889
};
const pointGraphic = new Graphic({
geometry: point,
});
graphicsLayer.add(pointGraphic);
let sketch;
view.when(() => {
sketch = new Sketch({
layer: drawLayer,
view: view,
creationMode: "single",
visibleElements: {
createTools: {
point: true,
polyline: false,
polygon: false,
rectangle: false,
circle: false,
},
settingsMenu: false,
undoRedoMenu: false,
selectionTools: {
'rectangle-selection': false,
'lasso-selection': false,
}
},
snappingOptions: {
enabled: true,
distance: 200,
featureSources: [{enabled: true, layer: graphicsLayer}]
}
});
sketch.on('create', () => {
drawingActive = false;
sketch.cancel();
})
view.ui.add(document.getElementById('draw-btn'), "top-right");
setUpSnappingTooltip();
});
const element = document.getElementById("draw-btn");
element.addEventListener("click", addPoint);
function addPoint(){
if (drawingActive) sketch.cancel();
else {
drawingActive = true;
sketch.create("point");
}
}
function setUpSnappingTooltip() {
view.on('pointer-move', (event) => {
snappingTooltip(event);
})
}
async function snappingTooltip(event) {
// Run only when drawing is active
if (drawingActive) {
const point = view.toMap(event);
xElement.innerHTML = `Long: ${point.longitude}`
yElement.innerHTML = `Lat: ${point.latitude}`
}
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<button id="draw-btn">Draw Point</button>
<div id="hover-box">
<b>Map hover lat/long</b>
<p id="hover-y">Lat: </p>
<p id="hover-x">Long: </p>
</div>
</div>
</body>
</html>