http://resources.arcgis.com/en/help/main/10.1/index.html#//0154000005mm000000
<html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices--> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title>Editable Points of Interest and Evacuation Map for Sheep Fire</title> <!-- include dojo theme --> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css"> <style type="text/css"> .dj_ie .infowindow .window .top .right .user .content { position: relative; } .dj_ie .simpleInfoWindow .content {position: relative;} </style> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow:hidden; } #leftPane{ overflow:hidden; width:250px; border:none; } #map{ padding:0; } #header{ font-weight:600; font-size:14pt; color:#666666; padding-left:20px; } </style> <!-- specify dojo configuration to parse dijits at load time --> <script type="text/javascript"> djConfig = { parseOnLoad: true }; </script> <!-- reference ArcGIS JavaScript API --> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script> <script type="text/javascript"> //require selection dijit dojo.require("esri.map"); dojo.require("esri.dijit.editing.Editor-all"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.BorderContainer"); var map; var resizeTimer; var firePerimeter; var evacuationPerimeter; var pointsOfInterest; var fLayer, edLayer; var templatePicker, myEditor; var editLayers; var editorWidget; function init() { //This sample requires a proxy page to handle communications with the ArcGIS Server services. You will need to //replace the url below with the location of a proxy on your machine. See the 'Using the proxy page' help topic //for details on setting up a proxy page. esri.config.defaults.io.proxyUrl = "/arcgisserver/apis/javascript/proxy/proxy.ashx"; //This service is for development and testing purposes only. We recommend that you create your own geometry service for use within your applications. esri.config.defaults.geometryService = new esri.tasks.GeometryService("http://sampleserver3.arcgisonline.com/arcgis/rest/services/Geometry/GeometryServer"); var initialExtent = new esri.geometry.Extent({ "xmin": -117.66, "ymin": 34.19, "xmax": -117.41, "ymax": 34.37, "spatialReference": { "wkid": 4326 } }); map = new esri.Map("map", { extent: esri.geometry.geographicToWebMercator(initialExtent), slider: false, nav: true }); dojo.connect(map, "onLoad", function () { dojo.connect(dijit.byId('map'), 'resize', function () { resizeMap(); }); }); dojo.connect(map, "onLayersAddResult", initEditor); var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"); map.addLayer(basemap); pointsOfInterest = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/FeatureServer/0", { mode: esri.layers.FeatureLayer.MODE_ONDEMAND, //QUERY_SELECTION is working as well outFields: ['*'] }); evacuationPerimeter = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/FeatureServer/1", { mode: esri.layers.FeatureLayer.MODE_ONDEMAND, //QUERY_SELECTION is working as well outFields: ['*'] }); firePerimeter = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/FeatureServer/2", { mode: esri.layers.FeatureLayer.MODE_ONDEMAND, //QUERY_SELECTION is working as well outFields: ['*'] }); // map.addLayers([pointsOfInterest, evacuationPerimeter]); } function fireEd() { //alert("fireEd"); //map.removeAllLayers(); if (fLayer) { map.removeLayer(fLayer); } //dojo.connect(map, "onLayersAddResult", initEditor); var myLyrList = document.getElementById("myList"); edLayer = myLyrList.options[myList.selectedIndex].text; //alert(myLyrList.options[myList.selectedIndex].value); switch (myLyrList.options[myList.selectedIndex].value) { case "0": fLayer = pointsOfInterest; break; case "1": fLayer = evacuationPerimeter; break; case "2": fLayer = firePerimeter; break; } map.addLayers([fLayer]); } function initEditor(results) { editLayers = dojo.map(results, function (result) { return { 'featureLayer': result.layer }; }); createEditor(); } //Functions to create and destroy the editor. We do this each time the edit button is clicked. function createEditor() { if (editorWidget) { editorWidget.destroy(); editorWidget = null; // return; } if (editLayers.length > 0) { //create template picker var templateLayers = dojo.map(editLayers, function (layer) { return layer.featureLayer; }); var eDiv = dojo.create("div", { id: "templDiv" }); dojo.byId('leftPane').appendChild(eDiv); var editLayerInfo = editLayers; var templatePicker = new esri.dijit.editing.TemplatePicker({ featureLayers: templateLayers, rows: 'auto', columns: 'auto', // style: 'height:98%;width:98%;' }, 'templDiv'); templatePicker.startup(); var settings = { map: map, templatePicker: templatePicker, layerInfos: editLayerInfo, toolbarVisible: true }; var params = { settings: settings }; var eDiv1 = dojo.create("div", { id: "editDiv" }); dojo.byId('leftPane').appendChild(eDiv1); editorWidget = new esri.dijit.editing.Editor(params, "editDiv"); editorWidget.startup(); } } function destroyEditor() { if (editorWidget) { editorWidget.destroy(); editorWidget = null; } } //Handle resize of browser function resizeMap() { clearTimeout(resizeTimer); resizeTimer = setTimeout(function () { map.resize(); map.reposition(); }, 500); } dojo.addOnLoad(init); </script> </head> <body class="claro"> <div dojotype="dijit.layout.BorderContainer" design="headline" style="width:100%;height:100%;"> <div dojotype="dijit.layout.ContentPane" id="header" region="top">Editable Fire Map</div> <div id="map" dojotype="dijit.layout.ContentPane" region="center"></div> <div id="leftPane" dojotype="dijit.layout.ContentPane" region="left"> <select id="myList" onchange="fireEd()"> <option value="">Choose layer to edit</option> <option value="0">Points of Interest</option> <option value="1">Evacuation Perimeter</option> <option value="2">Fire Perimeter</option> </select><br><br> <input type="button" onclick="createEditor();" value="Create Editor" disabled/> <input type="button" onclick="destroyEditor();" value="Destroy Editor"disabled/> <div id="templateDiv"></div> <div id="editorDiv"></div> </div> </div> </body> </html>
Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
