你如何从这个 ArchGIS 地图“onclick”中获取经度和纬度值并插入到 html 表单字段中？

如何解决你如何从这个 ArchGIS 地图“onclick”中获取经度和纬度值并插入到 html 表单字段中？

我有一张 ArcGIS 地图，我想用它来生成位置数据，以便为一家位于科孚岛的慈善机构记录野生动物目击事件的位置。

如何使用 ArcGIS 地图在“onclick”事件上生成的经度和纬度值填充地图下方的两个表单字段（Lon 和 Lat）？

这是我的代码...

<html>
<head>
  <Meta charset="utf-8">
  <Meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <style>
    html,body,#viewDiv {
      padding: 0;
      margin: 0;
      height: 600px;
      width: 100%;
    }
  </style>
            
    
</head>
<body>

<div id="viewDiv"></div>
<br><br>
<form>
<input id="Lon" name="Lon" placeholder="Lon">
<input id="Lat" name="Lat" placeholder="Lat">
</form>

</body>
</html>

以及在结束 /head 标记之前插入的脚本

<link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
  <script src="https://js.arcgis.com/4.11/"></script>
    
  
  <script type="text/javascript">
                //LOAD LAYERS
                    require([
                    "esri/tasks/Locator","esri/Map","esri/views/MapView","esri/Graphic","esri/layers/Graphicslayer"
                    ],function(Locator,Map,MapView,Graphic,Graphicslayer) {
                        
                    var locatorTask = new Locator({
                    url:
                    "https://geocode.arcgis.com/arcgis/rest/services/World/GeocodeServer"
                    });

                    var map = new Map({
                    basemap: "topo-vector"
                    });

                    var view = new MapView({
                    container: "viewDiv",map: map,center: [19.874268,39.576056],// longitude,latitude 
                    zoom: 10,});

                    var graphicslayer = new Graphicslayer();
                    map.add(graphicslayer);

                    var coordsWidget = document.createElement("div");
                    coordsWidget.id = "coordsWidget";
                    coordsWidget.className = "esri-widget esri-component";
                    coordsWidget.style.padding = "7px 15px 5px";

                    view.ui.add(coordsWidget,"bottom-left");

                    function showCoordinates(pt) {
                    var coords =
                    "Lon " +
                    pt.longitude.toFixed(6) +
                    " | Lat " +
                    pt.latitude.toFixed(6);
                    coordsWidget.innerHTML = coords;
                    }

                    view.watch("stationary",function (isstationary) {
                    showCoordinates(view.center);
                    });

                    view.on("pointer-move",function (evt) {
                    showCoordinates(view.toMap({ x: evt.x,y: evt.y }));
                    });
    });
  </script>

解决方法

受到您发布的代码的启发：在视图的点击事件上，在输入标签中插入坐标：

var inputLongitude = document.getElementById( "Lon" );
var inputLatitude = document.getElementById( "Lat" );

function insertCoordinates( pt ) {
  inputLongitude.value = pt.longitude.toFixed( 6 );
  inputLatitude.value = pt.latitude.toFixed( 6 );
}

view.on("click",function ( evt ) {
  insertCoordinates( view.toMap( { x: evt.x,y: evt.y } ) );
});