描述:此示例显示了如何读取地图和图层属性和报告的信息返回给用户
在线演示:http://help.arcgis.com/en/webapi/javascript/arcgis/samples/map_showproperties/index.html
引用联接:http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm
代码分析如下:
<!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,IE=9" /> <!--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>ArcGIS JavaScript API Map Layer</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css" /> <style> html, body { height: 98%; width: 98%; margin: 0; padding: 5px; } </style> <script type="text/javascript">var djConfig = {parseOnLoad: true};</script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=3.2"></script> <script type="text/javascript"> //导入包 dojo.require("esri.map"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); var map, basemap, transportation, census; function init() { map = new esri.Map("map"); basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/TaxParcel/AssessorsBasemap/MapServer"); map.addLayer(basemap); transportation = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/ESRI_Transportation_World_2D/MapServer", {"id":"agoreference", "opacity":0.5}); map.addLayer(transportation); census = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer", {"id":"census","opacity":0.5}); map.addLayer(census); dojo.connect(map, 'onLoad', function(theMap) { // 窗格中显示详细的地图信息 // 层细节 var content = ""; var layerInfo = []; // 图层数组,用于显示 dojo.forEach(map.layerIds,function(id){ // 遍历 TiledMapServiceLayers 和 DynamicMapServiceLayers 添加到地图中的数组 var layer = map.getLayer(id); layerInfo.push("id: " + layer.id + " visible(): " + layer.visible + " opacity(透明度): " + layer.opacity + "<br />"); }); var sr = "Spatial Reference(空间参考): " + map.spatialReference.wkid + "<br />"; var size = "Width(宽): " + map.width + " Height(高): " + map.height + "<br />"; // 获得尺度细节 var tileInfo = basemap.tileInfo; //包含ArcGISTiledMapServiceLayer的切片方案信息 var scales = []; dojo.forEach(tileInfo.lods,function(lod){ var level = lod.level; var scale = lod.scale; resolution = lod.resolution; scales.push( "level(深度): " + level + " scale(刻度): " + scale + " resolution(分辨率): " + resolution + "<br />"); }); dojo.byId('rightPane').innerHTML = "<b>Layers(层):</b><br />" + layerInfo.join("") + "<b>Spatial Reference(空间参考):</b> <br /> " + sr + "<b>Map Size(地图尺寸):</b> <br />" + size + "<b>Scales(刻度):</b><br />" + scales.join(""); //当浏览器调整,调整地图的大小 dojo.connect(dijit.byId('map'), 'resize', map,map.resize); }); } 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="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;"> </div> <div id="rightPane" style="height:200px;" dojotype="dijit.layout.ContentPane" region="bottom"> </div> </div> </body> </html>
效果如下:
未经允许请勿转载:程序喵 » ArcGIS For JavaScript API Show map properties —— 显示地图信息