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

【问题标题】：How do you grab the longitude and latitude values from this ArchGIS map 'onclick' and insert into html form fields?如何从这个 ArcGIS 地图“onclick”中获取经度和纬度值并插入到 html 表单字段中？
【发布时间】：2021-04-05 13:50:40
【问题描述】：

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

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

这是我的代码...

<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>

【问题讨论】：

标签： javascript forms arcgis form-fields

【解决方案1】：

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

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 } ) );
});

【讨论】：