注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

程序员驿站

淘宝店:http://shop106888457.taobao.com

 
 
 

日志

 
 

ArcGIS For JavaScript APi Map with scalebar(地图比例尺 内/外)  

2014-06-07 10:42:07|  分类: Javascript(ArcGi |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 
 
 

(1)内部比例尺

此示例演示如何添加一个比例尺地图可以被添加到地图在一个用户指定的位置比例尺下面的代码片段显示了默认的比例尺显示在地图左下角

var scalebar=new esri.dijit.Scalebar({
  map
: map
});

您可以修改该位置地图设置attachTo选项之一以下值"top-right","bottom-right","top-center","bottom-center","bottom-left","top-left".

var scalebar=new esri.dijit.Scalebar({

  map:map,
  attachTo
:"bottom-left"
});

引用联接:http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/widget_scalebar

在线演示:http://help.arcgis.com/en/webapi/javascript/arcgis/samples/widget_scalebar/index.html

 

代码如下:

  1. <!DOCTYPE html>  
  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,IE=9">  
  6.     <!--The viewport meta tag is used to improve the presentation and behavior of the samples on iOS devices-->  
  7.     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">  
  8.     <title>Map with scalebar</title>  
  9.   
  10.     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">    
  11.     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">  
  12.     <style>    
  13.       html, body { height: 100%; width: 100%; margin: 0; padding: 0; }   
  14.       #map{padding:0;}   
  15.     </style>    
  16.   
  17.     <script>var dojoConfig = { parseOnLoad: true };</script>  
  18.     <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>  
  19.     <script>    
  20.       dojo.require("dojo.parser");   
  21.       dojo.require("dijit.layout.BorderContainer");   
  22.       dojo.require("dijit.layout.ContentPane");   
  23.       dojo.require("esri.map");   
  24.       dojo.require("esri.dijit.Scalebar");   
  25.       var map;   
  26.     
  27.       function init() {   
  28.         map = new esri.Map("map", {   
  29.           basemap: "topo",   
  30.           center: [-116.093, 34.218],   
  31.           zoom: 7   
  32.         });   
  33.   
  34.         dojo.connect(map, "onLoad", function(theMap) {   
  35.           var scalebar = new esri.dijit.Scalebar({   
  36.             map: map, // 必须的   
  37.             scalebarUnit: "english"  // 指定<STRONG>比例尺</STRONG>单位,有效值是"english" or "metric".默认"english"   
  38.           });   
  39.         });   
  40.       }   
  41.     
  42.       dojo.ready(init);  // 初始化加载   
  43.     </script>    
  44.   </head>    
  45.      
  46.   <body class="claro">    
  47.     <div data-dojo-type="dijit.layout.BorderContainer"    
  48.          data-dojo-props="design:'headline', gutters:false"  
  49.          >  
  50. <P>效果如下:<BR>  
  51. <IMG alt="" src="/images/loading.gif" original="http://cdn.verydemo.com/inc/test.jsp?url=http%3A%2F%2Fimg.my.csdn.net%2Fuploads%2F201301%2F14%2F1358152829_1486.png"> </P>  
  52. <P>(2)<STRONG>比例尺</STRONG>在外部</P>  
  53. <P> </P>  
  54. <P>参考联接:http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/widget_scalebarext</P>  
  55. <P>在线演示:http://help.arcgis.com/en/webapi/javascript/arcgis/samples/widget_scalebarExt/index.html</P>  
  56. <P> </P>  
  57. <BLOCKQUOTE dir=ltr>  
  58. <P> <SPAN>此示例演示如何</SPAN><SPAN>显示</SPAN><SPAN>一个</SPAN><SPAN><STRONG>比例尺</STRONG></SPAN><SPAN><STRONG>地图</STRONG>之外,</SPAN><SPAN></SPAN><SPAN>指定的位置</SPAN><SPAN></SPAN><SPAN>下面的代码片段</SPAN><SPAN>创建了一个新</SPAN><SPAN></SPAN><SPAN><STRONG>比例尺</STRONG></SPAN><SPAN>,并把</SPAN><SPAN></SPAN><SPAN></SPAN><SPAN><STRONG>比例尺</STRONG></SPAN><SPAN></SPAN><SPAN>构造</SPAN><SPAN>函数</SPAN><SPAN>中指定的</SPAN><SPAN>在div</SPAN><SPAN></SPAN></P>  
  59. <P><SPAN><SPAN>var</SPAN><SPAN> scalebar</SPAN><SPAN>=</SPAN><SPAN></SPAN><SPAN>new</SPAN><SPAN> esri</SPAN><SPAN>.</SPAN><SPAN>dijit</SPAN><SPAN>.</SPAN><SPAN>Scalebar</SPAN><SPAN>({</SPAN><SPAN><BR>  
  60.     map</SPAN><SPAN>:</SPAN><SPAN> map</SPAN><SPAN>,</SPAN><SPAN><BR>  
  61.     scalebarUnit</SPAN><SPAN>:</SPAN><SPAN></SPAN><SPAN>"metric"</SPAN><SPAN><BR>  
  62. </SPAN><SPAN>},</SPAN><SPAN> dojo</SPAN><SPAN>.</SPAN><SPAN>byId</SPAN><SPAN>(</SPAN><SPAN>"scalebar"</SPAN><SPAN>));</SPAN><SPAN></SPAN></SPAN></P>  
  63. </BLOCKQUOTE>  
  64. <P>代码如下:</P>  
  65. <PRE class=html name="code"><!DOCTYPE html>  
  66. <html>    
  67.   <head>    
  68.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  69.     <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">  
  70.     <!--The viewport meta tag is used to improve the presentation and behavior of the samples    
  71.       on iOS devices-->  
  72.     <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">  
  73.     <title>Scalebar</title>  
  74.   
  75.     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/dojo/dijit/themes/claro/claro.css">    
  76.     <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">  
  77.   
  78.     <script>var dojoConfig = { parseOnLoad: true };</script>  
  79.     <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>  
  80.     <script>    
  81.       dojo.require("dojo.parser");   
  82.       dojo.require("esri.dijit.Scalebar");   
  83.       dojo.require("esri.map");   
  84.   
  85.       var map;   
  86.     
  87.       function initialize() {   
  88.         map = new esri.Map("map", {   
  89.           basemap: "topo",   
  90.           center: [-116.093, 34.218],   
  91.           zoom: 7   
  92.         });   
  93.   
  94.         dojo.connect(map, "onLoad", function() {   
  95.           var scalebar = new esri.dijit.Scalebar({   
  96.             map: map,   
  97.             scalebarUnit: "english"   
  98.           }, dojo.byId("scalebar"));   
  99.         });   
  100.       }   
  101.     
  102.       dojo.ready(initialize);   
  103.     </script>    
  104.   </head>    
  105.      
  106.   <body class="claro">    
  107.     <div id="map" >  
  108. <P><BR>  
  109. 效果如图:</P>  
  110. <P><IMG alt="" src="/images/loading.gif" original="http://cdn.verydemo.com/inc/test.jsp?url=http%3A%2F%2Fimg.my.csdn.net%2Fuploads%2F201301%2F14%2F1358153578_6480.png"></P>  
  111. <P> </P>  
  112. <P>(3)问题:</P>  
  113. <P> 不知道什么原因,很多示例中都是第一次加载没问题,刷新页面时候不会再显示,比如这个<STRONG>比例尺</STRONG>也是一样,我用的是IE9浏览器</P>  
  114. <P> </P>  
  115. <P> </P>  
  116. <P> </P>  
  117. <P> </P>  
  118. <P> </P>  
  119.   
  120. </PRE>  
  评论这张
 
阅读(475)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017