javascript - 如何使用 ArcGIS JavaScript API 在地图上绘制自定义图形？

Question

我希望每个用户都能够绘制自己的区域，并且当他们下次登录时可以自动加载这个区域。如何使用 ArcGIS JavaScript API 和 ArcGIS Server 实现此功能？

javascriptarcgis-js-apiarcgis-serveresri-maps

Answer 1

好吧，很明显，您想在地图上绘制一些特征并将其存储在某个位置，以便下次使用时，他/她可以在地图上看到最后绘制的特征。

首先，您需要在 arcgis 服务器中发布一个可编辑的要素图层，所有要素都将保存在该图层中。

下面是这个的工作样本 -

 var map;
      require([
        "esri/map",
        "esri/toolbars/draw",
        "esri/toolbars/edit",
        "esri/graphic",
        "esri/config",

        "esri/layers/FeatureLayer",

        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleFillSymbol",

        "esri/dijit/editing/TemplatePicker",

        "dojo/_base/array",
        "dojo/_base/event",
        "dojo/_base/lang",
        "dojo/parser",
        "dijit/registry",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
        "dijit/form/Button", "dojo/domReady!"
      ], function(
        Map, Draw, Edit, Graphic, esriConfig,
        FeatureLayer,
        SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
        TemplatePicker,
        arrayUtils, event, lang, parser, registry
      ) {
        parser.parse();

        // refer to "Using the Proxy Page" for more information:  https://developers.arcgis.com/javascript/3/jshelp/ags_proxy.html
        esriConfig.defaults.io.proxyUrl = "/proxy/";

        // This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications.
        esriConfig.defaults.geometryService = new esri.tasks.GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

        map = new Map("map", {
          basemap: "streets",
          center: [-83.244, 42.581],
          zoom: 15
        });

        map.on("layers-add-result", initEditing);

        var landusePointLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/6", {
          mode: FeatureLayer.MODE_SNAPSHOT,
          outFields: ["*"]
        });
        var landuseLineLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/8", {
          mode: FeatureLayer.MODE_SNAPSHOT,
          outFields: ["*"]
        });
        var landusePolygonLayer = new FeatureLayer("https://sampleserver6.arcgisonline.com/arcgis/rest/services/Military/FeatureServer/9", {
          mode: FeatureLayer.MODE_SNAPSHOT,
          outFields: ["*"]
        });

        map.addLayers([landusePointLayer, landuseLineLayer, landusePolygonLayer]);

        function initEditing(evt) {
          console.log("initEditing", evt);
          // var map = this;
          var currentLayer = null;
          var layers = arrayUtils.map(evt.layers, function(result) {
            return result.layer;
          });
          console.log("layers", layers);

          var editToolbar = new Edit(map);
          editToolbar.on("deactivate", function(evt) {
            currentLayer.applyEdits(null, [evt.graphic], null);
          });

          arrayUtils.forEach(layers, function(layer) {
            var editingEnabled = false;
            layer.on("dbl-click", function(evt) {
              event.stop(evt);
              if (editingEnabled === false) {
                editingEnabled = true;
                editToolbar.activate(Edit.EDIT_VERTICES , evt.graphic);
              } else {
                currentLayer = this;
                editToolbar.deactivate();
                editingEnabled = false;
              }
            });

            layer.on("click", function(evt) {
              event.stop(evt);
              if (evt.ctrlKey === true || evt.metaKey === true) {  //delete feature if ctrl key is depressed
                layer.applyEdits(null,null,[evt.graphic]);
                currentLayer = this;
                editToolbar.deactivate();
                editingEnabled=false;
              }
            });
          });

          var templatePicker = new TemplatePicker({
            featureLayers: layers,
            rows: "auto",
            columns: 2,
            grouping: true,
            style: "height: auto; overflow: auto;"
          }, "templatePickerDiv");

          templatePicker.startup();

          var drawToolbar = new Draw(map);

          var selectedTemplate;
          templatePicker.on("selection-change", function() {
            if( templatePicker.getSelected() ) {
              selectedTemplate = templatePicker.getSelected();
            }
            switch (selectedTemplate.featureLayer.geometryType) {
              case "esriGeometryPoint":
                drawToolbar.activate(Draw.POINT);
                break;
              case "esriGeometryPolyline":
                drawToolbar.activate(Draw.POLYLINE);
                break;
              case "esriGeometryPolygon":
                drawToolbar.activate(Draw.POLYGON);
                break;
            }
          });

          drawToolbar.on("draw-end", function(evt) {
            drawToolbar.deactivate();
            editToolbar.deactivate();
            var newAttributes = lang.mixin({}, selectedTemplate.template.prototype.attributes);
            var newGraphic = new Graphic(evt.geometry, null, newAttributes);
            selectedTemplate.featureLayer.applyEdits([newGraphic], null, null);
          });
        }
      });

      html, body {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow:hidden;
      }
      #header {
        border:solid 2px #462d44;
        background:#fff;
        color:#444;
        -moz-border-radius: 4px;
        border-radius: 4px;
        font-family: sans-serif;
        font-size: 1.1em
        padding-left:20px;
      }
      #map {
        padding:1px;
        border:solid 2px #444;
        -moz-border-radius: 4px;
        border-radius: 4px;
      }
      #rightPane {
        border:none;
        padding: 0;
        width:228px;
      }
      .templatePicker {
        border: solid 2px #444;
      }

<link rel="stylesheet" href="https://js.arcgis.com/3.20/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
    <script src="https://js.arcgis.com/3.20/"></script>
    
    <body class="claro">
    <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="gutters:true, design:'headline'" style="width:100%;height:100%;">
      <div data-dojo-type="dijit/layout/ContentPane"  id="header" data-dojo-props="region:'top'">Use ctrl or cmd + click on graphic to delete.  Double click on graphic to edit vertices. </div>
      <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
      <div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
        <div id="templatePickerDiv"></div>
      </div>
    </div>
  </body>

在开始使用此示例之前更新代理。

实时运行示例 - https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=ed_feature_creation

希望这会帮助你:)