javascript
ArcGIS API for JavaScript 4.2学习笔记[10] 2D添加指北针widget、视图保存、视图padding（第二章完结）...
這幾個(gè)例子是第二章除了入門之外比較簡(jiǎn)單的幾個(gè)，就做個(gè)合集，把最核心的代碼（第二參數(shù)）和 引用放上來即可，不作多解釋。
2D地圖添加指北針widget
2D地圖一般修正方向?yàn)檎狈骄托枰@個(gè)widget。
引用：
["esri/Map","esri/views/MapView","esri/widgets/Compass","dojo/domReady!" ]在function(Map,MapView,Compass)實(shí)例化Map和MapView后，添加這兩行代碼：
var compassWidget = new Compass({view: view}); view.ui.add(compassWidget, "top-left");即可。有關(guān)Compass這個(gè)widget的構(gòu)造函數(shù)，可以查閱API了解更多，我感覺不會(huì)那么少吧...還有這個(gè)ui.add()方法，感覺日后添加widget布局的時(shí)候可以仔細(xì)學(xué)學(xué)。
ps：Compass在SceneView中是默認(rèn)顯示的。
視圖padding改變
這個(gè)幾乎沒有難度。
給個(gè)圖預(yù)覽吧：
本來小島這種東西就應(yīng)該在地圖的最中央位置，但是由于右邊多了一塊DIV（寬度320px），所以地圖為了避開DIV而對(duì)齊就必須把視圖的padding值改為320（和DIV一樣）。在百度地圖舊版本中，就喜歡搞一個(gè)面板，用于提供搜索信息的輸入框和結(jié)果框、篩選按鈕等。
直接給出源代碼：
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的實(shí)例化中把padding的right改為320，在html中：
<body><div id="viewDiv"><div id="sidebar"><div id="text">內(nèi)容云云，此處省略</div></div></div> </body>在style標(biāo)簽中，把sidebar這個(gè)div的width設(shè)置成了同樣的320px。
視圖保存
這個(gè)就比較有趣了。首先要提供一個(gè)輸入title的地方，還要有一個(gè)保存image的地方。
這個(gè)例子，使用了SceneView，SceneView的map屬性使用了服務(wù)器上的WebScene（專題三維地圖）。由于這個(gè)比較容易，就忽略了。
<body><div id="viewDiv"></div><div id="createSlideDiv">New slide: <input type="text" id="createSlideTitleInput" size="10" /><buttonid="createSlideButton">Create</button></div><div id="slidesDiv"></div> </body>從html代碼可以看出，提供了一個(gè)createSlideDiv，內(nèi)含input和一個(gè)button以供輸入。
還有一個(gè)slidesDiv以供保存img列表。
見下圖：
第一步，把這幾個(gè)div加入到view對(duì)象的ui中去。
view.ui.add(["createSlideDiv", "slidesDiv"], "top-right");第二步，在view創(chuàng)建好后，執(zhí)行以下代碼。關(guān)于then()，請(qǐng)查看鷹眼一文的末尾。
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一個(gè)slides變量，獲取WebScene實(shí)例scene的當(dāng)前所有的slides。
然后遍歷每一個(gè)slides成員，對(duì)其進(jìn)行createSlideUI操作（見下，即創(chuàng)建DIV列表里的UI對(duì)象）。
第三，調(diào)用dojo的on(DOM元素，事件類型，事件方法體)，為新增slide的那個(gè)按鈕添加click事件。
注意Slide.createFrom()方法，它將從view中創(chuàng)建slide。
在這個(gè)方法的回調(diào)函數(shù)中，設(shè)置輸入框的文本slide的標(biāo)題。
然后把slide添加到scene這個(gè)WebScene中去。
最后調(diào)用createSlideUI創(chuàng)建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()方法就是創(chuàng)建DIV了，首先用domConstruct.create()方法創(chuàng)建一個(gè)divDOM元素，然后確定位置position，
緊接著在這個(gè)div里添加標(biāo)題div、圖片div，最后為這個(gè)div添加click事件。
雖然最后一個(gè)例子看起來比較長(zhǎng)，但是邏輯都很清晰，代碼也沒什么碎片化，完全可以直接照抄兩個(gè)代碼段。
?
至此，第二章的學(xué)習(xí)就差不多了，關(guān)于WebScene、WebMap這兩個(gè)從Map類中派生出來的子類（和Basemap同級(jí)），我覺得查閱API更有效果，而且可能是得配合ArcServer才能弄懂的東西，就先不學(xué)了。
要說數(shù)據(jù)準(zhǔn)備這塊這一章還真沒寫，所以極有可能在Layers那章才會(huì)學(xué)到了吧，再不濟(jì)，百度啊谷歌啊干什么用的？
所以，整理一下所學(xué)，開始準(zhǔn)備學(xué)習(xí)Popups（彈出框）、Searching（空間查詢）和Analysis（空間分析）吧~
Layers和Widgets兩章留給三月份研讀。
轉(zhuǎn)載于:https://www.cnblogs.com/onsummer/p/6391517.html
總結(jié)
以上是生活随笔為你收集整理的ArcGIS API for JavaScript 4.2学习笔记[10] 2D添加指北针widget、视图保存、视图padding（第二章完结）...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 维基百科，20岁生日快乐
- 下一篇： JS验证身份证号地区码及最后一位校验码