ArcGIS 绘制多边形拖拽编辑旋转

前端
  1. <!DOCTYPE html>
  2. <html>
  4. <head>
  5.   <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”>
  6.   <meta name=“viewport” content=“width=device-width,user-scalable=no”>
  8.   <meta name=“viewport” content=“initial-scale=1, maximum-scale=1,user-scalable=no”>
  9.   <title>地图</title>
  11.   <link rel=“stylesheet” href=“https://js.arcgis.com/3.38/dijit/themes/nihilo/nihilo.css”>
  12.   <link rel=“stylesheet” href=“https://js.arcgis.com/3.38/esri/css/esri.css”>
  13.   <style>
  14.     html,
  15.     body,
  16.     #mainWindow {
  17.       font-family: sans-serif;
  18.       height: 100%;
  19.       width: 100%;
  20.     }
  22.     html,
  23.     body {
  24.       margin: 0;
  25.       padding: 0;
  26.     }
  28.     #header {
  29.       height: 80px;
  30.       overflow: auto;
  31.       padding: 0.5em;
  32.     }
  33.   </style>
  35.   <script src=“https://js.arcgis.com/3.38/”></script>
  36.   <script>
  37.     var map, toolbar, symbol, geomTask;
  39.     require([
  40.       “esri/map”,
  41.       “esri/toolbars/draw”,
  42.       “esri/graphic”,
  43.       “esri/toolbars/edit”,
  44.       “esri/symbols/SimpleMarkerSymbol”,
  45.       “esri/symbols/SimpleLineSymbol”,
  46.       “esri/symbols/SimpleFillSymbol”,
  48.       “esri/geometry/Point”, “esri/SpatialReference”, // 坐标转换
  50.       “dojo/parser”, “dijit/registry”, “dijit/Menu”, “dijit/MenuItem”, “dijit/MenuSeparator”,
  52.       “dijit/layout/BorderContainer”, “dijit/layout/ContentPane”,
  53.       “dijit/form/Button”, “dijit/WidgetSet”, “dojo/domReady!”,
  54.     ], function (
  55.       Map, Draw, Graphic, Edit,
  56.       SimpleMarkerSymbol, SimpleLineSymbol, SimpleFillSymbol,
  57.       Point, SpatialReference,
  58.       parser, registry, Menu, MenuItem, MenuSeparator
  59.     ) {
  60.       parser.parse();
  62.       map = new esri.Map(“map”);
  63.       var layer = new esri.layers.ArcGISDynamicMapServiceLayer(“http://127.0.0.1:88/arcgis/rest/services/MyMapService/MapServer”);
  64.       map.addLayer(layer);
  66.       map.on(“load”, createToolbar);
  68.       // loop through all dijits, connect onClick event
  69.       // listeners for buttons to activate drawing tools
  70.       registry.forEach(function (d) {
  71.         // d is a reference to a dijit
  72.         // could be a layout container or a button
  73.         if (d.declaredClass === “dijit.form.Button”) {
  74.           d.on(“click”, activateTool);
  75.         }
  76.       });
  78.       function activateTool() {
  79.         debugger
  80.         var tool = this[‘data-s’].toUpperCase().replace(/ /g, “_”);
  81.         //var tool = this.label.toUpperCase().replace(/ /g, “_”);
  82.         toolbar.activate(Draw[tool]);
  83.         map.hideZoomSlider();
  84.       }
  86.       function createGraphicsMenu() {
  87.         // Creates right-click context menu for GRAPHICS
  88.         ctxMenuForGraphics = new Menu({});
  89.         ctxMenuForGraphics.addChild(new MenuItem({
  90.           label: “Edit”,
  91.           onClick: function () {
  92.             if (selected.geometry.type !== “point”) {
  93.               editToolbar.activate(Edit.EDIT_VERTICES, selected);
  94.             } else {
  95.               alert(“Not implemented”);
  96.             }
  97.           }
  98.         }));
  100.         ctxMenuForGraphics.addChild(new MenuItem({
  101.           label: “Move”,
  102.           onClick: function () {
  103.             editToolbar.activate(Edit.MOVE, selected);
  104.           }
  105.         }));
  107.         ctxMenuForGraphics.addChild(new MenuItem({
  108.           label: “Rotate/Scale”,
  109.           onClick: function () {
  110.             if (selected.geometry.type !== “point”) {
  111.               editToolbar.activate(Edit.ROTATE | Edit.SCALE, selected);
  112.             } else {
  113.               alert(“Not implemented”);
  114.             }
  115.           }
  116.         }));
  118.         ctxMenuForGraphics.addChild(new MenuItem({
  119.           label: “Style”,
  120.           onClick: function () {
  121.             alert(“Not implemented”);
  122.           }
  123.         }));
  125.         ctxMenuForGraphics.addChild(new MenuSeparator());
  126.         ctxMenuForGraphics.addChild(new MenuItem({
  127.           label: “Delete”,
  128.           onClick: function () {
  129.             map.graphics.remove(selected);
  130.           }
  131.         }));
  133.         ctxMenuForGraphics.startup();
  135.         map.graphics.on(“mouse-over”, function (evt) {
  136.           // We’ll use this “selected” graphic to enable editing tools
  137.           // on this graphic when the user click on one of the tools
  138.           // listed in the menu.
  139.           selected = evt.graphic;
  141.           // Let’s bind to the graphic underneath the mouse cursor           
  142.           ctxMenuForGraphics.bindDomNode(evt.graphic.getDojoShape().getNode());
  143.         });
  145.         map.graphics.on(“mouse-out”, function (evt) {
  146.           ctxMenuForGraphics.unBindDomNode(evt.graphic.getDojoShape().getNode());
  147.         });
  148.       }
  149.       function createToolbar(themap) {
  150.         toolbar = new Draw(map);
  151.         toolbar.on(“draw-end”, addToMap);
  154.         editToolbar = new Edit(map);
  156.         map.on(“click”, function (evt) {
  157.           editToolbar.deactivate();
  158.         });
  161.         createGraphicsMenu();
  164.         // // 绘制多边形
  165.         // var features = [];
  166.         //     var point;
  167.         //     var rrr = {“name”:”MapServer”,”contents”:{“currentVersion”:10.22,”serviceDescription”:”555″,”mapName”:”图层”,”description”:””,”copyrightText”:”555″,”supportsDynamicLayers”:false,”layers”:[{“id”:0,”name”:”平度城区.tif”,”parentLayerId”:-1,”defaultVisibility”:true,”subLayerIds”:null,”minScale”:0,”maxScale”:0}],”tables”:[],”spatialReference”:{“wkid”:4528,”latestWkid”:4528},”singleFusedMapCache”:false,”initialExtent”:{“xmin”:40478239.026188038,”ymin”:4053735.2164187105,”xmax”:40529369.857616372,”ymax”:4082442.5655000778,”spatialReference”:{“wkid”:4528,”latestWkid”:4528}},”fullExtent”:{“xmin”:40485303.75,”ymin”:4063282.75,”xmax”:40507771.25,”ymax”:4078681.25,”spatialReference”:{“wkid”:4528,”latestWkid”:4528}},”minScale”:0,”maxScale”:0,”units”:”esriMeters”,”supportedImageFormatTypes”:”PNG32,PNG24,PNG,JPG,DIB,TIFF,EMF,PS,PDF,GIF,SVG,SVGZ,BMP”,”documentInfo”:{“Title”:”555″,”Author”:”555″,”Comments”:”555″,”Subject”:”555″,”Category”:””,”AntialiasingMode”:”Best”,”TextAntialiasingMode”:”Force”,”Keywords”:”555″},”capabilities”:”Map,Query,Data”,”supportedQueryFormats”:”JSON, AMF”,”exportTilesAllowed”:false,”maxRecordCount”:1000,”maxImageHeight”:4096,”maxImageWidth”:4096},”resourceInfo”:{“geoFullExtent”:{“xmin”:119.83524155804163,”ymin”:36.700465163402825,”xmax”:120.08712295814964,”ymax”:36.839337310357443},”spatialReferenceDomain”:{“xmin”:34876800,”ymin”:-10002100,”xmax”:54881000,”ymax”:10002100},”geoInitialExtent”:{“xmin”:119.75593233031574,”ymin”:36.614090397640318,”xmax”:120.32940660177833,”ymax”:36.873230684107618}},”resources”:[{“name”:”layers”,”resources”:[{“name”:”0″,”contents”:{“currentVersion”:10.22,”id”:0,”name”:”平度城区.tif”,”type”:”Raster Layer”,”description”:””,”geometryType”:null,”copyrightText”:””,”parentLayer”:null,”subLayers”:[],”minScale”:0,”maxScale”:0,”defaultVisibility”:true,”extent”:{“xmin”:40485303.75,”ymin”:4063282.75,”xmax”:40507771.25,”ymax”:4078681.25,”spatialReference”:{“wkid”:4528,”latestWkid”:4528}},”hasAttachments”:false,”htmlPopupType”:”esriServerHTMLPopupTypeNone”,”displayField”:””,”typeIdField”:null,”fields”:null,”relationships”:[],”canModifyLayer”:false,”canScaleSymbols”:false,”hasLabels”:false,”capabilities”:”Map,Query”,”supportsStatistics”:false,”supportsAdvancedQueries”:false,”supportedQueryFormats”:”JSON, AMF”,”ownershipBasedAccessControlForFeatures”:{“allowOthersToQuery”:true}}}]},{“name”:”tables”,”resources”:[]},{“name”:”legend”,”contents”:{“layers”:[{“layerId”:0,”layerName”:”平度城区.tif”,”layerType”:”栅格图层”,”minScale”:0,”maxScale”:0,”legend”:[{“label”:”红色:    Band_1″,”url”:”f7ea40b015f1d60df04924009513e076″,”imageData”:”iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAGZJREFUOI3t1LENgDAMBMAvLP0oWYS98ABmp6zBKN/RQBQoKGIqlG9sWdbJlQ0fx66GpGcgSd5Akr5JaxnEKoAgIcnbhQXAkrgwzmqvWwOZ4AQn+DOwJpD9CUryINsLGsntwfaDbA4UQBrHRWb9BwAAAABJRU5ErkJggg==”,”contentType”:”image/png”,”height”:20,”width”:20},{“label”:”绿色: Band_2″,”url”:”7dc83efc664def88ff1e522221ec5006″,”imageData”:”iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAGdJREFUOI3t1LEJgEAMBdBfBP4ot4h7mQHOnW4NR/mdhXioheDFSvKbhBAeqWL4OHY0JD0CSfIOknQtmlEGtQawEpK8X4gCYAqcWPdiz1vvk2CCCf4NbAFlvYGSnJX9BY3k8mDPg2g2D58ax6zV9GcAAAAASUVORK5CYII=”,”contentType”:”image/png”,”height”:20,”width”:20},{“label”:”蓝色:   Band_3″,”url”:”86fe416a22892c6789f665345a7f11b6″,”imageData”:”iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IB2cksfwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAAGNJREFUOI3t1KERwDAMA0CB3GmULNK96gHcnbJGRxErStrQOKhnIZ/An5ALNqf0g6RFIEk2QJImXSdQF7kG0iHJyltWAEdgo2Ms3JkEE0zwd2ALMPcMSjLS0V/QSqYH+y2ieQAK/hrH3cWcAgAAAABJRU5ErkJggg==”,”contentType”:”image/png”,”height”:20,”width”:20}]}]}}]};
  168.         //     rrr.resources[0].resources.forEach(function (item) {
  170.         //       debugger
  171.         //       var attr = {};
  172.         //       attr[“description”] = item.name;
  173.         //       attr[“title”] = ‘测试文字1111’
  174.         //       var symbol = new SimpleFillSymbol({
  175.         //         “type”: “esriSFS”, “style”: “esriSFSSolid”, “color”: item.bg,
  176.         //         //背景色在服务器数据中定义 
  177.         //         “outline”: {//轮廓 
  178.         //           “type”: “esriSLS”, “style”: “esriSLSSolid”, “color”: item.outline, “width”: 1
  179.         //         }
  180.         //       });
  181.         //       //绘制一个多边形
  182.         //       var polygon = new Polygon(new SpatialReference({ wkid: 4326 }));
  183.         //       polygon.addRing(item.polygon); 
  184.         //       var graphic = new Graphic(polygon, symbol);
  185.         //       graphic.setAttributes(attr);
  186.         //       point = new Point([item.longitude, item.latitude], new SpatialReference({ wkid: 4326 }));
  187.         //       features.push(graphic);//画好的多边形加到要素集 
  188.         //     });
  189.         //     results.layers.forEach(function (resultitem) {//要素集加到图层 
  190.         //       resultitem.layer.applyEdits(features, null, null);
  191.         //     });
  194.       }
  196.       function addToMap(evt) {
  197.         var symbol;
  198.         toolbar.deactivate();
  199.         map.showZoomSlider();
  200.         switch (evt.geometry.type) {
  201.           case “point”:
  202.           case “multipoint”:
  203.             symbol = new SimpleMarkerSymbol();
  204.             break;
  205.           case “polyline”:
  206.             symbol = new SimpleLineSymbol();
  207.             break;
  208.           default:
  209.             symbol = new SimpleFillSymbol();
  210.             break;
  211.         }
  214.         var point = new Point(40498306.34438303, 4068339.8746763663, new SpatialReference(4528))
  215.         debugger
  216.         console.log(point)
  217.         var graphic = new Graphic(evt.geometry, symbol);
  218.         map.graphics.add(graphic);
  219.       }
  220.     });
  221.   </script>
  222. </head>
  224. <body class=“nihilo”>
  226.   <div id=“mainWindow” data-dojo-type=“dijit/layout/BorderContainer” data-dojo-props=“design:’headline'”>
  227.     <div id=“header” data-dojo-type=“dijit/layout/ContentPane” data-dojo-props=“region:’top'”>
  228.       <!– <button data-dojo-type=“dijit/form/Button”>Point</button>
  229.       <button data-dojo-type=“dijit/form/Button”>Multi Point</button>
  230.       <button data-dojo-type=“dijit/form/Button”>Line</button>
  231.       <button data-dojo-type=“dijit/form/Button”>Polyline</button>
  232.       <button data-dojo-type=“dijit/form/Button”>Polygon</button>
  233.       <button data-dojo-type=“dijit/form/Button”>Freehand Polyline</button>
  234.       <button data-dojo-type=“dijit/form/Button”>Freehand Polygon</button>
  236.       <button data-dojo-type=“dijit/form/Button”>Arrow</button>
  237.       <button data-dojo-type=“dijit/form/Button”>Triangle</button>
  238.       <button data-dojo-type=“dijit/form/Button”>Circle</button>
  239.       <button data-dojo-type=“dijit/form/Button”>Ellipse</button> –>
  240.       <button data-dojo-type=“dijit/form/Button” data-s=“Polygon”>标注</button>
  241.     </div>
  242.     <div id=“map” data-dojo-type=“dijit/layout/ContentPane” data-dojo-props=“region:’center'”></div>
  243.   </div>
  245. </body>
  247. </html>

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注