Comment dessiner un graphique personnalisé sur une carte à l'aide de l'API JavaScript ArcGIS?

Question

Je souhaite que chaque utilisateur puisse dessiner sa propre zone et, lorsqu'il se connecte la prochaine fois, il peut automatiquement charger cette zone. Comment puis-je réaliser cette fonction à l'aide de l'API JavaScript ArcGIS et d'ArcGIS Server?

Answer 1

Eh bien, il est clair que vous voulez dessiner un trait sur la carte et stocker ce somwhere afin que la prochaine fois que l'utilisation des visites, il/elle peut voir la dernière fonction tracée sur la carte. Tout d'abord, vous devez publier une couche d'entités éditable sur le serveur ArcGis où toutes les fonctionnalités seront sauvegardées.

Ci-dessous l'exemple de travail pour this-

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>

Mise à jour le proxy avant de commencer à consommer cet échantillon.

échantillon en direct en cours -https://developers.arcgis.com/javascript/3/sandbox/sandbox.html?sample=ed_feature_creation

En espérant que cela vous aidera :)