ArcGis for JavaScript SDK

maybe_009 發(fā)布于2019-08-23 18:40 / 1929人閱讀

ArcGis for JavaScript SDK

作者：BLUE

日期：2019-07-09

描述：arcgis for js 開發(fā)包,基于arcgis for js 3.9

點(diǎn)擊【這里】下載SDK

該開發(fā)包是基于arcgis for javascript 3.9，是對原始API的一個擴(kuò)充，原始API正常使用，該SDK僅封裝了開發(fā)過程中常用的方法，開發(fā)包內(nèi)使用瓦片下載的方式對全國天地圖底圖進(jìn)行加載，默認(rèn)坐標(biāo)系為WGS 84,如果你是CGCS2000坐標(biāo)系，那你可以放心使用；如果需要使用其他REST服務(wù)作為底圖，你可以構(gòu)造BaseMap實(shí)例的時候自己指定坐標(biāo)系。

使用步驟

BaseMap類（基礎(chǔ)底圖類）

initTdt() -- 初始化全國天地圖底圖

initTiledMap(sldtserver?,slbzserver?,yxdtserver?) -- 初始化緩存映射服務(wù)資源作為底圖

changeBaseMap(id) -- 切換底圖類型

toggleLable() -- 切換標(biāo)注

goto(lng, lat , zoom?) -- 定位點(diǎn)，將點(diǎn)拉到屏幕中心

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點(diǎn)圖層

addLineGeoJsonLayer(name, url, infoTemplate1?, symbol?, callback?, options?, maxdraw?) -- 添加GeoJson線圖層

addGonGeoJsonLayer(name, url, infoTemplate1?, symbol?, callback?, options?, maxdraw?) -- 添加GeoJson線圖層

DrawLayer類（繪制類）

drawPoint（callback?） -- 繪制點(diǎn)

drawMultiPoint（callback?） --繪制多點(diǎn)

drawLine（callback?) -- 繪制直線段

drawPolyLine（callback?） -- 繪制折線

drawPolyGon（callback?） -- 繪制多邊形

drawFreePolyGon(callback?) -- 手繪多邊形

drawArrow(callback?) -- 繪制箭頭

drawTrianGle(callback?) -- 繪制三角形

drawCircle(callback?) -- 繪制圓形

drawEllipse(callback?) -- 繪制橢圓

drawRectangle(callback?) -- 繪制矩形

clear() -- 清除繪制并釋放繪制狀態(tài)

clsAndte() -- 清除繪制并保持繪制狀態(tài)

deactivate() -- 釋放繪制狀態(tài)不清空繪制要素

GraphicLayer類（要素圖層類）

addPoint(lng, lat, infoTemplate?, attr?, symbol?, localAnim?) -- 添加點(diǎn)要素

addMultiPoint(points, infoTemplate?, attr?, symbol?) -- 添加多點(diǎn)

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?) -- 添加流式文字/沿線文字(路徑點(diǎn)坐標(biāo))

DijitLayer類（工具類）

measureDis() -- 測距

measureArea() -- 測面

clearMeas() -- 清空測量數(shù)據(jù)

activateToolbar(graphic) -- 編輯要素

deactivate() -- 釋放編輯狀態(tài)

getCurrentState() --獲取當(dāng)前編輯的一些狀態(tài)

refresh() -- 刷新編輯的內(nèi)部狀態(tài)

1. 使用步驟

將該SDK包放置于項(xiàng)目工程根目錄，如果使用的靜態(tài)化資源的情況，請靜態(tài)化該SDK包以保證路徑“/arcgisdk”可以訪問SDK包內(nèi)文件

在html頁面中添加資源引用，如果你是用的是模塊化進(jìn)行開發(fā)，請暫時將地圖界面抽離成多帶帶的html，該SDK可能會引起模塊化關(guān)鍵字沖突

簡潔版資源：

完整版資源：

修改SDK包源碼引用

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

若你是使用的是完整版請將 /arcgisdk/3.9/init.js 和 /arcgisdk/3.9/js/dojo/dojo/dojo.js 中的 localhost:8009 修改成你的項(xiàng)目地址和端口

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

2. Class: BaseMap（基礎(chǔ)底圖類）

基礎(chǔ)底圖類，該類繼承于Map 對象，有關(guān)Map對象的資料請看【這里】

【提示】該類所有的非原始方法都可以鏈?zhǔn)秸{(diào)用

2.1 AMD Module Require

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

2.2 Constructors

new BaseMap(divId, options?);
// 一般建議使用下面這樣進(jìn)行實(shí)例化的同時進(jìn)行初始化，這樣可以直接呈現(xiàn)底圖
new BaseMap("map", { center: [116.39, 39.91],zoom:9 }).initTdt();

options參數(shù)請點(diǎn)擊這里

2.3 Method Details

# initTdt()

初始化全國天地圖作為底圖

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

初始化有公開的緩存映射服務(wù)資源作為底圖

【提示】默認(rèn)加載成都天地圖作為底圖，不保證永遠(yuǎn)能成功，如果服務(wù)被關(guān)閉則加載會失敗

sldtserver [String] 電子底圖服務(wù)地址

slbzserver [String] 矢量標(biāo)注服務(wù)地址

yxdtserver [String] 影像底圖服務(wù)地址

# changeBaseMap(id)

切換底圖類型

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

# toggleLable()

切換標(biāo)注

# goto(lng, lat, zoom?)

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

lng [Float] 經(jīng)度

lat [Float] 緯度

zoom [Int] 縮放層級默認(rèn)當(dāng)前層級

# adbLayer(layer, index?)

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

layer [Layer] 所有繼承于 esri/layers 的實(shí)例

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圖層服務(wù)地址

name [String] 命名空間:圖層名稱

extent [Object] 坐標(biāo)范圍{xmin, ymin, xmax, ymax}

callback [Function] 回調(diào)函數(shù)

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

添加GeoJson點(diǎn)圖層

name [String] 圖層名稱或id

url [String] 服務(wù)或GeoJson文件的地址（同域）

infoTemplate1 [Object] 信息框內(nèi)容

symbol [Object] imgurl & heigth & width

callback [Function] 回調(diào)函數(shù)

options [Object] GraphicsLayer類的所有構(gòu)造參數(shù)，點(diǎn)擊查看

maxdraw [Int] 最大繪制量 default 1,000,000

【注意】調(diào)用此API時候請?zhí)砑右韵聝蓚€引用

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點(diǎn)圖層

name [String] 圖層名稱或id

url [String] 服務(wù)或GeoJson文件的地址（同域）

infoTemplate1 [Object] 信息框內(nèi)容

symbol [Object] color & width

callback [Function] 回調(diào)函數(shù)

options [Object] GraphicsLayer類的所有構(gòu)造參數(shù)，點(diǎn)擊查看

maxdraw [Int] 最大繪制量 default 1,000,000

【注意】調(diào)用此API時候請?zhí)砑右韵聝蓚€引用

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

添加GeoJson面圖層

name [String] 圖層名稱或id

url [String] 服務(wù)或GeoJson文件的地址（同域）

infoTemplate1 [Object] 信息框內(nèi)容

symbol [Object] color & width & fillcolor [255, 255, 0, 0.25]

callback [Function] 回調(diào)函數(shù)

options [Object] GraphicsLayer類的所有構(gòu)造參數(shù)，點(diǎn)擊查看

maxdraw [Int] 最大繪制量 default 1,000,000

【注意】調(diào)用此API時候請?zhí)砑右韵聝蓚€引用

3. Class: DrawLayer（繪制類）

圖形繪制類，該類中封裝了一些常用的繪制方法；實(shí)例化是時候傳入BaseMap實(shí)例對象，不要將該類的實(shí)例作為圖層疊加。

3.1 AMD Module Require

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

3.2 Constructors

new DrawLayer(Map)
// Map為BaseMap類的實(shí)例

3.3 Method Details

# drawPoint(callback?)

繪制點(diǎn)