nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Gradient effect when turn on/off layers

XintaoLiu

Is it possible to implement the gradient effect when turn on/off a layer by using ArcGIS API for flex? Thanks!

Vind meer berichten getagd met

Accepted answers

DasaPaddock

Here's an example that uses the Fade effect to animate the alpha property of a layer.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/effects/Fade.html

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"                xmlns:s="library://ns.adobe.com/flex/spark"                xmlns:esri="http://www.esri.com/2008/ags">      <fx:Script>         <![CDATA[             private function visibleCheckBox_clickHandler(event:MouseEvent):void             {                 if (visibleCheckBox.selected)                 {                     fadeInEffect.end();                     fadeInEffect.play();                 }                 else                 {                     fadeOutEffect.end();                     fadeOutEffect.play();                 }             }         ]]>     </fx:Script>      <fx:Declarations>         <s:Fade id="fadeInEffect"                 alphaFrom="0"                 alphaTo="1"                 effectEnd="imageLayer.visible = true"                 target="{imageLayer}"/>         <s:Fade id="fadeOutEffect"                 alphaFrom="1"                 alphaTo="0"                 effectEnd="imageLayer.visible = false"                 target="{imageLayer}"/>     </fx:Declarations>      <s:controlBarContent>         <s:CheckBox id="visibleCheckBox"                     click="visibleCheckBox_clickHandler(event)"                     label="Image layer visibility"                     selected="{imageLayer.visible}"/>     </s:controlBarContent>      <esri:Map>         <esri:extent>             <esri:Extent xmin="-13486000" ymin="5713000" xmax="-13200000" ymax="5823000">                 <esri:SpatialReference wkid="102100"/>             </esri:Extent>         </esri:extent>         <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"/>         <esri:ArcGISImageServiceLayer id="imageLayer"                                       noData="0"                                       url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Portland/CascadeLandsat/ImageServer"/>     </esri:Map>  </s:Application>

All comments

XintaoLiu

Thanks! It works good.

DasaPaddock

Here's an example that uses the Fade effect to animate the alpha property of a layer.
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/effects/Fade.html

<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"                xmlns:s="library://ns.adobe.com/flex/spark"                xmlns:esri="http://www.esri.com/2008/ags">      <fx:Script>         <![CDATA[             private function visibleCheckBox_clickHandler(event:MouseEvent):void             {                 if (visibleCheckBox.selected)                 {                     fadeInEffect.end();                     fadeInEffect.play();                 }                 else                 {                     fadeOutEffect.end();                     fadeOutEffect.play();                 }             }         ]]>     </fx:Script>      <fx:Declarations>         <s:Fade id="fadeInEffect"                 alphaFrom="0"                 alphaTo="1"                 effectEnd="imageLayer.visible = true"                 target="{imageLayer}"/>         <s:Fade id="fadeOutEffect"                 alphaFrom="1"                 alphaTo="0"                 effectEnd="imageLayer.visible = false"                 target="{imageLayer}"/>     </fx:Declarations>      <s:controlBarContent>         <s:CheckBox id="visibleCheckBox"                     click="visibleCheckBox_clickHandler(event)"                     label="Image layer visibility"                     selected="{imageLayer.visible}"/>     </s:controlBarContent>      <esri:Map>         <esri:extent>             <esri:Extent xmin="-13486000" ymin="5713000" xmax="-13200000" ymax="5823000">                 <esri:SpatialReference wkid="102100"/>             </esri:Extent>         </esri:extent>         <esri:ArcGISTiledMapServiceLayer url="http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer"/>         <esri:ArcGISImageServiceLayer id="imageLayer"                                       noData="0"                                       url="http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Portland/CascadeLandsat/ImageServer"/>     </esri:Map>  </s:Application>

XintaoLiu

Where you want that effect, Can you please provide further detail or snapshot of what you want to achieve.

Thanks for your reply! What I meant is when you turn on a layer in Flex, it slowly shows up; when you turn off a layer, it slowly disappears. It sounds like the effect in slides.

omega_cancer

Where you want that effect, Can you please provide further detail or snapshot of what you want to achieve.

XintaoLiu

Is it possible to implement the gradient effect when turn on/off a layer by using ArcGIS API for flex? Thanks!

Any of your comments are highly anticipated and appreciated.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.