ArcGIS api for javascript——地图配置-增加标注到滑动器

描述

ArcGISTiledMapServiceLayer，这意味着图层有一个在明确的比例的预先渲染的地图切片的 cache。能够从 tileInfo属性获得图层的的缓存比例数组。这是本例中标注如何被得到。在下面的代码中，记得"lods"是"levels of detail"。

var lods = layer.tileInfo.lods;
for (var i=0, il=lods.length; i<il; i++) {
  labels[i] = lods[i].scale;
}

构建这个比例等级的数组后，通过esriConfig中的sliderLabel.labels将比例等级数组应用为标注很容易的。

esriConfig.defaults.map.sliderLabel = {
  ...
  labels: labels,
  ...
};


 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html>
 3   <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 5     <meta http-equiv="X-UA-Compatible" content="IE=7" />
 6     <title>增加标注到滑动器</title>
 7     <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/1.5/js/dojo/dijit/themes/tundra/tundra.css">
 8     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.5"></script>
 9     <script type="text/javascript"> 
10    
11         dojo.require("esri.map");
12         function init() {
13             var layer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_Imagery_World_2D/MapServer");
14         
15              if(layer.loaded) {
16           
17                  initMap(layer);
18              }else {
19               
20               dojo.connect(layer,"onLoad",initMap);
21              }
22         }
23         
24         function initMap(layer) {
25         
26            //增加自定义注标器
27            //用层的缩放来展示滑动器类别
28             var labels = [];           
29             var lods = layer.tileInfo.lods;
30             
31             alert(lods.length);
32             for(var i=0,j=lods.length;i<j;i++) {
33                 labels[i] = lods[i].scale;
34             
35             }
36             esriConfig.defaults.map.sliderLabel = {
37             tick:0,
38             labels:labels,
39             style:"width:2em;font-family:Verdana;font-size:65%;color:#fff;padding-left:2px;"
40             
41             };
42             
43             var map = new esri.Map("map");
44             map.addLayer(layer);
45         
46         }
47         dojo.addOnLoad(init); 
48         
49       
50         
51     </script>
52   </head>
53    <body class="tundra">
54     <div id="map" style="width:1024px; height:512px; border:1px solid #000;"></div>
55   </body>
56 </html>
57  
58

 

posted @ 2017-03-13 11:30  xiaotian_小天  Views(1290)  Comments(0)  Edit  收藏  举报