1. 程式人生 > >arcgis for js 3.x 學習記錄(一)

arcgis for js 3.x 學習記錄(一)

一:侃

4.x主要更新的是對3維的操作吧,我們專案目前沒用到3維地圖,然後客戶那面裝的也都是arcgis 10.1?,所以覺得還是用3.x比較好,目前我們專案用的是arcgis for js  3.19

arcgis for js 3 開發者資料地址:https://developers.arcgis.com/javascript/3/

結合谷歌瀏覽器的翻譯功能學習,比較方便,翻譯質量還可以。

前面專案都是直接參考“Sample Code”(示例程式碼),找到相似功能,copy過來改改,也沒學過arcmap啥工具的使用,就是能看懂js,依葫蘆畫瓢,填入公司同事釋出好的服務地址,改改屬性(attribute)基本就搞定了。

但是隨著專案中用到的越來越多,想想還是主動的學習一下比較好,自己對地圖這方面也比較感興趣。

沒什麼學習方法,也懶得去看書,直接“API Reference"(API 參考)中,挨個走一遍,思路是,先通過幾個基礎的,眼熟的class(叫物件也無所謂),找到整個API結構的規則,然後再根據例子,找對應的 物件 學習。樣例中的程式碼拷過來基本都能顯示效果,還是很方便的。

二:開始學習

1.首先閱讀 API Reference Overview(API 參考概述)【我為什麼要中英都寫,因為敲一敲,記得住啊,順便學點English】

裡面說了,模組和類是一一對應的(個別例外),也就是我們引3個模組,對應的function(1,2,3)的位置上寫自定義類名就可以了,例子中的類名是推薦的但不強制。

2.然後閱讀 Set up a development environment 搭建開發者環境

開發工具選擇,和arcgis for js sdk本地部署,專案中最基本的要引入一個esri.css,一個init.js,它應該就會自動根據相對位置去找其他的js了吧,反正學習的時候,用例子中的網路地址引入就好了(網路地址js是版本號結尾的一個路徑)。部署到本地不復雜,但是有個js裡的地址要改,記不清了,大家部署的時候再自己查吧~

3.Preferred Argument Aliases 推薦引數別名

就是推薦模組對應的類名,這一頁可以當目錄去找自己想要學習的模組(類,物件)。

示例程式碼:

require(["esri/basemaps","esri/map","dojo/domReady!"],function(esriBasemaps,Map){
    esriBasemaps
.delorme ={
      baseMapLayers
:[{url:"https://services.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer"}],
      thumbnailUrl
:"https://www.example.com/images/thumbnail_2014-11-25_61051.png",
      title
:"Delorme"};var map =newMap("ui-map",{
      basemap
:"delorme",
      center
:[-111.879655861,40.571338776],// long, lat
      zoom
:13,
      sliderStyle
:"small"});});
理解:

①問:啥是basemaps?

    答:要說它是啥,就說它是幹啥用的,從字面看就是基礎圖層,掃了下文件,說為了定位啊,不輕易改變啊什麼的。舉例:我們有一箇中國地圖(map),這個中國地圖在地球的什麼位置呢,我們就需要一個全球地圖(basemap),為什麼不是兩個map(layer?)疊著呢,因為這個地球圖層(basemap)我們不操作,只是放在那當底圖,是給map當陪襯的。那可以不要這個basemap嗎,可以的,map是最終展示在頁面對應div中的核心物件,如果你的map沒有basemap,也沒有layers(我理解map就是很多個layer組成的),那就是空空如也了。

②問:basemaps有啥屬性,啥結構?

    答:從示例中可以看到,有baseMapLayers,thumbnailUrl,title,我監控了下官網basemap模組返還回來的esriBasemaps物件,裡面就是esri弄好的十幾個basemap供大家用的,屬性就多了個itemId,看到這我就放心了,因為我找了半天也沒找到這幾個屬性擱哪呢,比如thumbnailUrl(縮圖路徑)。通過baseMapLayers屬性,我們可以理解,basemap也就是個map,裡面有很多layer,只是相對於map,能操作的少多了。(我對不同型別的layer認識不清楚,後面看吧)。示例程式碼中,是自定義了一個名為”delorme“的basemap(底圖)。【delorme是個地方麼?百度翻譯”德洛姆“,解釋為一個人名,管它呢。】

③問:basemaps我們咋用啊?

    答:咋用,當底圖用唄,啊哈哈,我嘗試著給baseMapLayers裡亂加圖層,反正就跟map一樣啦,加兩個圖層,有覆蓋的話,先加的在上面?

好了,我的學習記錄以後就這套路了,很多地方不嚴謹,因為自己也是半調子嘛,記錄下為了疏通自己的思路,當然如果有人真耐著性子看了我寫的這些營養不高的東西,也希望你能有一點點收穫。