ArcGIS For JavaScript API Specify LODs (levels of detail深度的详细信息)————（十四）

最新推荐文章于 2021-08-22 21:15:04 发布

X-rapido

最新推荐文章于 2021-08-22 21:15:04 发布

阅读量3k

点赞数 1

分类专栏： ArcGIS Api For Javascript 文章标签： ArcGIS ForJavaScript ArcGIS二次开发

本文链接：https://blog.csdn.net/xiaokui_wingfly/article/details/8489005

版权

ArcGIS Api For Javascript 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

描述：

详细跟踪的显示滑块深度中的Lable值显示，根据刻度级别啦显示不通过的lable

查看原文：http://www.ibloger.net/article/372.html

在线演示：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>

效果如下：