ArcGis for JavaScript SDK

maybe_009 發布于2019-08-23 18:40 / 1909人閱讀

ArcGis for JavaScript SDK

作者：BLUE

日期：2019-07-09

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

點擊【這里】下載SDK

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

使用步驟

BaseMap類（基礎底圖類）

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類（繪制類）

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類（要素圖層類）

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類（工具類）

measureDis() -- 測距

measureArea() -- 測面

clearMeas() -- 清空測量數據

activateToolbar(graphic) -- 編輯要素

deactivate() -- 釋放編輯狀態

getCurrentState() --獲取當前編輯的一些狀態

refresh() -- 刷新編輯的內部狀態

1. 使用步驟

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

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

簡潔版資源：

完整版資源：

修改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 修改成你的項目地址和端口

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

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時候請添加以下兩個引用

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時候請添加以下兩個引用

# 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時候請添加以下兩個引用

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?)

繪制點