使用arcgis api为javascript绘制多边形,如何定位我绘制的多边形,我想得到一个坐标

时间:2017-07-20 14:58:30

标签: javascript arcgis-js-api

如何定位我绘制的多边形,我想得到一个坐标。 使用arcgis api为javascript绘制多边形,我使用示例的官方网站,当我点击某个我可以定位它时,我想要绘制很多我想要的多边形enter link description here

<html>

    

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

<link rel="stylesheet" href="https://js.arcgis.com/3.21/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.21/esri/css/esri.css">
<style>
  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;
  }
</style>

<script src="https://js.arcgis.com/3.21/"></script>
<script>
  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);
      });
    }
  });
</script>

              使用ctrl或cmd +单击图形删除。双击图形以编辑顶点。                                      

1 个答案:

答案 0 :(得分:1)

为了能够移动多边形,你只需要激活那个&#34;移动&#34;编辑工具栏中的工具,如API https://developers.arcgis.com/javascript/3/jsapi/edit-amd.html#activate

中所指定

在您提供的链接中,只有&#34; EDIT_VERTICES&#34;被激活了。 所以,替换

editToolbar.activate(Edit.EDIT_VERTICES , evt.graphic);

editToolbar.activate(Edit.EDIT_VERTICES | Edit.MOVE, evt.graphic);