<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <!--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>change feature layer selection color on the fly</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css"> <script type="text/javascript">djConfig = { parseOnLoad:true };</script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script> <script type="text/javascript"> dojo.require("esri.map"); dojo.require("esri.layers.FeatureLayer"); var selectionToolbar, featureLayer; var syms = {} var selectionToolbar2, featureLayer2; var syms2 = {} function init() { // populate the object used to set the // feature layer selection symbol syms.red = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255,0,0,0.5])); syms.blue = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([0,0,255,0.5])); syms.green = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([0,255,0,0.5])); syms2.red = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([255,0,0,0.5])); syms2.blue = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0,0,255,0.5])); syms2.green = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0,255,0,0.5])); var initialExtent = new esri.geometry.Extent(-97.5328,37.4344,-97.2582,37.64041, new esri.SpatialReference({wkid:4326}) ); var map = new esri.Map("map", { extent: esri.geometry.geographicToWebMercator(initialExtent), slider: true, nav: true }); dojo.connect(map, "onLoad", initSelectToolbar); dojo.connect(map, "onLoad", initSelectToolbar2); var baseMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"); map.addLayer(baseMapLayer); var content = "<b>Status</b>: ${STATUS}" + "<br><b>Cummulative Gas</b>: ${CUMM_GAS} MCF" + "<br><b>Total Acres</b>: ${APPROXACRE}" + "<br><b>Avg. Field Depth</b>: ${AVG_DEPTH} meters"; var infoTemplate = new esri.InfoTemplate("${FIELD_NAME}", content); featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",{ mode: esri.layers.FeatureLayer.MODE_ONDEMAND, infoTemplate: infoTemplate, outFields: ["*"] }); featureLayer.setDefinitionExpression("PROD_GAS='Yes'"); featureLayer.setSelectionSymbol(syms[dojo.byId('color-select').value]); dojo.connect(featureLayer, "onSelectionClear", function(features) { }); //* // connect to the drop-down's onchange event and // change the feature layer's selection color dojo.connect(dojo.byId('color-select'), 'onchange', function(evt) { featureLayer.setSelectionSymbol(syms[evt.target.value]); }); //*/ map.addLayer(featureLayer); featureLayer2 = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/0",{ mode: esri.layers.FeatureLayer.MODE_ONDEMAND }); featureLayer2.setDefinitionExpression("FIELD_NAME is not null"); featureLayer2.setSelectionSymbol(syms2[dojo.byId('color-select2').value]); dojo.connect(featureLayer2, "onSelectionClear", function(features) { }); //* // connect to the drop-down's onchange event and // change the feature layer's selection color dojo.connect(dojo.byId('color-select2'), 'onchange', function(evt) { featureLayer2.setSelectionSymbol(syms2[evt.target.value]); }); //*/ map.addLayer(featureLayer2); } function initSelectToolbar(map) { selectionToolbar = new esri.toolbars.Draw(map); var selectQuery = new esri.tasks.Query(); dojo.connect(selectionToolbar, "onDrawEnd", function(geometry) { selectionToolbar.deactivate(); selectQuery.geometry = geometry; featureLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_ADD); }); } function initSelectToolbar2(map) { selectionToolbar2 = new esri.toolbars.Draw(map); var selectQuery2 = new esri.tasks.Query(); dojo.connect(selectionToolbar2, "onDrawEnd", function(geometry) { selectionToolbar2.deactivate(); selectQuery2.geometry = geometry; featureLayer2.selectFeatures(selectQuery2, esri.layers.FeatureLayer.SELECTION_ADD); }); } dojo.addOnLoad(init); </script> </head> <body class="claro"> <select id="color-select"> <option>red</option> <option>blue</option> <option>green</option> </select> <button dojoType="dijit.form.Button" onClick="selectionToolbar.activate(esri.toolbars.Draw.EXTENT);">Select Fields</button> <button dojoType="dijit.form.Button" onClick="featureLayer.clearSelection();">Clear Selection</button><br> <select id="color-select2"> <option>red</option> <option>blue</option> <option>green</option> </select> <button dojoType="dijit.form.Button" onClick="selectionToolbar2.activate(esri.toolbars.Draw.EXTENT);">Select Fields</button> <button dojoType="dijit.form.Button" onClick="featureLayer2.clearSelection();">Clear Selection</button> <div id="map" style="position: relative; width:700px; height:500px; border:1px solid #000;"></div> <span id="messages"></span> </body> </html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=7" /> <!--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>change feature layer selection color on the fly</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css"> <script type="text/javascript">djConfig = { parseOnLoad:true };</script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script> <script type="text/javascript"> dojo.require("esri.map"); dojo.require("esri.layers.FeatureLayer"); var selectionToolbar, featureLayer; var syms = {} function init() { // populate the object used to set the // feature layer selection symbol syms.red = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([255,0,0,0.5])); syms.blue = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([0,0,255,0.5])); syms.green = new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([0,255,0,0.5])); var initialExtent = new esri.geometry.Extent(-97.5328,37.4344,-97.2582,37.64041, new esri.SpatialReference({wkid:4326}) ); var map = new esri.Map("map", { extent: esri.geometry.geographicToWebMercator(initialExtent), slider: true, nav: true }); dojo.connect(map, "onLoad", initSelectToolbar); var baseMapLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"); map.addLayer(baseMapLayer); var content = "<b>Status</b>: ${STATUS}" + "<br><b>Cummulative Gas</b>: ${CUMM_GAS} MCF" + "<br><b>Total Acres</b>: ${APPROXACRE}" + "<br><b>Avg. Field Depth</b>: ${AVG_DEPTH} meters"; var infoTemplate = new esri.InfoTemplate("${FIELD_NAME}", content); featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Petroleum/KSPetro/MapServer/1",{ mode: esri.layers.FeatureLayer.MODE_ONDEMAND, infoTemplate: infoTemplate, outFields: ["*"] }); featureLayer.setDefinitionExpression("PROD_GAS='Yes'"); featureLayer.setSelectionSymbol(syms[dojo.byId('color-select').value]); dojo.connect(featureLayer, "onSelectionComplete", sumGasProduction); dojo.connect(featureLayer, "onSelectionClear", function(features) { dojo.byId('messages').innerHTML = "<i>No Selected Fields</i>"; }); //* // connect to the drop-down's onchange event and // change the feature layer's selection color dojo.connect(dojo.byId('color-select'), 'onchange', function(evt) { featureLayer.clearSelection(); featureLayer.setSelectionSymbol(syms[evt.target.value]); }); //*/ map.addLayer(featureLayer); } function initSelectToolbar(map) { selectionToolbar = new esri.toolbars.Draw(map); var selectQuery = new esri.tasks.Query(); dojo.connect(selectionToolbar, "onDrawEnd", function(geometry) { selectionToolbar.deactivate(); selectQuery.geometry = geometry; featureLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW); }); } function sumGasProduction(features) { var productionSum = 0; //summarize the cummulative gas production to display dojo.forEach(features, function(feature) { productionSum = productionSum + feature.attributes.CUMM_GAS; }); dojo.byId('messages').innerHTML = "<b>Selected Fields Production: " + productionSum + " mcf. </b>"; } dojo.addOnLoad(init); </script> </head> <body class="claro"> <button dojoType="dijit.form.Button" onClick="selectionToolbar.activate(esri.toolbars.Draw.EXTENT);">Select Fields</button> <button dojoType="dijit.form.Button" onClick="featureLayer.clearSelection();">Clear Selection</button><br> <select id="color-select"> <option>red</option> <option>blue</option> <option>green</option> </select> <div id="map" style="position: relative; width:700px; height:500px; border:1px solid #000;"></div> <span id="messages"></span> </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.
