ArcGIS For JavaScript API Specify LODs (levels of detail 깊이 에 대한 자세 한 정보) -- (14)

설명:
     슬라이더 깊이 의 Lable 값 을 자세히 추적 하여 표시 합 니 다. 눈금 단계 에 따라 통과 하지 않 는 lable 을 표시 합 니 다.
 
온라인 데모:http://help.arcgis.com/en/webapi/javascript/arcgis/samples/map_switch_layer_on_zoom/index.html
참조 링크:http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/map_switch_layer_on_zoom
 
코드 분석 은 다음 과 같 습 니 다. 
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <title>               </title>
    
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
    
    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>
    <script>
      dojo.require("esri.map");		//    

      var customLods = [];
      var loadCount = 0;	
      var map, esriImageryLayer, esriStreetLayer;

      //              0 - 11.  
      //     11 - 15           。
      // 
      //              11。

      function init() {
        // ESRI imagery from ArcGIS Online, only levels 0 - 11 used here
        esriImageryLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer", {
          displayLevels : [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]	//     
        });
		
        if (esriImageryLayer.loaded) {
          addLods(esriImageryLayer);
        } else {
          dojo.connect(esriImageryLayer, "onLoad", addLods);
        }

        // ESRI Street Map service, only levels 11 - 15 used here
        esriStreetLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer", {
          displayLevels : [11, 12, 13, 14, 15 ],	//     
          opacity : 0.75	//    
        });
        
        // Levels at which this layer will be visible
        if (esriStreetLayer.loaded ) {
          addLods(esriStreetLayer);
        } else {
          dojo.connect(esriStreetLayer, "onLoad", addLods);
        }
      }

      //             
      function addLods(lyr) {
		  //   ArcGISTiledMapServiceLayer tiling    。TileInfo      。               。
        customLods = customLods.concat(lyr.tileInfo.lods);	
        loadCount++;
        if (loadCount === 2) {
          initMap();
        }
      }

      //    ,             
      function initMap() {
        map = new esri.Map("map", {	
          center: [-81.1, 34.93],	//        .  ,       ( ,[-98,40])   esri.geometry.Point       。
          zoom: 9,	//          。         ,             。
          lods : customLods
        });
        dojo.connect(map, "onExtentChange", changeScale); //             
        map.addLayer(esriImageryLayer);
        map.addLayer(esriStreetLayer);
      }

      //           
      function changeScale(extent, delta, outLevelChange, outLod) {
        dojo.byId("scale").innerHTML = "  : <i>" + outLod.level;
        // console.log(outLod.level);
        if (outLod.level < 11) {
          dojo.byId("visibleLayer").innerHTML = "Layer: <i>  </i>";
        } else if (outLod.level == 11) {
          //        
          dojo.byId("visibleLayer").innerHTML = "<i>       </i>";
        } else {
          dojo.byId("visibleLayer").innerHTML = "Layer: <i>  </i>";
        }
      }

      dojo.ready(init);	  //        
    </script>
  </head>
  <body>
    <div id="map" class="claro" style="position:relative; width:600px; height:400px; border:2px solid #666;">
      <span id="scale" style="position:absolute; left:30px; bottom:30px; z-index:100; color:yellow; font-size: 150%;"></span>
      <span id="visibleLayer" style="position:absolute; left:30px; bottom:5px; z-index:100; color:yellow; font-size: 150%;"></span>
    </div>
    <p>
             .
    </p>
  </body>
</html>

 
 효 과 는 다음 과 같 습 니 다:
 
  ArcGIS For JavaScript API Specify LODs (levels of detail深度的详细信息)————(十四)_第1张图片
 
 
 
 

좋은 웹페이지 즐겨찾기