简体   繁体   English

使用arcgis api for javascript绘制多边形,如何定位我绘制的多边形,我想获取坐标

[英]Use the arcgis api for javascript to draw polygons,How to position the polygon I painted, I want to get a coordinate

How to position the polygon I painted, I want to get a coordinate. 如何定位我绘制的多边形,我想获得一个坐标。 Use arcgis api for javascript to draw polygons, I use the official website of the example, I draw a lot of polygons I want when i click to a certain i can target it enter link description here 使用arcgis api for javascript绘制多边形,我使用示例的官方网站,当我单击到某个特定目标时我会绘制很多多边形,我可以将其定位为目标,然后在此处输入链接描述

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

Use ctrl or cmd + click on graphic to delete. 使用ctrl或cmd +单击图形删除。 Double click on graphic to edit vertices. 双击图形以编辑顶点。

To be able to move the polygons, you just have to activate that "MOVE" tool in the edit toolbar, as specified in the API https://developers.arcgis.com/javascript/3/jsapi/edit-amd.html#activate 为了能够移动多边形,您只需要激活编辑工具栏中的“ MOVE”工具即可,如API https://developers.arcgis.com/javascript/3/jsapi/edit-amd.html#中所指定启用

In the link you provided, only "EDIT_VERTICES" is activated. 在您提供的链接中,仅激活了“ EDIT_VERTICES”。 So, replace the line 所以,更换线

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

with

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

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM