ArcGis for JavaScript SDK

头像
BLUE
    阅读 11 分钟
    1

    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可能会引起模块化关键字冲突

    简洁版资源：

    <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}
    5.3 Method Details

    # measureDis()

    测距

    # measureArea()

    测面

    # clearMeas()

    清空测量数据

    # activateToolbar(graphic)

    编辑要素

    • graphic [Object] 图形要素

    # deactivate()

    释放编辑状态

    # getCurrentState()

    获取当前编辑的一些状态
    {tool:当前工具，graphic：正在编辑的要素，isModified：要素是否被修改}

    # refresh()

    刷新工具类的内部状态

    arcgisjavascript
    BLUE
    199 声望19 粉丝

    技术丰富人生,微笑面对未来.....

    « 上一篇
    Ubuntu16.04安装MySql8.0
    下一篇 »
    【GIS数学基础】-01地球的椭球体之地球的形状和大小

    引用和评论

    推荐阅读
    头像
    【GIS数学基础】-06圆锥投影

    BLUE阅读 4.4k

    头像
    前端如何入门 Go 语言

    robin赞 28阅读 8.4k评论 9

    头像
    100个React最佳实践小技巧

    夕水赞 25阅读 6.6k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.2k

    头像
    开发插件集合

    寒青赞 14阅读 3.5k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.5k评论 2

    头像
    Jerry和您聊聊Chrome开发者工具

    注销赞 9阅读 4.8k评论 3

    0 条评论
    得票最新