<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10"> <!--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>Edit rivers and waterbodies</title> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css" /> <style> html, body { height: 100%; width: 100%; margin: 0; overflow: hidden; } #map { padding: 0; } #header { font-size: 14pt; padding-left: 20px; padding-top: 4px; color: #660000; } .dj_ie .infowindow .window .top .right .user .content { position: relative; } .dj_ie .simpleInfoWindow .content { position: relative; } </style> <script type="text/javascript"> var djConfig = { parseOnLoad: true, packages: [{ "name": "agsjs", "location": location.pathname.replace('/\/[^/]+$/', "") + '/../js/agsjs' }] }; </script> <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script> <script> dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("esri.map"); dojo.require("esri.dijit.editing.Editor-all"); dojo.require("esri.SnappingManager"); dojo.require("agsjs.dijit.TOC"); var map; function init() { //snapping is enabled for this sample - change the tooltip to reflect this esri.bundle.toolbars.draw.start = esri.bundle.toolbars.draw.start + "<br/>Press <b>ALT</b> to enable snapping"; //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 = "/proxy"; //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://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"); map = new esri.Map("map", { basemap: "satellite", center: [-96.541, 38.351], zoom: 14, slider: false }); dojo.connect(map, "onLayersAddResult", initEditor); //add boundaries and place names var labels = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer"); map.addLayer(labels); var rivers = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/1", { mode: esri.layers.FeatureLayer.MODE_ONDEMAND, outFields: ['*'] }); var waterbodies = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/0", { mode: esri.layers.FeatureLayer.MODE_ONDEMAND, outFields: ['*'] }); map.addLayers([waterbodies, rivers]); dojo.connect(map, 'onLayersAddResult', function (results) { var toc = new agsjs.dijit.TOC({ map: map, layerInfos: [{ layer: labels, title: "labels", slider: true, collapsed: true }, { layer: rivers, title: "rivers", slider: true, collapsed: true }, { layer: waterbodies, title: "waterbodies", slider: true, collapsed: true }] }, 'tocDiv'); toc.startup(); }); } function initEditor(results) { var templateLayers = dojo.map(results, function (result) { return result.layer; }); var templatePicker = new esri.dijit.editing.TemplatePicker({ featureLayers: templateLayers, grouping: true, rows: 'auto', columns: 3 }, 'templateDiv'); templatePicker.startup(); var layers = dojo.map(results, function (result) { return { featureLayer: result.layer }; }); var settings = { map: map, templatePicker: templatePicker, layerInfos: layers, toolbarVisible: true, createOptions: { polylineDrawTools: [esri.dijit.editing.Editor.CREATE_TOOL_FREEHAND_POLYLINE], polygonDrawTools: [esri.dijit.editing.Editor.CREATE_TOOL_FREEHAND_POLYGON, esri.dijit.editing.Editor.CREATE_TOOL_CIRCLE, esri.dijit.editing.Editor.CREATE_TOOL_TRIANGLE, esri.dijit.editing.Editor.CREATE_TOOL_RECTANGLE ] }, toolbarOptions: { reshapeVisible: true } }; var params = { settings: settings }; var myEditor = new esri.dijit.editing.Editor(params, 'editorDiv'); //define snapping options var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CROSS, 15, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0, 0.5]), 5), null); map.enableSnapping({ snapPointSymbol: symbol, tolerance: 20, snapKey: dojo.keys.ALT }); myEditor.startup(); } dojo.ready(init); </script> </head> <body class="claro"> <div id="main" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="height: width:100%; height: 100%;"> <div data-dojo-type="dijit.layout.ContentPane" id="header" data-dojo-props="region:'top'"> Edit Hydrography </div> <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" style="width: 300px; overflow: hidden;"> <div id="templateDiv"> </div> <div id="editorDiv"> </div> </div> <div data-dojo-type="dijit.layout.ContentPane" id="map" data-dojo-props="region:'center'"> </div> <div dojotype="dijit.layout.ContentPane" id="leftPane" region="right" style="visibility: visible; width: 300px;"> <div dojotype="dijit.layout.ContentPane" id="legendPane" title="Lejant" selected="true"> <div data-dojo-type="dijit.layout.AccordionContainer"> <div data-dojo-type="dijit.layout.ContentPane" title="Tabakalar" selected="true"> <div id="tocDiv"> </div> </div> </div> </div> </div> </div> </body> </html>
Hi Ian,I modified code for you. But there is a problem. Feature Layer couldn't show properly at the toc.<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10"> <!--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>Edit rivers and waterbodies</title> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/js/esri/css/esri.css" /> <style> html, body { height: 100%; width: 100%; margin: 0; overflow: hidden; } #map { padding: 0; } #header { font-size: 14pt; padding-left: 20px; padding-top: 4px; color: #660000; } .dj_ie .infowindow .window .top .right .user .content { position: relative; } .dj_ie .simpleInfoWindow .content { position: relative; } </style> <script type="text/javascript"> var djConfig = { parseOnLoad: true, packages: [{ "name": "agsjs", "location": location.pathname.replace('/\/[^/]+$/', "") + '/../js/agsjs' }] }; </script> <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5/"></script> <script> dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("esri.map"); dojo.require("esri.dijit.editing.Editor-all"); dojo.require("esri.SnappingManager"); dojo.require("agsjs.dijit.TOC"); var map; function init() { //snapping is enabled for this sample - change the tooltip to reflect this esri.bundle.toolbars.draw.start = esri.bundle.toolbars.draw.start + "<br/>Press <b>ALT</b> to enable snapping"; //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 = "/proxy"; //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://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer"); map = new esri.Map("map", { basemap: "satellite", center: [-96.541, 38.351], zoom: 14, slider: false }); dojo.connect(map, "onLayersAddResult", initEditor); //add boundaries and place names var labels = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer"); map.addLayer(labels); var rivers = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/1", { mode: esri.layers.FeatureLayer.MODE_ONDEMAND, outFields: ['*'] }); var waterbodies = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/0", { mode: esri.layers.FeatureLayer.MODE_ONDEMAND, outFields: ['*'] }); map.addLayers([waterbodies, rivers]); dojo.connect(map, 'onLayersAddResult', function (results) { var toc = new agsjs.dijit.TOC({ map: map, layerInfos: [{ layer: labels, title: "labels", slider: true, collapsed: true }, { layer: rivers, title: "rivers", slider: true, collapsed: true }, { layer: waterbodies, title: "waterbodies", slider: true, collapsed: true }] }, 'tocDiv'); toc.startup(); }); } function initEditor(results) { var templateLayers = dojo.map(results, function (result) { return result.layer; }); var templatePicker = new esri.dijit.editing.TemplatePicker({ featureLayers: templateLayers, grouping: true, rows: 'auto', columns: 3 }, 'templateDiv'); templatePicker.startup(); var layers = dojo.map(results, function (result) { return { featureLayer: result.layer }; }); var settings = { map: map, templatePicker: templatePicker, layerInfos: layers, toolbarVisible: true, createOptions: { polylineDrawTools: [esri.dijit.editing.Editor.CREATE_TOOL_FREEHAND_POLYLINE], polygonDrawTools: [esri.dijit.editing.Editor.CREATE_TOOL_FREEHAND_POLYGON, esri.dijit.editing.Editor.CREATE_TOOL_CIRCLE, esri.dijit.editing.Editor.CREATE_TOOL_TRIANGLE, esri.dijit.editing.Editor.CREATE_TOOL_RECTANGLE ] }, toolbarOptions: { reshapeVisible: true } }; var params = { settings: settings }; var myEditor = new esri.dijit.editing.Editor(params, 'editorDiv'); //define snapping options var symbol = new esri.symbol.SimpleMarkerSymbol(esri.symbol.SimpleMarkerSymbol.STYLE_CROSS, 15, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0, 0.5]), 5), null); map.enableSnapping({ snapPointSymbol: symbol, tolerance: 20, snapKey: dojo.keys.ALT }); myEditor.startup(); } dojo.ready(init); </script> </head> <body class="claro"> <div id="main" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" style="height: width:100%; height: 100%;"> <div data-dojo-type="dijit.layout.ContentPane" id="header" data-dojo-props="region:'top'"> Edit Hydrography </div> <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" style="width: 300px; overflow: hidden;"> <div id="templateDiv"> </div> <div id="editorDiv"> </div> </div> <div data-dojo-type="dijit.layout.ContentPane" id="map" data-dojo-props="region:'center'"> </div> <div dojotype="dijit.layout.ContentPane" id="leftPane" region="right" style="visibility: visible; width: 300px;"> <div dojotype="dijit.layout.ContentPane" id="legendPane" title="Lejant" selected="true"> <div data-dojo-type="dijit.layout.AccordionContainer"> <div data-dojo-type="dijit.layout.ContentPane" title="Tabakalar" selected="true"> <div id="tocDiv"> </div> </div> </div> </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.
