In a Webgis system, it is often possible to switch between graphs, such as the switching of operational layers, and the switchover of basemaps, and so on, which can be achieved by controlling the visibility of the layers. For example, by setting the layer's opacity ,visible to control, a few days ago when chatting with a netizen to mention a such demand if the map switch when adding a transition effect, so that the effect of change does not appear stiff. Write a word about my idea of realization.
Let's take a look at the effect. Demo Link Http://cdpn.io/xsiub
If this function is in normal web development, the result of two HTML elements such as DIV to achieve a gradual transition of the effect, we will first think of using a framework such as jquery or Dojo to solve, these frameworks have some animation in the way to achieve, you can try to use this idea on the map. The first thing you should know is that the images in the map are hosted by HTML elements. Each layer is wrapped by a Div, and a developer tool to view the map's composition is as follows. (Click the picture to see a larger image)you can see that each layer is wrapped by a div, and if you set the transparency of the outermost div, the map included will also change to the corresponding transparency. So far, the solution is basically clear: find the div for each layer, and then dynamically change the transparency of the corresponding div within the animation. Next, the code is implemented.
- <! DOCTYPE html>
- <meta charset= "UTF-8" >
- <link rel= "stylesheet" type= "Text/css" >
- <style>
- HTML, body, #map {
- width:100%;
- height:100%;
- margin:0;
- padding:0;
- Overflow-y:hidden;
- Background-color: #DBD7D0;;
- font-family: "Trebuchet MS";
- }
- </style>
- <title>
- </title>
- <body>
- <div id= "Map" >
- <button id= "Switchbasemap" style= "position:absolute;z-index:1;left:100px;top:20px;height:30px;" > Toggle Basemaps </button>
- </div>
- </body>
- <script src= "http://js.arcgis.com/3.7/" ></script>
- <script src= "App.js" ></script>
Copy CodeThe code above mainly introduces the JavaScript API of ArcGIS and the corresponding CSS, and adds a button to trigger the switch event of the map. in the JS code to solve the main 2 questions, 1, how to get the div element hosting the Layer 2, if the implementation of the animation. By the discovery just now, the div that wraps the layer above has a fixed ID, with this ID, can be easily obtained by document.getElementById or Dojo's own Dojo.byid. If you are using the latest API of 3.7, call the new GetNode method to get the div. The animation effect can be achieved using Animateproperty in Dojo/_base/fx in Dojo (the corresponding $.animate can be used in jquery).
The key code is as follows (please download the full code address for the specific code:http://codepen.io/kunkun/share/zip/xsiub )
- Basefx.animateproperty ({
- Node:colorfullbasemapdiv,
- duration:1000,
- Properties: {opacity:0},
- Onend:function () {
- Colorfullbasemapdiv.style.display= "None";
- graybasemapdiv.style.display= "Block";
- Basefx.animateproperty ({
- duration:1000,
- Node:graybasemapdiv,
- Properties: {opacity:1}
- }). Play ();
- }
- }). Play ();
Copy Code
Summary: By controlling the parcel layer div to achieve the effect of the gradient, this way can also add a filter to the map function, by obtaining a map of the DIV set corresponding CSS familiar. According to the guidance of this idea, in the future development, if you encounter the API does not support the function, you can try this control native HTML to solve.
This article is reproduced from the Esri China community, only collection not personally tried
ArcGIS API for Javascript layer toggle gradient effect implementation
