ArcGIS API 4.x for JS Layer Management Chapter

In this paper, the basic map loading and two or three-D mode switching are implemented, and the content of this article is the Layer management control, which is implemented from two different angles, which are directly bound to ArcGIS The Layer Management widget (layerlist) provided by the API and the click events of the custom Layer management icon control the hiding or display of the layer. Whether layerlist or custom icons are clicked to manage the implementation of the layer, the core is controlled by setting true or false based on the properties visible of the layer.

first, talk about the understanding of the names of several professional terms which I think are more important: 1.TileLayer

Tilelayer, loading the tile layer of the cached map service, caches the service to access the tiles in the cache instead of dynamically drawing the image. Because of the caching mechanism, the rendering speed is much faster than the mapimagelayers, which is suitable for overlay tiles, rather than the front-end dynamic rendering.

2.MapImageLayer

Mapimagelayer, which allows the display and analysis of data in a map service definition layer, outputs an image instead of a feature. Map service images are generated dynamically on request.

3. Elevationlayer

Elevationlayer, which is the layer that loads the terrain elevation, is displayed in three-dimensional mode.

4. Scenelayer

Scenelayer, which is to load a three-dimensional scene layer, the app is displayed in three-dimensional mode.

5. Layerlist

Layerlist, a layer list control control, provides a way to display a list of layers and to provide a control layer to hide or display.

Second, Layerlist concrete realization idea: 1. Several types of layers described above have a property listmode, the default show, that is, these layers are superimposed on the map, the default is in the Layerlist, if Layerlist created

2. To Configure layer information:

/*Layer Configuration*/mapconfig.feconomic_sublayers=[{ID:35,title: "Administrative divisions", Visible:false, sublayers:[{id:38,title: "City Boundary", Visible:false},{id:37,title: "Provincial Boundaries", visible:true}]}, {ID:28,title: "Ocean Planning", Visible:true, sublayers:[{id:34,title: "Coastal basic Function area", Visible:true},{id:33,title: "Economic Cooperation Circle", visible:true},{id:32,title: "Economic development Zone", visible:true},{id:31,title: "Economic Bay Area", Visible:true},{id:30,title: "Economic Island Group", Visible:true}]}, {ID:27,title: "Maritime ownership", visible:false}, {ID:24,title: "Shoreline Resources", Visible:false, sublayers:[{id:26,title: "Coastal Zone", visible:true},{id:25,title: "Shore Line", Visible:true}]}, {ID:14,title: "Marine ecological Protection", visible:false, sublayers:[{ID:23,title: "Marine functional Zoning", visible:true}, {ID:22,title: "Restricted development Zone", visible:true}, {ID:21,title: "Forbidden Zone", visible:true}, {ID:18,title: "Marine Nature Reserve", Visible:true, Sublayers:[{id:20,title: "Marine Nature Reserve", Visible:true},{id:19,title: "Marine nature Reserve Point", visible:true}]}, {ID:15,title: "Marine Special Protected Area", Visible:true, Sublayers:[{id:17,title: "Marine Special Protected Area", Visible:true},{id:16,title: "Special marine Sanctuary Point", Visible:true}]}]}, {ID:9,title: "Fishery Resources", Visible:false, sublayers:[//{id:13,title: "Fishery Resources", visible:false},{id:12,title: "Fishery", Visible:true}, {ID:11,title: "Fishing zones", visible:true}, {ID:10,title: "Fishing port", visible:true}]}, {ID:8,title: "Geological drilling", Visible:false}, {ID:7,title: "Observatory", Visible:false}, {ID:6,title: "Island", Visible:false}, {ID:2,title: "Marine resources", Visible:false, sublayers:[{ID:5,title: "Other resources", visible:true}, {ID:4,title: "Oil Resources", Visible:true}, {ID:3,title: "Mineral Resources", Visible:true}                                                  ]},    //{id:1,title: "Ocean Enterprise", visible:false},{id:0,title: "video surveillance", Visible:false}];

3. Layer Creation:

                    varWaterdepthlayer =NewTilelayer ({url:MapConfig.waterdepthLayerUrl, title:"Water depth Grid map", opacity:0.45, Visible:false, ID:"Basemapwater"                       }); varWaterlayer =NewMapimagelayer ({url:MapConfig.waterLayerUrl, title:Chlorophyll, opacity:0.45, Visible:false, ID:"Basemapwater"                       }); varFeconomiclayer =NewMapimagelayer ({url:MapConfig.FEconomiclayerUrl,Title: "Thematic Layer", Visible:true, sublayers:MapConfig.feconomic_sublayers}); varElevationlayer =NewElevationlayer ({url:MapConfig.elevationLayer.Url}); varMap = BX. Mapvars.map =NewMap ({Basemap:imgbasemap,Layers:[waterdepthlayer,hdyxlayer,waterlayer,feconomiclayer],GroundNewGround ({Layers:[elevationlayer,hddxlayer]});

4. layerlist Create:

         //Layer Controllermappage.loadswitcherlayers (Appconfig.mapview,appconfig.sceneview); /** * Layer Controller*/loadswitcherlayers:function(Mapview,sceneview) {require (["Esri/widgets/layerlist"                   ], function(layerlist) {Mapview.then (function() {//Two-dimensional mode                      varLayerlist =Newlayerlist ({view:mapview,                      }); MapView.ui.add (Layerlist,"Bottom-right");                }); Sceneview.then (function() {//three-dimensional mode                      varLayerlist =Newlayerlist ({view:sceneview}); SceneView.ui.add (Layerlist,"Bottom-right");                            });                    }); },

5. as follows:

Three, custom icon Click event Management Layer Concrete implementation ideas: 1. Page Design:

    <div id= "Tuceng_center" > <ul> <li id= "Dynamic_0" > <div class= "tu Cicon tucicon1 "></div> <p> video surveillance </p> </li> <li id=" Dynami            C_2 "> <div class=" Tucicon tucicon2 "></div> <p> Marine resources </p>                </li> <li id= "Dynamic_6" > <div class= "Tucicon tucicon3" ></div> <p> Islands </p> </li> <li id= "dynamic_7" > <div class= "TUC Icon Tucicon4 "></div> <p> Observatory </p> </li> <li id=" Dynamic_ 8 "> <div class=" Tucicon tucicon5 "></div> <p> Geo drilling </p> &                lt;/li> <li id= "Dynamic_9" > <div class= "Tucicon tucicon6" ></div> <p> Fishery Resources </p> </li> <li id= "dynamic_14" > <div class= "Tucicon tucicon7" ></                Div> <p> Marine Ecosystem Protection </p> </li> <li id= "dynamic_24" >            <div class= "Tucicon tucicon8" ></div> <p> shoreline Resources </p> </li> <li id= "dynamic_27" > <div class= "Tucicon tucicon9" ></div> <p> Maritime ownership </p> </li> <li id= "dynamic_28" class= "selected" > <div class= "TUC Icon Tucicon10 "></div> <p> Marine Planning </p> </li> <li id=" Dynami            C_35 "> <div class=" Tucicon tucicon11 "></div> <p> Administrative divisions </p>                </li> <li id= "Tile_0" > <div class= "Tucicon tucicon12" ></div> <p>3d Scene </p> </li> <li id= "tile_2" > <div class= "Tucicon tucicon14" ></d Iv> <p>3d Waterway </p> </li> <li id= "Tile_1" > < Div class= "Tucicon tucicon13" ></div> <p> bathymetric grid </p> </li> </u L> </div>

2. Click events:

//Layer Control Click event Monitoring$ ("#tuceng_center ul li"). Click (function(){                        $( This). Toggleclass (' selected '); varFlag =false; if($( This). attr ("class") = = "Selected") {flag=true; }Else{flag=false; }                       varID = $ ( This). attr ("id"); if(Id.indexof ("dynamic") >-1)//Dynamic Layer Control{ID= Id.split ("_") [1]; if(Feconomiclayer) Feconomiclayer.findsublayerbyid (number (ID)). Visible=Flag; }Else{//Tile Bottom Chart Controlid = Id.split ("_") [1]; Switch(ID) { Case"0"://3D Scene                                if(mappage.scenelayer) mapPage.sceneLayer.visible=Flag;  Break;  Case"1"://Depth Grid Chart                               if(waterdepthlayer) waterdepthlayer.visible=Flag;  Break;  Case"2"://3D Waterway                               if(hdyxlayer) {hdyxlayer.visible=Flag; }                               if(hddxlayer) {hddxlayer.visible=Flag; }                                Break; }                       }                                             })

3. as follows:

ArcGIS API 4.x for JS Layer Management Chapter