ArcGIS For JavaScript APi Map with scalebar(地圖比例尺內/外)————（二十三）_

ArcGIS For JavaScript APi Map with scalebar(地圖比例尺內/外)————（二十三）__Java

最後更新：2018-07-26 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

（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"
});

查看原文：ArcGIS For JavaScript APi Map with scalebar —— 地圖比例尺

引用聯結：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

代碼如下：

<!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">    <!--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>Map with scalebar</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">    <style>       html, body { height: 100%; width: 100%; margin: 0; padding: 0; }      #map{padding:0;}    </style>     <script>var dojoConfig = { parseOnLoad: true };</script>    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>    <script>       dojo.require("dojo.parser");      dojo.require("dijit.layout.BorderContainer");      dojo.require("dijit.layout.ContentPane");      dojo.require("esri.map");      dojo.require("esri.dijit.Scalebar");      var map;       function init() {        map = new esri.Map("map", {          basemap: "topo",          center: [-116.093, 34.218],          zoom: 7        });        dojo.connect(map, "onLoad", function(theMap) {          var scalebar = new esri.dijit.Scalebar({            map: map, // 必須的            scalebarUnit: "english"  // 指定比例尺單位,有效值是"english" or "metric".預設"english"          });        });      }       dojo.ready(init);  // 初始化載入    </script>   </head>     <body class="claro">     <div data-dojo-type="dijit.layout.BorderContainer"          data-dojo-props="design:'headline', gutters:false"         style="width: 100%; height: 100%; margin: 0;">       <div id="map"            data-dojo-type="dijit.layout.ContentPane"            data-dojo-props="region:'center'"            style="overflow:hidden;">       </div>     </div>   </body> </html>

效果如下：

（2）比例尺在外部

參考聯結：http://help.arcgis.com/en/webapi/javascript/arcgis/jssamples/#sample/widget_scalebarext

線上示範：http://help.arcgis.com/en/webapi/javascript/arcgis/samples/widget_scalebarExt/index.html

此樣本示範如何顯示一個比例尺的地圖之外，在指定的位置。下面的程式碼片段建立了一個新的比例尺，並把它的比例尺的建構函式中指定的在div。

var scalebar=new esri.dijit.Scalebar({
map: map,
scalebarUnit:"metric"
}, dojo.byId("scalebar"));

代碼如下：

<!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">    <!--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>Scalebar</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>var dojoConfig = { parseOnLoad: true };</script>    <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/"></script>    <script>       dojo.require("dojo.parser");      dojo.require("esri.dijit.Scalebar");      dojo.require("esri.map");      var map;       function initialize() {        map = new esri.Map("map", {          basemap: "topo",          center: [-116.093, 34.218],          zoom: 7        });        dojo.connect(map, "onLoad", function() {          var scalebar = new esri.dijit.Scalebar({            map: map,            scalebarUnit: "english"          }, dojo.byId("scalebar"));        });      }       dojo.ready(initialize);    </script>   </head>     <body class="claro">     <div id="map" style="position: relative; width: 900px; height: 500px; border: 1px solid #000;"></div>    <div id="scalebar" style="position:absolute;left:100px;top:530px;"></div>  </body>  </html>

效果如圖：

（3）問題：

不知道什麼原因，很多樣本中都是第一次載入沒問題，重新整理頁面時候不會再顯示，比如這個比例尺也是一樣，我用的是IE9瀏覽器

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More