<!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>FeatureLayer On Demand</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } </style> <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"); dojo.require("dijit.form.Button"); dojo.require("dijit.Dialog"); var mapLayers = []; //array of layers in client map var map; function init() { var extent = new esri.geometry.Extent({"xmin":-96.6063,"ymin":38.3106,"xmax":-96.4764, "ymax":38.3689,"spatialReference":{"wkid":4269}}); map = new esri.Map("map", { extent: esri.geometry.geographicToWebMercator(extent)}); dojo.connect(map, "onLoad", initOperationalLayer); var imagery = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"); map.addLayer(imagery); mapLayers.push(imagery); } function initOperationalLayer(map) { var content = "<b>Type</b>: ${ftype}" + "<br /><b>Code</b>: ${fcode}"; var infoTemplate = new esri.InfoTemplate("Rivers", content); var featureLayer = new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Hydrography/Watershed173811/FeatureServer/1",{ mode: esri.layers.FeatureLayer.MODE_ONDEMAND, outFields: ["*"], infoTemplate: infoTemplate }); map.addLayer(featureLayer); map.infoWindow.resize(150,105); mapLayers.push(featureLayer); //this client side map layer is the maps graphics layer } function layerVisibility(layer) { console.log('clicked button ', layer.opacity); if (layer.visible) { fader(layer, 0.9, 'out'); } else { fader(layer, 0, 'in'); } } function fader(layer, op, dir) { if (dir == 'out') { if (op > 0) { // fading out layer.setOpacity(op.toFixed(1)); op-=0.1; setTimeout(function() { fader(layer, op, dir); }, 50); } else { // fade out finished layer.hide(); } } else if (dir == 'in') { if ( ! layer.visible ) { layer.show(); } if (op < 1) { // fading in layer.setOpacity(op.toFixed(1)); op+=0.1; setTimeout(function() { fader(layer, op, dir); }, 50); } } } dojo.ready(init); </script> </head> <body class="claro"> <div style="position:relative;width:100%;height:100%;"> <div id="map" style="border:1px solid #000;width:100%;height:100%;"> <div style="position:absolute; left:100px; top:10px; z-Index:999;"> <button dojoType="dijit.form.Button" onClick="layerVisibility(mapLayers[0]);">Imagery Cached Base Map</button> <button dojoType="dijit.form.Button" onClick="layerVisibility(mapLayers[1]);">Hydrography Operational Graphics Layer</button> </div> </div> </div> </body> </html>
Is it possible to fade a layer on/off smoothly, rather than simply showing/hiding?Thanks,Steve
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.