Arcgis 图例 esri.dijit.legend Legend widget

最新推荐文章于 2022-11-06 20:50:38 发布

转载最新推荐文章于 2022-11-06 20:50:38 发布 · 3.2k 阅读

arcgis api for javascript 专栏收录该内容

4 篇文章

订阅专栏

本文演示如何使用LegendWidget创建地图图例，显示图层的符号和标签。通过此方法，用户可以自定义图例展示可见图层，并在切换图层可见性时更新图例。

转载自：http://maps.rosreestr.ru/arcgis_js_api/sdk/help/jssamples/widget_legendvisible.html

Legend widget

View live sample

Description

This sample shows how to use the Legend widget to build a legend that displays swatches and labels for the layers in the map. To create a new legend widget specify the map and the HTML element where the legend will display. Optionally you can provide a list of layers to display in the legend. If no layers are specified all the layers will display in the legend.

The right content pane of the application layout includes a dijit.layout.AccordionContainer. The accordion container contains a set of panes where the titles are always visible but the content is only visible for one pane at a time. The legend is displayed in one pane of the accordion container and a link that allows you to toggle the visibility of layers in the map is displayed in the other. Clicking the link to toggle the visibility of the layer will hide/show the layer and update the legend. Note that the snippet below does not include code to handle updating the legend, the legend widget takes care of this for us. The legend will always update when the visibility of a layer or sublayer is modified.

 function toggle(id) {
  var layer = map.getLayer(id);
  if (layer.visible) {
    layer.hide();
  } else {
    layer.show();
  }
}

Code

<!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>Updating the legend to display visible layers</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: 98%; width: 98%; margin: 0; padding: 5px; }
       #rightPane{
         width:20%;
       }
       #legendPane{
         border: solid #97DCF2 1px;
       }
      
     </style> 
     <script type="text/javascript">var 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("dijit.layout.BorderContainer");
       dojo.require("dijit.layout.ContentPane");
       dojo.require("dijit.layout.AccordionContainer");
       dojo.require("esri.map");
       dojo.require("esri.dijit.Legend");
       dojo.require("esri.arcgis.utils");
       dojo.require("dijit.form.CheckBox");
       
       var map;
       var legendLayers = [];
 
       function init() {
         var initialExtent = new esri.geometry.Extent({"xmin":-13133288,"ymin":4020012,"xmax":-13016186,"ymax":4090945,"spatialReference":{"wkid":102100}});
         map = new esri.Map("map", { extent: initialExtent});
         
         //Add the terrain service to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service    
         var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
         map.addLayer(basemap);
 
         var quakeLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/EarthquakesFromLastSevenDays/MapServer",{id:'quakes'});
 
         legendLayers.push({layer:quakeLayer,title:'Earthquakes'});
         
         var fireLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Fire/Sheep/MapServer",{id:'fire'});
 
         legendLayers.push({layer:fireLayer,title:"Fire"});
         dojo.connect(map,'onLayersAddResult',function(results){
           var legend = new esri.dijit.Legend({
             map:map,
             layerInfos:legendLayers
           },"legendDiv");
           legend.startup();
         });
         map.addLayers([fireLayer,quakeLayer]);
 
        dojo.connect(map,'onLayersAddResult',function(results){
 
         
         //add check boxes 
         dojo.forEach(legendLayers,function(layer){         
          var layerName = layer.title;
          var checkBox = new dijit.form.CheckBox({
             name: "checkBox" + layer.layer.id,
             value: layer.layer.id,
             checked: layer.layer.visible,
             onChange: function(evt) {
               var clayer = map.getLayer(this.value);
               if (clayer.visible) {
                 clayer.hide();
               } else {
                 clayer.show();
               }
               this.checked = clayer.visible;
             }
           });
 
           //add the check box and label to the toc
           dojo.place(checkBox.domNode,dojo.byId("toggle"),"after");
           var checkLabel = dojo.create('label',{'for':checkBox.name, innerHTML:layerName},checkBox.domNode,"after");
            dojo.place("<br />",checkLabel,"after");
         });
 
         });
         //resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in 
         //the following help topic for more details http://help.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_guidelines.htm       
         var resizeTimer;
         dojo.connect(map, 'onLoad', function(theMap) {
           dojo.connect(dijit.byId('map'), 'resize', function() {  //resize the map if the div is resized
             clearTimeout(resizeTimer);
             resizeTimer = setTimeout( function() {
               map.resize();
               map.reposition();
             }, 500);
           });
         });
       }
 
 
 
       dojo.addOnLoad(init);
     </script> 
   </head> 
   
   <body class="claro"> 
     <div id="content" dojotype="dijit.layout.BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;"> 
       <div id="rightPane" dojotype="dijit.layout.ContentPane" region="right">
         <div dojoType="dijit.layout.AccordionContainer">
           <div dojoType="dijit.layout.ContentPane" id="legendPane" title="Legend"  selected="true">
             <div id="legendDiv"></div>
           </div>
           <div dojoType="dijit.layout.ContentPane" title="Natural Disasters" >
             <span style="padding:10px 0;">Click to toggle the visibilty of the various natural disasters</span>
             <div id="toggle" style="padding: 2px 2px;"></div>
           </div>
         </div>
       </div>
       <div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;"> 
       </div> 
     </div> 
   </body> 
 
 </html>