ArcGis for JavaScript SDK

時間 2019-11-10

標籤 arcgis javascript sdk 欄目 JavaScript 简体版

原文原文鏈接

ArcGis for JavaScript SDK

做者：BLUE
日期：2019-07-09javascript

描述：arcgis for js 開發包,基於arcgis for js 3.9css

點擊【這裏】下載SDKhtml

該開發包是基於arcgis for javascript 3.9，是對原始API的一個擴充，原始API正常使用，該SDK僅封裝了開發過程當中經常使用的方法，開發包內使用瓦片下載的方式對全國天地圖底圖進行加載，默認座標系爲WGS 84,若是你是CGCS2000座標系，那你能夠放心使用；若是須要使用其餘REST服務做爲底圖，你能夠構造BaseMap實例的時候本身指定座標系。java

使用步驟
BaseMap類（基礎底圖類）git
- initTdt() -- 初始化全國天地圖底圖
- initTiledMap(sldtserver?,slbzserver?,yxdtserver?) -- 初始化緩存映射服務資源做爲底圖
- changeBaseMap(id) -- 切換底圖類型
- toggleLable() -- 切換標註
- goto(lng, lat , zoom?) -- 定位點，將點拉到屏幕中心
- adbLayer(layer, index?) -- 附加圖層,可用於圖層管理
- hideAttachLayer(name) -- 隱藏附加圖層
- showAttachLayer(name) -- 顯示附加圖層
- destoryAttachLayer(name) -- 銷燬附加圖層
- hasLayer(name) -- 判斷圖層是否存在
- zoomIn(zoom) -- 放大地圖
- zoomOut(zoom) -- 縮小地圖
- addWMSLayer(url, name, extent, callback?) -- 添加WMS圖層
- addPointGeoJsonLayer(name, url, infoTemplate1?, symbol?, callback?, options?, maxdraw?) -- 添加GeoJson點圖層
- addLineGeoJsonLayer(name, url, infoTemplate1?, symbol?, callback?, options?, maxdraw?) -- 添加GeoJson線圖層
- addGonGeoJsonLayer(name, url, infoTemplate1?, symbol?, callback?, options?, maxdraw?) -- 添加GeoJson線圖層
DrawLayer類（繪製類）github
- drawPoint（callback?） -- 繪製點
- drawMultiPoint（callback?） --繪製多點
- drawLine（callback?) -- 繪製直線段
- drawPolyLine（callback?） -- 繪製折線
- drawPolyGon（callback?） -- 繪製多邊形
- drawFreePolyGon(callback?) -- 手繪多邊形
- drawArrow(callback?) -- 繪製箭頭
- drawTrianGle(callback?) -- 繪製三角形
- drawCircle(callback?) -- 繪製圓形
- drawEllipse(callback?) -- 繪製橢圓
- drawRectangle(callback?) -- 繪製矩形
- clear() -- 清除繪製並釋放繪製狀態
- clsAndte() -- 清除繪製並保持繪製狀態
- deactivate() -- 釋放繪製狀態不清空繪製要素
GraphicLayer類（要素圖層類）json
- addPoint(lng, lat, infoTemplate?, attr?, symbol?, localAnim?) -- 添加點要素
- addMultiPoint(points, infoTemplate?, attr?, symbol?) -- 添加多點
- addLine(path, infoTemplate?, attr?, symbol?) -- 添加線要素
- addGon(path, infoTemplate?, attr?, symbol?) -- 添加面要素
- addCricle(lng, lat, radius?, infoTemplate?, attr?, symbol?) -- 添加圓
- addText(text, lng, lat, symbol?, offset?) -- 添加文字要素
- addFlowText(text, path, symbol?, offset?) -- 添加流式文字/沿線文字(均分字間距)
- addSupFlowText(text, path, symbol?, offset?) -- 添加流式文字/沿線文字(路徑點座標)

DijitLayer類（工具類）api
- measureDis() -- 測距
- measureArea() -- 測面
- clearMeas() -- 清空測量數據
- activateToolbar(graphic) -- 編輯要素
- deactivate() -- 釋放編輯狀態
- getCurrentState() --獲取當前編輯的一些狀態
- refresh() -- 刷新編輯的內部狀態

1. 使用步驟

將該SDK包放置於項目工程根目錄，若是使用的靜態化資源的狀況，請靜態化該SDK包以保證路徑「/arcgisdk」能夠訪問SDK包內文件
在html頁面中添加資源引用，若是你是用的是模塊化進行開發，請暫時將地圖界面抽離成單獨的html，該SDK可能會引發模塊化關鍵字衝突

簡潔版資源：數組

<link rel="stylesheet" type="text/css" href="/arcgisdk/3.9compact/js/dojo/dijit/themes/dijit.css" />
<link rel="stylesheet" type="text/css" href="/arcgisdk/3.9compact/js/esri/css/esri.css" />
<script type="text/javascript" src="/arcgisdk/3.9compact/init.js"></script>

完整版資源：緩存

<link rel="stylesheet" type="text/css" href="/arcgisdk/3.9compact/js/dojo/dijit/themes/dijit.css" />
<link rel="stylesheet" type="text/css" href="/arcgisdk/3.9/js/esri/css/esri.css" />
<script type="text/javascript" src="/arcgisdk/3.9/init.js"></script>

修改SDK包源碼引用

若你是使用的完整版請將 /arcgisdk/3.9compact/init.js 和 /arcgisdk/3.9compact/js/dojo/dojo/dojo.js 中的 localhost:8009 修改爲你的項目地址和端口
若你是使用的是完整版請將 /arcgisdk/3.9/init.js 和 /arcgisdk/3.9/js/dojo/dojo/dojo.js 中的 localhost:8009 修改爲你的項目地址和端口

請開始你的代碼，下面是個初始化例子

<!--建立一個具備id屬性的div-->
<div id='map' style="height: 100%;width:100%;background-color:darkgrey"></div>

<script>
    // 建立一個全局對象用於存儲基礎地圖對象
    var baseMap = null;
    // 引入BaseMap模塊
    require(["BAMAP/BaseMap"
    ], function (BaseMap) {
        // 實例化一個基礎底圖類
        baseMap = new BaseMap("map", { center: [116.39, 39.91],zoom:9 }).init();
    })
</script>

2. Class: BaseMap（基礎底圖類）

基礎底圖類，該類繼承於Map 對象，有關Map對象的資料請看【這裏】

【提示】該類全部的非原始方法均可以鏈式調用

2.1 AMD Module Require

require(["BAMAP/BaseMap"], function(BaseMap) { /* code goes here */ });

2.2 Constructors

new BaseMap(divId, options?);
// 通常建議使用下面這樣進行實例化的同時進行初始化，這樣能夠直接呈現底圖
new BaseMap("map", { center: [116.39, 39.91],zoom:9 }).initTdt();

options參數請點擊這裏

2.3 Method Details

# initTdt()

初始化全國天地圖做爲底圖

# initTiledMap(sldtserver?,slbzserver?,yxdtserver?)

初始化有公開的緩存映射服務資源做爲底圖

【提示】默認加載成都天地圖做爲底圖，不保證永遠能成功，若是服務被關閉則加載會失敗

sldtserver [String] 電子底圖服務地址
slbzserver [String] 矢量標註服務地址
yxdtserver [String] 影像底圖服務地址

# changeBaseMap(id)

切換底圖類型

id [String] 底圖類型標識 sldt-矢量底圖,imgdt-影像底圖,dxdt-地形底圖

# toggleLable()

切換標註

# goto(lng, lat, zoom?)

將底圖中心定位到指定位置

lng [Float] 經度
lat [Float] 緯度
zoom [Int] 縮放層級默認當前層級

# adbLayer(layer, index?)

特殊的附加圖層，可用於圖層管理，不建議直接使用原型的添加圖層方法

layer [Layer] 全部繼承於 esri/layers 的實例
index [Int] 圖層層級，值越大越靠近用戶

# hideAttachLayer(name)

隱藏附加圖層，只針對 adbLayer 方法添加的圖層有效

name [String] 圖層名稱或者id

# showAttachLayer(name)

顯示附加圖層，只針對 adbLayer 方法添加的圖層有效

name [String] 圖層名稱或者id

# destoryAttachLayer(name)

銷燬附加圖層，只針對 adbLayer 方法添加的圖層有效

name [String] 圖層名稱或者id

# hasLayer(name)

判斷圖層是否存在，只針對 adbLayer 方法添加的圖層有效

name [String] 圖層名稱或者id

# zoomIn(zoom)

地圖放大

zoom [Number] 放大層級

# zoomOut(zoom)

地圖縮小

zoom [Number] 縮小層級

# addWMSLayer(url, name, extent, callback?)

添加WMS圖層

url [String] WMS圖層服務地址
name [String] 命名空間:圖層名稱
extent [Object] 座標範圍{xmin, ymin, xmax, ymax}
callback [Function] 回調函數

# addPointGeoJsonLayer(name, url, infoTemplate1?, symbol?, callback?, options?, maxdraw?)

添加GeoJson點圖層

name [String] 圖層名稱或id
url [String] 服務或GeoJson文件的地址（同域）
infoTemplate1 [Object] 信息框內容
symbol [Object] imgurl & heigth & width
callback [Function] 回調函數
options [Object] GraphicsLayer類的全部構造參數，點擊查看
maxdraw [Int] 最大繪製量 default 1,000,000

【注意】調用此API時候請添加如下兩個引用

<script src="/arcgisdk/vendor/terraformer/terraformer.min.js"></script>
<script src="/arcgisdk/vendor/terraformer-arcgis-parser/terraformer-arcgis-parser.min.js"></script>

var infoTemplate1 = {
    title: "地塊信息",
    content: "地塊編碼：${DKBM}[br/]面積（畝）：${面積畝}"
}
var symbol={
    imgurl:"/static/map/img/local-marker.png",
    width:10,
    height:10
}
baseMap.addPointGeoJsonLayer('dk', '/main/map/geodata/xinjingdk.json', infoTemplate1, symbol, function (layer) {/* code goes here */ });

# addLineGeoJsonLayer(name, url, infoTemplate1?, symbol?, callback?, options?, maxdraw?)

添加GeoJson點圖層

name [String] 圖層名稱或id
url [String] 服務或GeoJson文件的地址（同域）
infoTemplate1 [Object] 信息框內容
symbol [Object] color & width
callback [Function] 回調函數
options [Object] GraphicsLayer類的全部構造參數，點擊查看
maxdraw [Int] 最大繪製量 default 1,000,000

【注意】調用此API時候請添加如下兩個引用

<script src="/arcgisdk/vendor/terraformer/terraformer.min.js"></script>
<script src="/arcgisdk/vendor/terraformer-arcgis-parser/terraformer-arcgis-parser.min.js"></script>

# addGonGeoJsonLayer(name, url, infoTemplate1?, symbol?, callback?, options?, maxdraw?)

添加GeoJson面圖層

name [String] 圖層名稱或id
url [String] 服務或GeoJson文件的地址（同域）
infoTemplate1 [Object] 信息框內容
symbol [Object] color & width & fillcolor [255, 255, 0, 0.25]
callback [Function] 回調函數
options [Object] GraphicsLayer類的全部構造參數，點擊查看
maxdraw [Int] 最大繪製量 default 1,000,000

【注意】調用此API時候請添加如下兩個引用

<script src="/arcgisdk/vendor/terraformer/terraformer.min.js"></script>
<script src="/arcgisdk/vendor/terraformer-arcgis-parser/terraformer-arcgis-parser.min.js"></script>

3. Class: DrawLayer（繪製類）

圖形繪製類，該類中封裝了一些經常使用的繪製方法；實例化是時候傳入BaseMap實例對象，不要將該類的實例做爲圖層疊加。

3.1 AMD Module Require

require(["BAMAP/DrawLayer"], function(DrawLayer) { /* code goes here */ });

3.2 Constructors

new DrawLayer(Map)
// Map爲BaseMap類的實例

3.3 Method Details

# drawPoint(callback?)

繪製點

callback [Function] 繪製完成的回調函數,相關的繪製信息以回調參數對象傳入

# drawMultiPoint(callback?)

繪製多點

callback [Function] 繪製完成的回調函數,相關的繪製信息以回調參數對象傳入

# drawLine(callback?)

繪製直線段

callback [Function] 繪製完成的回調函數,相關的繪製信息以回調參數對象傳入

# drawPolyLine(callback?)

繪製折線

callback [Function] 繪製完成的回調函數,相關的繪製信息以回調參數對象傳入

# drawPolyGon(callback?)

繪製多邊形

callback [Function] 繪製完成的回調函數,相關的繪製信息以回調參數對象傳入

# drawFreePolyGon(callback?)

手繪多邊形

callback [Function] 繪製完成的回調函數,相關的繪製信息以回調參數對象傳入

# drawArrow(callback?)

繪製箭頭

callback [Function] 繪製完成的回調函數,相關的繪製信息以回調參數對象傳入

# drawTrianGle(callback?)

繪製三角形

callback [Function] 繪製完成的回調函數,相關的繪製信息以回調參數對象傳入

# drawCircle(callback?)

繪製圓形

callback [Function] 繪製完成的回調函數,相關的繪製信息以回調參數對象傳入

# drawEllipse(callback?)

繪製橢圓

callback [Function] 繪製完成的回調函數,相關的繪製信息以回調參數對象傳入

# drawRectangle(callback?)

繪製矩形

callback [Function] 繪製完成的回調函數,相關的繪製信息以回調參數對象傳入

# clear()

清除繪製圖層並釋放繪製狀態

# clsAndte()

清除繪製並保持繪製狀態

# deactivate()

釋放繪製狀態不清空繪製要素

4. Class: GraphicLayer（要素圖層類）

該圖層類可根據座標點繪製各類各樣的要素，經常使用於繪製專題圖層，該對象繼承於GraphicsLayer對象，有關GraphicsLayer對象的信息，你能夠戳【這裏】

【注意】該圖層的方法須要調在實例添加到BaseMap中後纔可使用，也就是調用BaseMap的adbLayer方法以後

4.1 AMD Module Require

require(["BAMAP/GraphicLayer"], function(GraphicLayer) { /* code goes here */ });

4.2 Constructors

new GraphicLayer(options?)

有關options的詳情，戳【這裏】

4.3 Method Details

# addPoint(lng, lat, infoTemplate?, attr?, symbol?, localAnim?)

添加點要素

lng [Float] 經度
lat [Float] 緯度
infoTemplate [Object] 信息框格式{title:標題，content:正文}
attr [Object] 該要素的屬性值，供infoTemplate使用
symbol [Object] 點樣式{url:圖片路徑，width：寬，height:高}
localAnim [Boolean] 動畫，可用於定位的時候，默認爲false

var infoTemplate = {title:"測試",content:"<h3>${foo}</h3>"};
var attr = {foo:"hello"}

# addMultiPoint(points, infoTemplate?, attr?, symbol?)

添加多點要素

points [Array] 二維經緯度數組
infoTemplate [Object] 信息框格式{title:標題，content:正文}
attr [Object] 該要素的屬性值，供infoTemplate使用
symbol [Object] 點樣式{url:圖片路徑，width：寬，height:高}

# addLine(path, infoTemplate?, attr?, symbol?)

添加線要素

path [Array] 路徑二維經緯度數組
infoTemplate [Object] 信息框格式{title:標題，content:正文}
attr [Object] 該要素的屬性值，供infoTemplate使用
symbol [Object] 要素樣式{color:顏色，width：線寬}

# addGon(path, infoTemplate?, attr?, symbol?)

添加面要素

path [Array] 路徑二維經緯度數組
infoTemplate [Object] 信息框格式{title:標題，content:正文}
attr [Object] 該要素的屬性值，供infoTemplate使用
symbol [Object] 要素樣式{color:邊線顏色，width：邊線線寬，fillColor：填充色}

【提示】這兒得顏色最好使用[R,G,B,A]的形式

# addCricle(lng, lat, radius, infoTemplate?, attr?, symbol?)

添加圓要素

lng [Float] 經度
lat [Float] 緯度
radius [Number] 半徑（米）默認1000
infoTemplate [Object] 信息框格式{title:標題，content:正文}
attr [Object] 該要素的屬性值，供infoTemplate使用
symbol [Object] 要素樣式{color:邊線顏色，width：邊線線寬，fillColor：填充色}

【提示】這兒得顏色最好使用[R,G,B,A]的形式

# addText(text, lng, lat, symbol?,offset?)

添加文字要素

text [String] 文字內容
lng [Float] 經度
lat [Float] 緯度
symbol [Object] 要素樣式{size：文字大小，family：文字字體，color：文字顏色}
offset [Object] 文字座標偏移 {x：橫向偏移，y:縱向偏移}

# addFlowText(text, paths, symbol?,offset?)

添加流式文字/沿線文字,均分文字間距

text [String] 文字內容
paths [Array] 線段座標三維數組[[[x1,y1],[x2,y2]]]
symbol [Object] 要素樣式{size：文字大小，family：文字字體，color：文字顏色}
offset [Object] 文字座標偏移 {x：橫向偏移，y:縱向偏移}

【注意】該方法不要大數據量調用，大數據量有內存溢出風險

# addSupFlowText(text, paths, symbol?,offset?)

添加流式文字/沿線文字
該方法適用於線的座標點數量大於文字數量時候，並非均分文字間距

text [String] 文字內容
paths [Array] 線段座標三維數組[[[x1,y1],[x2,y2]]]
symbol [Object] 要素樣式{size：文字大小，family：文字字體，color：文字顏色}
offset [Object] 文字座標偏移 {x：橫向偏移，y:縱向偏移}

5. Class: DijitLayer（工具類）

工具圖層，好比測距，側面，固然可使用arcgis提供的原生的。
實例化是時候傳入BaseMap實例對象，不要將該類的實例做爲圖層疊加。

5.1 AMD Module Require

require(["BAMAP/DijitLayer"], function(DijitLayer) { /* code goes here */ });

5.2 Constructors

new DijitLayer(Map,options?)
// Map爲BaseMap類的實例

options是一個鍵值對對象，值都爲函數，在對應狀態的時候會被回調，回調參數都爲一個對象
- activate [Function] 激活編輯狀態時候觸發 {graphic,tool}
- deactivate [Function] 釋放編輯狀態時候觸發 {graphic,info,tool}
- graphic-click [Function] 單擊要素時觸發 {graphic,info}
- graphic-first-move [Function] 開始移動要素時觸發 {graphic}
- graphic-move [Function] 要素移動持續觸發 {graphic,transform}
- graphic-move-start [Function] 在要素上按下鼠標按鈕時觸發，一般在移動要素時觸發{graphic}
- graphic-move-stop [Function] 在釋放鼠標按鈕時觸發，一般在移動圖形後觸發 {graphic,transform}
- rotate [Function] 圖形旋轉時連續觸發 {graphic,info}
- rotate-first-move [Function] 當用戶開始拖動句柄以旋轉要素時觸發 {graphic}
- rotate-start [Function] 當用戶單擊手柄開始旋轉要素時觸發 {graphic}
- rotate-stop [Function] 從旋轉手柄釋放鼠標按鈕以完成要素旋轉時觸發 {graphic,info}
- scale [Function] 在縮放要要素時持續觸發 {graphic,info}
- scale-first-move [Function] 當用戶開始拖動句柄以縮放圖形時觸發 {graphic}
- scale-start [Function] 當用戶單擊手柄以縮放或調整圖形大小時觸發 {graphic}
- scale-stop [Function] 從縮放手柄釋放鼠標按鈕以完成對圖形的縮放時觸發 {graphic,info}
- vertex-add [Function] 在將新頂點添加到多段線或多邊形或將新點添加到多點後觸發 {graphic,vertexinfo}
- vertex-click [Function] 在多段線或多邊形的頂點或多點中的點上單擊鼠標按鈕時觸發 {graphic,vertexinfo}
- vertex-delete [Function] 刪除頂點（多段線、多邊形）或點（多點）後觸發 {graphic,vertexinfo}
- vertex-first-move [Function] 當用戶開始移動多段線、多邊形或多點的頂點時觸發 {graphic,vertexinfo}
- vertex-mouse-out [Function] 當鼠標退出頂點（多段線、多邊形）或點（多點）時觸發 {graphic,vertexinfo}
- vertex-mouse-over [Function] 當鼠標移過頂點（多段線、多邊形）或點（多點）時觸發 {graphic,vertexinfo}
- vertex-move [Function] 在用戶移動頂點（多段線、多邊形）或點（多點）時連續觸發 {graphic,vertexinfo,transform}
- vertex-move-start [Function] 在頂點（多段線、多邊形）或點（多點）上按下鼠標按鈕時觸發 {graphic,vertexinfo}
- vertex-move-stop [Function] 當鼠標按鈕從頂點（多段線、多邊形）或點（多點）釋放時觸發 {graphic,vertexinfo,transform}