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>
Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.
