這幾個例子是第二章除了入門之外比較簡單的幾個,就做個合集,把最核心的代碼(第二參數)和 引用放上來即可,不作多解釋。
2D地圖添加指北針widget
2D地圖一般修正方向為正北方就需要這個widget。
引用:
[ "esri/Map", "esri/views/MapView", "esri/widgets/Compass", "dojo/domReady!" ]
在function(Map,MapView,Compass)實例化Map和MapView后,添加這兩行代碼:
var compassWidget = new Compass({view: view}); view.ui.add(compassWidget, "top-left");
即可。有關Compass這個widget的構造函數,可以查閱API了解更多,我感覺不會那么少吧...還有這個ui.add()方法,感覺日后添加widget布局的時候可以仔細學學。
ps:Compass在SceneView中是默認顯示的。
視圖padding改變
這個幾乎沒有難度。
給個圖預覽吧:

本來小島這種東西就應該在地圖的最中央位置,但是由於右邊多了一塊DIV(寬度320px),所以地圖為了避開DIV而對齊就必須把視圖的padding值改為320(和DIV一樣)。在百度地圖舊版本中,就喜歡搞一個面板,用於提供搜索信息的輸入框和結果框、篩選按鈕等。
直接給出源代碼:
require( [ "esri/Map", "esri/views/MapView", "dojo/domReady!" ], function(Map,MapView) { var map = new Map({ basemap: "topo" }); var view = new MapView({ container: "viewDiv", map: map, center: [-74.045459, 40.690083], zoom: 16, padding: { right: 320 } }); });
僅僅是在view的實例化中把padding的right改為320,在html中:
<body> <div id="viewDiv"> <div id="sidebar"> <div id="text"> 內容雲雲,此處省略 </div> </div> </div> </body>
在style標簽中,把sidebar這個div的width設置成了同樣的320px。
視圖保存
這個就比較有趣了。首先要提供一個輸入title的地方,還要有一個保存image的地方。
這個例子,使用了SceneView,SceneView的map屬性使用了服務器上的WebScene(專題三維地圖)。由於這個比較容易,就忽略了。
<body> <div id="viewDiv"></div> <div id="createSlideDiv"> New slide: <input type="text" id="createSlideTitleInput" size="10" /> <button id="createSlideButton">Create</button> </div> <div id="slidesDiv"></div> </body>
從html代碼可以看出,提供了一個createSlideDiv,內含input和一個button以供輸入。
還有一個slidesDiv以供保存img列表。
見下圖:

第一步,把這幾個div加入到view對象的ui中去。
view.ui.add(["createSlideDiv", "slidesDiv"], "top-right");
第二步,在view創建好后,執行以下代碼。關於then(),請查看鷹眼一文的末尾。
view.then(function() { dom.byId("slidesDiv").style.visibility = "visible"; var slides = scene.presentation.slides; slides.forEach(createSlideUI);
on(dom.byId("createSlideButton"), "click", function() { Slide.createFrom(view).then(function(slide) { slide.title.text = dom.byId("createSlideTitleInput") .value; scene.presentation.slides.add(slide); createSlideUI(slide, "first"); }); }); });
首先,將slidesDiv置為可視。
第二,若WebScene存在slide,那么就全部裝到列表中去。
然后var一個slides變量,獲取WebScene實例scene的當前所有的slides。
然后遍歷每一個slides成員,對其進行createSlideUI操作(見下,即創建DIV列表里的UI對象)。
第三,調用dojo的on(DOM元素,事件類型,事件方法體),為新增slide的那個按鈕添加click事件。
注意Slide.createFrom()方法,它將從view中創建slide。
在這個方法的回調函數中,設置輸入框的文本slide的標題。
然后把slide添加到scene這個WebScene中去。
最后調用createSlideUI創建div即可。
function createSlideUI(slide, placement) { var slideElement = domConstruct.create("div", { id: slide.id, className: "slide" }); var position = placement ? placement : "last"; domConstruct.place(slideElement, "slidesDiv", position); domConstruct.create("div", { textContent: slide.title.text, className: "title" }, slideElement); domConstruct.create("img", { src: slide.thumbnail.url, title: slide.title.text }, slideElement); on(slideElement, "click", function() { query(".slide").removeClass("active"); domClass.add(slideElement, "active"); slide.applyTo(view); }); }
createSlideUI()方法就是創建DIV了,首先用domConstruct.create()方法創建一個divDOM元素,然后確定位置position,
緊接着在這個div里添加標題div、圖片div,最后為這個div添加click事件。
雖然最后一個例子看起來比較長,但是邏輯都很清晰,代碼也沒什么碎片化,完全可以直接照抄兩個代碼段。
至此,第二章的學習就差不多了,關於WebScene、WebMap這兩個從Map類中派生出來的子類(和Basemap同級),我覺得查閱API更有效果,而且可能是得配合ArcServer才能弄懂的東西,就先不學了。
要說數據准備這塊這一章還真沒寫,所以極有可能在Layers那章才會學到了吧,再不濟,百度啊谷歌啊干什么用的?
所以,整理一下所學,開始准備學習Popups(彈出框)、Searching(空間查詢)和Analysis(空間分析)吧~
Layers和Widgets兩章留給三月份研讀。
