如何在 ArcGIS API for JavaScript 中创建表单？

Question

I am using the Javascript API (ArcGIS API for JavaScript 3.40).我正在使用 Javascript API（ArcGIS API for JavaScript 3.40）。 But I can't find a way how I can add a form that allows me to enter Latitude and Longitude where I mark the point on the map.但我找不到一种方法如何添加允许我输入纬度和经度的表格，我在地图上标记点。 The example I am using is "Add graphics to a map".我使用的示例是“将图形添加到地图”。 URL: https://developers.arcgis.com/javascript/3/jssamples/graphics_add.html网址： https ://developers.arcgis.com/javascript/3/jssamples/graphics_add.html

Code from Arcgis page:来自 Arcgis 页面的代码：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Shapes and Symbols</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.40/esri/css/esri.css">

    <style>
      #info {
        top: 20px;
        color: #444;
        height: auto;
        font-family: arial;
        right: 20px;
        margin: 5px;
        padding: 10px;
        position: absolute;
        width: 115px;
        z-index: 40;
        border: solid 2px #666;
        border-radius: 4px;
        background-color: #fff;
      }
      html, body, #mapDiv {
        padding:0;
        margin:0;
        height:100%;
      }
      button {
        display: block;
      }
    </style>

    <script src="https://js.arcgis.com/3.40/"></script>
    <script>
      var map, tb;

      require([
        "esri/map", "esri/toolbars/draw",
        "esri/symbols/SimpleMarkerSymbol", "esri/symbols/SimpleLineSymbol",
        "esri/symbols/PictureFillSymbol", "esri/symbols/CartographicLineSymbol", 
        "esri/graphic", 
        "esri/Color", "dojo/dom", "dojo/on", "dojo/domReady!"
      ], function(
        Map, Draw,
        SimpleMarkerSymbol, SimpleLineSymbol,
        PictureFillSymbol, CartographicLineSymbol, 
        Graphic, 
        Color, dom, on
      ) {
        map = new Map("mapDiv", {
          basemap: "topo-vector",
          center: [-25.312, 34.307],
          zoom: 2
        });
        map.on("load", initToolbar);

        // markerSymbol is used for point and multipoint, see http://raphaeljs.com/icons/#talkq for more examples
        var markerSymbol = new SimpleMarkerSymbol();
        markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z");
        markerSymbol.setColor(new Color("#00FFFF"));

        // lineSymbol used for freehand polyline, polyline and line. 
        var lineSymbol = new CartographicLineSymbol(
          CartographicLineSymbol.STYLE_SOLID,
          new Color([255,0,0]), 10, 
          CartographicLineSymbol.CAP_ROUND,
          CartographicLineSymbol.JOIN_MITER, 5
        );

        // fill symbol used for extent, polygon and freehand polygon, use a picture fill symbol
        // the images folder contains additional fill images, other options: sand.png, swamp.png or stiple.png
        var fillSymbol = new PictureFillSymbol(
          "images/mangrove.png",
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new Color('#000'), 
            1
          ), 
          42, 
          42
        );

        function initToolbar() {
          tb = new Draw(map);
          tb.on("draw-end", addGraphic);

          // event delegation so a click handler is not
          // needed for each individual button
          on(dom.byId("info"), "click", function(evt) {
            if ( evt.target.id === "info" ) {
              return;
            }
            var tool = evt.target.id.toLowerCase();
            map.disableMapNavigation();
            tb.activate(tool);
          });
        }

        function addGraphic(evt) {
          //deactivate the toolbar and clear existing graphics 
          tb.deactivate(); 
          map.enableMapNavigation();

          // figure out which symbol to use
          var symbol;
          if ( evt.geometry.type === "point" || evt.geometry.type === "multipoint") {
            symbol = markerSymbol;
          } else if ( evt.geometry.type === "line" || evt.geometry.type === "polyline") {
            symbol = lineSymbol;
          }
          else {
            symbol = fillSymbol;
          }

          map.graphics.add(new Graphic(evt.geometry, symbol));
        }
      });
    </script>
  </head>
  
  <body>
    
    <div id="info">
      <div>Select a shape then draw on map to add graphic</div>
      <button id="Point">Point</button>
      <button id="Multipoint">Multipoint</button>
      <button id="Line">Line</button>
      <button id="Polyline">Polyline</button>
      <button id="FreehandPolyline">Freehand Polyline</button>
      <button id="Triangle">Triangle</button>
      <button id="Extent">Rectangle</button>
      <button id="Circle">Circle</button>
      <button id="Ellipse">Ellipse</button>
      <button id="Polygon">Polygon</button>
      <button id="FreehandPolygon">Freehand Polygon</button>
    </div>

    <div id="mapDiv"></div>

  </body>
</html>

Thank you.谢谢你。

Answer 1

Take a look at this example I put for you, that I am guessing could help you in your task,看看我为你准备的这个例子，我猜它可以帮助你完成任务，

 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Add Lat Lon Points</title> <link rel="stylesheet" href="https://js.arcgis.com/3.40/esri/css/esri.css"> <style> #info { top: 20px; color: #444; height: auto; font-family: arial; right: 20px; margin: 5px; padding: 10px; position: absolute; width: 200px; z-index: 40; border: solid 2px #666; border-radius: 4px; background-color: #fff; } html, body, #mapDiv { padding: 0; margin: 0; height: 100%; } input, button, label { width: 100%; margin: 5px; } input, label { width: 180px; margin: 5px; height: 25px; } button { width: 190px; height: 30px; } </style> <script src="https://js.arcgis.com/3.40/"></script> <script> var map, tb; require([ "esri/map", "esri/symbols/SimpleMarkerSymbol", "esri/graphic", "esri/geometry/Point", "esri/Color", "dojo/dom", "dojo/on", "dojo/domReady!" ], function ( Map, SimpleMarkerSymbol, Graphic, Point, Color, dom, on ) { const map = new Map("mapDiv", { basemap: "topo-vector", center: [-25.312, 34.307], zoom: 2 }); map.on("load", function() { // markerSymbol is used for point, see http://raphaeljs.com/icons/#talkq for more examples const markerSymbol = new SimpleMarkerSymbol(); markerSymbol.setPath("M16,4.938c-7.732,0-14,4.701-14,10.5c0,1.981,0.741,3.833,2.016,5.414L2,25.272l5.613-1.44c2.339,1.316,5.237,2.106,8.387,2.106c7.732,0,14-4.701,14-10.5S23.732,4.938,16,4.938zM16.868,21.375h-1.969v-1.889h1.969V21.375zM16.772,18.094h-1.777l-0.176-8.083h2.113L16.772,18.094z"); markerSymbol.setColor(new Color("#00FFFF")); on(dom.byId("addButton"), "click", function (evt) { const long = dom.byId("longInput").value; const lat = dom.byId("latInput").value; if (!long || !lat) { return; } const pto = new Point(long, lat); map.graphics.add(new Graphic(pto, markerSymbol)); map.centerAt(pto); }); }); }); </script> </head> <body> <div id="info"> <label> Long <input type="number" id="longInput"/> </label> <label> Lat <input type="number" id="latInput"/> </label> <button id="addButton">Add</button> </div> <div id="mapDiv"></div> </body> </html>

I will though recommend you to use the newest version of the library.不过，我会建议您使用该库的最新版本。 At this point I believe the only reason to do any development in 3.x version is to support already build applications or sites.在这一点上，我相信在 3.x 版本中进行任何开发的唯一原因是支持已经构建的应用程序或站点。

如何在 ArcGIS API for JavaScript 中创建表单？

问题描述

1 个解决方案

解决方案1
2 已采纳 2022-06-07 03:31:01

如何在 ArcGIS API for JavaScript 中创建表单？

问题描述

1 个解决方案

解决方案1 2 已采纳 2022-06-07 03:31:01

解决方案1
2 已采纳 2022-06-07 03:31:01