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() — 清空测量数据

1. 使用步骤

• 将该 SDK 包放置于项目工程根目录，如果使用的静态化资源的情况，请 静态化该 SDK 包 以保证路径“/arcgisdk”可以访问 SDK 包内文件
• 在 html 页面中添加资源引用，如果你是用的是模块化进行开发，请暂时将地图界面抽离成单独的 html，该 SDK 可能会引起模块化关键字冲突

简洁版资源：

<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.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)
// Map 为 BaseMap 类的实例

5.3 Method Details

# measureDis()

测距

---

# measureArea()

测面

---

# clearMeas()

清空测量数据