上萹介紹了 ArcGIS Server for Javascript API Dojo 框架，接下來再回到 ESRI js 框架吧，
口白：
流動的水沒有形狀，漂流的風找不到蹤跡，任何案件的 Coding 都取決於心
唯一看透真相的是，外表看是卜朧共，智慧卻低於常人的 名卜朧共 刻爛
（謎之音：把 Code 刻到爛簡稱刻爛）
延續了前篇 [ArcGIS Server API for JavaScript] 利用 Dojo 框架建立功能選單 MenuBar ，
這次是在這篇的基礎上加入了 Scalebar
Html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"></link>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript">
</script>
<title>Map with MenuBar And scalebar</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css">
<!--<link href="../../Content/esri.css" rel="stylesheet" />-->
<script src="http://js.arcgis.com/3.12/"></script>
</head>
<body class="claro" expr:class='"loading" + data:blog.mobileClass' onload='prettyPrint();'>
<!-- MenuBar div#navMenu -->
<div data-dojo-type="dijit/MenuBar" id="navMenu">
<div data-dojo-type="dijit/PopupMenuBarItem">
<span>地圖</span>
<div data-dojo-type="dijit/DropDownMenu" id="mapMenu">
<div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){alert('地圖操作')}">地圖操作</div>
</div>
</div>
</div>
<!-- MenuBar div#navMenu -->
<div id="mapDiv"></div>
</body>
</html>
說明：1. 引用 CSS：claro.css、esri.css 引用參考位置如下：
<link rel="stylesheet" href="http://js.arcgis.com/3.12/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.12/esri/css/esri.css"> 為了中文化排版被擠壓 修改 CSS
2. 引用 Javascript 需插入 <script src="http://js.arcgis.com/3.12/"></script> 其中已包含了Dojo框架囉
3. <body> 標籤中 加入 class 樣式定義為 "claro" 如： <body class="claro">
4. 加入 div 區塊 當作 MenuBar，如：<div data-dojo-type="dijit/MenuBar" id="navMenu"></div>
5. 加入 div 區塊 當作 PopupMenuBarItem，將該物件放在 MenuBar Div 區塊內 如：
<div data-dojo-type="dijit/PopupMenuBarItem">
</div>
給該選單名稱，則是在 PopupMenuBarItem div 區塊 內加入 <span>地圖</span> 來定義
加入 div 區塊 當作 DropDownMenu，將該物件放在 PopupMenuBarItem Div 區塊內 如：
<div data-dojo-type="dijit/DropDownMenu" id="mapMenu">
</div>
加入 div 區塊 當作 MenuItem，將該物件放在 DropDownMenu Div 區塊內 如：
<div data-dojo-type="dijit/MenuItem" data-dojo-props="onClick:function(){alert('地圖操作')}">地圖操作</div>
6. 加入 div 區塊 當作地圖區塊，如：<div id="mapDiv"></div>
CSS:
.esriScalebarLabel.esriScalebarLineLabel.esriScalebarSecondNumber {
font-size: 11px;
position: absolute;
width: 50%;
text-align: center;
color: #666666;
font: Verdana;
font-weight: bolder;
height: 5px;
top: -1px;
}
html, body, #mapDiv {
padding: 0;
margin: 0;
height: 100%;
}
說明：1. 定義 mapDiv 區塊的 CSS 樣式
2. 中文化 排版被擠壓 .esriScalebarLabel.esriScalebarLineLabel.esriScalebarSecondNumber 調整width 改成 50%
JavaScript:
var map;
require([
"esri/map",
"dojo/parser",
// Modules referenced by the parser
"dijit/DropDownMenu",
"dijit/MenuBar",
"dijit/MenuBarItem",
"dijit/MenuItem",
"dijit/PopupMenuBarItem",
"esri/dijit/Scalebar", // 加入 Scalebar Package
"dojo/domReady!"
], function (
Map,
parser,
DropDownMenu,
MenuBar,
MenuBarItem,
MenuItem,
PopupMenuBarItem,
Scalebar // 加入 Scalebar 承接 對應 "esri/dijit/Scalebar" Scalebar Package 變數
)
{
parser.parse();
// 中文化 S
esri.bundle.widgets.scalebar = { ft: "英呎", km: "公里", mi: "英里", m: "公尺" }; // 目前無作用
window.esri.dijit.Scalebar.prototype.localStrings.km = '公里';
window.esri.dijit.Scalebar.prototype.localStrings.m = '公尺';
window.esri.dijit.Scalebar.prototype.localStrings.mi = '英里';
window.esri.dijit.Scalebar.prototype.localStrings.ft = '英呎';
/*
esri.css
修改 .esriScalebarLabel.esriScalebarLineLabel.esriScalebarSecondNumber
width:10% 改 width:50%
*/
// 中文化 E
map = new Map("mapDiv",
{
center: [121, 23],
zoom: 8,
basemap: "streets"
});
// 加入 scalebar 地圖上顯示比例尺 開始
var scalebar = new Scalebar({
map: map,
// "dual" displays both miles and kilmometers
// "english" is the default, which displays miles
// use "metric" for kilometers
scalebarUnit: "dual"
});
// 加入 scalebar 地圖上顯示比例尺 結束
});
說明：1. 定義 弱型別的變數 map
.require 是 Dojo 方法，利用該方法，
載入 esri/map、dojo/parser、dijit/DropDownMenu、MenuBar、MenuBarItem、MenuItem、PopupMenuBarItem、esri/dijit/Scalebar、dojo/domReady!
根據 Dojo API 參考文件來說，
/ 之前的叫 The main packages of the Dojo Toolkit，
/ 之後的叫 Common modules and packages of the Dojo Toolkit，
那就叫它為「模組」
載入模組後，需用一個 變數來接收該模組，以便於操作
例如 function(Map) {} 用一個 拋棄式的函數，
裡面定義變數： Map、parser、DropDownMenu、MenuBar、MenuBarItem、MenuItem、PopupMenuBarItem、Scalebar，
該變數就被設成相對印的類別。
2. function(Map...略...) {} 用一個 拋棄式的函數 裡面定義 map 變數，
透過傳入的 Map 類別可以 宣告成一個 esri/map 的物件，其他載入的亦同方式
parser.parse() 主要是將 dom 轉換成 dijit 物件或是 widget
（new Map 宣告方法 就要查 https://developers.arcgis.com/javascript/jsapi/map-amd.html ）
定義 弱型別的變數 scalebar 並將他 建立成 esri/dijit/Scalebar 物件
（new Scalebar 宣告方法 就要查 https://developers.arcgis.com/javascript/jsapi/scalebar-amd.html ）
widget scalebar 範例
3. 比例尺 Scalebar 與中文化，
ESRI 對於繁體中文的中文化 是乎並沒有完成，甚至於簡體中文都只有翻了一部分，
ESRI 語言支援部份可以從他的 API SDK 中找到，
路徑是放在 arcgis_js_api\library\3.10\3.10\js\esri\nls\ 的 jsapi_*.js 中去定義的，
層試著把 dojo 語系定義上去，但沒什麼差別，又懶的全部幫它翻譯，
（搶救貧窮大作戰裡面的某位炸物大師曾經說過，給客人吃的都是些家常菜，還敢收錢！都不覺得可恥！）
（反觀現在的便當！有些菜色都爛爛的！一個還要收好幾十塊！吃肉燥飯還覺得有特色一點說）
生在這樣最糟糕的年代，也是最好的年代，只好自力救濟了！就逼著它顯示繁體中文吧！
正常來說 是把 esri.bundle.widgets.scalebar 屬性裡的物件，
置換成 { ft: "英呎", km: "公里", mi: "英里", m: "公尺" } 就完成了，
但無作用（code沒寫完吧，因該是抱持著先求有再求好的 Coding 精神）
因此我們改用另一個方式，
正所謂兩軍交戰，我們為了不要造成傷亡我們可以先勸降
勸降不成，我們可以逼他降
逼降不成，我們可以打到他降
（沒記錯是源自於康熙王朝，當時是要打台灣，康熙爺爺當時怎麼說的我就忘了）
直接把 window.esri.dijit.Scalebar.prototype.localStrings 底下 km、m、ft、mi 的屬性改掉
如：window.esri.dijit.Scalebar.prototype.localStrings.km = '公里';
JSBin Demo(http://goo.gl/lKrSva)參考文獻︰
Scalebar
Scalebar Sample
沒有留言 :
張貼留言