ArcGis for JavaScript SDK

2019-07-14 admin

作者: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>

] 若你是使用的完整版请将 /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 方法添加的图层有效


# showAttachLayer(name)

显示附加图层,只针对 adbLayer 方法添加的图层有效


# destoryAttachLayer(name)

销毁附加图层,只针对 adbLayer 方法添加的图层有效


# hasLayer(name)

判断图层是否存在,只针对 adbLayer 方法添加的图层有效


# zoomIn(zoom)

地图放大


# zoomOut(zoom)

地图缩小


# 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()

清空测量数据

[转载]原文链接:https://segmentfault.com/a/1190000019753824

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69680.html

文章标题:ArcGis for JavaScript SDK

相关文章
JavaScript教程:JS中的原型
Keith Peters 几年前发表的一篇博文,关于学习没有“new”的世界,其中解释了使用原型继承代替构造函数。两者都是纯粹的原型编码。 标准方法(The Standard Way) 一直以来,我们学习的在 JavaScript 里创建对...
2015-11-12
javascript是什么意思
avaScript是Netscape开发的一个对象脚本语言,它使用在世界各地数以百万计的网页和服务器应用程序上。 网景的JavaScript是ecma - 262版的标准脚本语言,和公布的标准只有轻微的差异。 与广为流行的错误理解相反,Ja...
2015-11-12
21天学通javascript
简介: 本书是Javascript入门教程。Javascript是Web开发中应用最早、发展最成熟、用户最多的脚本语言。其语法简洁,代码可读性在众多脚本语言中最好,它在使用时不用考虑数据类型,是真正意义上的动态语言。本书总分为四篇,共21章...
2015-11-16
JavaScript的组成
一个完整的JavaScript由3个部分组成:核心(ECMAScript) 文档对象模型(DOM) 浏览器对象模型(BOM) ECMAScript 描述了该语言的语法和基本对象 ; DOM 描述了处理网页内容的方法和接口 ; BOM 描...
2015-11-12
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
JavaScript 事件流、事件处理程序及事件对象总结
JS与HTML之间的交互通过事件实现。事件就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用监听器(或处理程序)来预定事件,以便事件发生时执行相应的代码。这种在传统软件工程中被称为观察员模式,支持页面的行为与页面的外观之间的松散耦合。...
2017-04-05
JavaScript变量的声明
声明变量 变量在脚本中的首次亮相是在其声明中。 在变量首次出现时将会在内存中设置它,因此您稍后可在脚本中引用它。 应在使用变量之前先声明变量。 可以使用 var 关键字实现此目的。 &lt;span id=“mt9” class=“sent...
2015-11-12
JavaScript短路原理精简代码
js中||和&amp;&amp;的特性帮我们精简了代码的同时,也带来了代码可读性的降低,虽然高效,但请灵活使用。 在js逻辑运算中,0、&quot;&quot;、null、false、undefined、NaN都会判为false,其他都为t...
2015-11-12
7个提高效率的JavaScript调试工具
鐜板湪鐨凧avaScript浜嬪疄涓婂凡鐒舵垚涓轰簡娴佽�岀殑web璇�瑷€锛屽嵆浣垮畠骞朵笉瀹岀編銆傚緢澶氱▼搴忓憳涓嶅枩娆㈢敤JavaScript鍐欎唬鐮侊紝鏄�鍥犱负鍐欏埌鍚庢潵鎬讳細鍑虹幇鍚勭�嶈帿鍚嶅叾濡欑殑bug锛岃€屼笖鍦ㄥ紑...
2015-11-11
React Native 用JavaScript编写原生ios应用
ReactNative 可以基于目前大热的开源JavaScript库React.js来开发iOS和Android原生App。而且React Native已经用于生产环境——Facebook Groups iOS 应用就是基于它开发的。 Re...
2015-11-12
回到顶部