Arcgis backbone操作感悟

框架概括

Backbone和arcgis

框架采用backbone,backbone依赖于jquery和underscore,主要是使用了backbone的view视图，MVC结构，没有使用model模型，和路由功能，单页面。
地图主要是采用arcgis js来经行的二次开发，客户端绘制图形主要是继承graphicLayer类，还包括地图其他的一些事件。

初步使用框架

书写自己的页面

写自己的模块都是继承自basewidget,写的最多的是继承panelWidget和Tabwidget,最终都是在widgetManager.js这个文件方法名为addWidgetnew出一个widget

panelWidget基本介绍

panelWidget基本模板:

define(["widgets/PanelWidget", "text!./ClickQuery.html"], function (PanelWidget, template) {var Widget = PanelWidget.extend({events: {"click #clickQueryGeInfo": "queryClick"  //书写方式 事件名 选择器 ：方法},contentRender: function () {return _.template(template)();  //括号里面template为上面define里面定义的变量，template变量为html内容},closePanel:false,    //关闭打开之前的panelWidgetwidgetOpen: function () {   //打开panelWidget窗口之前所经行的操作},widgetClose: function () {  //关闭panelWidget窗口之前所经行的操作},});return Widget;
});

  + panelWidget注意事项：

可以拖拽，最小化，关闭，panelWidget视图分为header和body，写的内容都是写在body里面，header里面的内容都是在系统运维配置里面读取过来

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ou2GaPh3-1578475158142)(./img/panelWidget.png “panelWidget”)]

TabWidget基本介绍

TabWidget的模板介绍

define(["widgets/TabWidget", "text!./DataCheck.html", "gis/Graphic", "tools/DrawTool"], function (TabWidget, template, Graphic, DrawTool) {var Widget = TabWidget.extend({events: {},className:"tabWidget", //防止样式污染showMap:true,   //显示地图render: function () {this.$el.html(template)return this;},widgetOpen: function () {},widgetClose: function () {},});return Widget;
});

TabWidget注意事项：
TabWidget面板是一整个空白内容，所以所有东西都需要自己书写
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cHEW9N9D-1578475158143)(./img/TabWidget.png “TabWidget”)]

页面跳转的实现方式

使用widgetManager.js这个文件方法名为addWidget的方法,widgetManager.js被暴露成一个全局对象widgetManager，来从一个页面跳转到另一个页面
```
widgetManager.addWidget({pipenetLayer: this.pipenetLayer,  //地图图层属性widgetId: _.uniqueId("widget_"),label: "快速查询结果",  url: url,  //跳转页面的url=>js文件，不需要添加后缀名jsdata: this.allLayerDetailsInfo,parent: this,}).done(function(widget) {//跳转完成经行的回调函数});
```
使用这种方式跳转时，如果是panelWidget跳转到PanelWidget，默认情况原来的PanelWidget最小化显示，原来的还存在，如果是TabWidget跳转到TabWidget,原来的销毁掉，所以无状态保持
第二种方式是直接继承自backbone，使用这方式，相当于new出一个子元素继承backbone视图
```
this.AllEquipmentStatisticsShows = new AllEquipmentStatisticsShow(options);
this.AllEquipmentStatisticsShows.setElement($(this.el).find('.AllEquipmentStatisticsPanel')).render();
```
new出一个对象时会调用initiliaze方法，但不会调用render方法，必须手动调用render方法，render方法里面渲染视图
子页面向父页面传值
- 子页面向父页面传值，必须保准父页面没有被销毁，相当于重新激活父亲对象，所以如果两个都是TabWidget,不能使用框架封装的widgetManager对象的方法
- 使用第二种方法继承自backbone，儿子调用trigger方法，父亲使用on方法监听
儿子里面写的方法
```
this.trigger("goto", pageIndex, this.pageSize) //方法名，传递参数
```
在父亲里面接收
```
me.infoTable.on('goto',function(pageIndex,pageSize){me.pageIndex = pageIndex;me.pageSize = pageSize;me.pagerQuery(pageIndex,pageSize);
})
```
或者监听儿子方法，父亲也做相应处理
```
this.listenTo(this.son, "QueryTabClosed", this.hideTableDiv.bind(this));//儿子对象，儿子方法，父亲方法
```

框架中封装地图的方法

graphic概念
客户端描绘显示的图形，一般都是new graphic()对象，包含geometry图形，attribute属性，infoTemplate(新版本中只有Popup面板，4.x版本以后)模板，symbol符号
初始化地图，地图里面的一些信息，都是在mapManager.js这个文件里面看到，挂在到window.mapManger,一般情况下都不会用到

地图常用的一些方法

监听地图事件

 var mapListenEvent = this.view.on('click\extent-change\pointer-move',function(){})//监听地图事件，view.on('事件名',回调函数);//一般关闭窗口前都需要移除，否则此事件一直都在监听mapListenEvent.remove();//watch事件一般是观察对象的某个属性是否发生变法

坐标转换

    toScreen(),toMap(),地图坐标与屏幕坐标之间相互转换(比较常用)

视图转移

    this.view.goTo({target:graphic,zoom:options?})//默认有动画显示，视角转移到graphic中心

hitTest返回与指定屏幕坐标相交的图形

   this.view.hitTest(screenPoint).then(function(res){})//返回与地图相交的要素

geometryTool.js里面封装了以下几个方法，其余方法自行测试，挂在的对象是window.geomUtils
- toGeometry(jsonObj, mapMng)方法：将geometry JSON形式转化为对象形式，常用于获取到请求的json转化为对象后续处理
- getGeometryType(geometry)方法：获取geometryType形状，一般有矩形，点，线段，多边形，多点(不常用)
- geomCenter(geometry)方法：获取中心点坐标
- calculateExtent(geometries, mapMng)方法：传入多个geometry获取边界，使用场景将地图范围调整到当前所有设备的视角
MessageTool.js里面主要是用来弹出消息和加载动画，挂在的对象是window.msgUtils
在地图上画图组件的操作

 drawTool.activate({action: "point",  //画图类型点丶矩形丶多边形target: "ClickQuery",  //填写的target一般都没用用到，但实际上有一个监听回调函数，判断当前target是不是激活时的target，方法名为：targetChangedrawEnd: this._viewOnClickHandler.bind(this),  //回调函数toolTip: '提示文字' //选填，默认有相对应的文字});

封装画图组件的操作，封装后的效果如上图2所示，wgtUtils里面还有一个图层方法在WidgetTool.js这个文件方法为createLayerSelector()这个为新界面的方法，

 wgtUtils.createNewDrawToolBar({pipenetLayer: this.pipenetLayer,container: createDraw,  //画图的容器type: DrawType.FULLEXTENT | DrawType.CURRENTEXTENT | DrawType.EXTENT | DrawType.POLYGON, //画图类型target: "SpecialStatisticsNew",width: '85%',isTitle: true,  callback: function(obj) {  //回调函数if (obj) {this.geometry = obj.geometry;}}.bind(this)});

客户端绘制图形(常用),需要引入GraphicsLayer和Graphic

 var graphicsLayer = new GraphicsLayer({listMode:'hide'});this.view.map.add(graphicsLayer);var graphic = new Graphic({geometry:geometry,symbol:symbol})graphicsLayer.add(graphic);//关闭窗口之前一般都要经行清除操作if(graphicsLayer){graphicsLayer.removeAll();this.view.map.remove(graphicsLayer);}

绘制聚合图形时需要引入ClusterLayer

 this.clusterLayer = new ClusterLayer({data: this.allFeatures,  //多个graphicgraphicsLayer: this.graphicsLayer,options: {minGraphicCount: this.minGraphicCount  //最小聚合数量}});

其他地图方法需自行测试

已知组件

文件上传组件，包括单个文件和多个文件，在components文件夹里面fileupload
表格组件，TableV5,只有简单翻页，利于扩展
Tip面板组件，components\Tip.js，(使用鼠标mousedown事件)
日期控件: components\datepicker,date对象绑定个一个格式化时间函数
jqwidget组件：window\jqwidget，组件功能较丰富，样式较丑，常用的是jqxgrid，只不过现在一般都用TableV5来代替
echarts组件：也是直接挂在在window下面

其他

mapManger主要是对地图的一些操作，widgetManger主要是对我们写出来的面板如何展示的一些操作,
```
   new widget() \\通过_.extend()方法，将view和pipentlayer给到new出来的对象
```
使用最多的是map()和filter方法，两者可以链式调用，发送请求使用做多的是request方法

 request(url,{query:query,catchBust:true}).then(function(respones){}.bind(this)).otherWise(function(error){}.bind(this))

自定义Tip组件实现的原理，通过在mapManger.js new出一个TipManger，在TipManger里面监听地图增加GraphicLayer和移除GraphicLayer地图移动等方法的监听，在调用Tip对象父亲的方法，有刷新位置等方法，我们书写的Tip面板都是继承Tip.js，我们的Tip render()方法覆盖父亲方法,渲染内容。只能传入点进去，传线段会报错

 var tip = new Tip({location: geometryTip,data: [{attributeTable:getPopUpTemplateData},{media:{url:'product/webgisPanda/Tip/media',layerId:layerId,oid:oid,code:feature.attributes.code,name:'media'}},],parent: me,name: 'SpecialStatisticsTip'})var areaGraphic = new Graphic({geometry: geometryGraphic,symbol: symbol,attributes: 'id',name: "myAreaGraphic",tip: tip});me.renderLayer.add(areaGraphic); //当增加Graphic时，监听到，经行Tip相关操作

对象	arcgis popup面板	自定义Tip面板
地图移动	平稳，一直显示	比较平稳，缩放过程隐藏
点击	左键单击，右键查看属性	只能使用鼠标mousedown事件
自适应	完全响应	需要后期Tip面板自行处理
定制化	不能经行定制化	定制化，自由程度较高
扩展性	扩展的组件，在其他面板显示	扩展组件，可以就在Tip面板显示

_config下面有相关的功能配置信息
挂在的一些全局功能组件对象是在app.js文件new出来，而面板，地图对象是在paltform.js文件new出来
图片没有使用雪碧图，封装的组件，有多个图片时，替换图片之间有一定的空白间隙。

 var allLayersAndSublayers = map.layers.flatten(function(item){  //colection集合里面方法，递归遍历出所有符合条件的子元素，很实用return item.layers || item.sublayers;  //相当于递归调用，对出生成树控件应该有很好的处理});

底图的出图服务是在MapImageLayer中，重新添加了获取图片url参数，获取图片服务，对接多个管网有可能用到

Arcgis backbone操作感悟相关推荐

ArcGIS软件操作——地图制图
ArcGIS软件操作系列二(地图制图) 2016年毕业,参加工作,除了平时出差,大部分时间都在使用ArcGIS处理数据.制图,在此,先将一些制图的小心得撰写出来,希望能与各位共同交流. 1 数据准备: ...
arcgis js 移除某一个点_GIS Experience （二）：ArcGIS实践操作问题集
1 如何删除影像黑边? 1.1 symbology 只在当前界面隐藏背景值0,实际仍存在 1.2 raster copy 新文件剔除掉背景值0 2 如何给影像设定坐标系? 2.1 catalog属性修 ...
【ArcGIS微课1000例】0016：ArcGIS书签操作（添加书签、管理书签）知多少？
书签可以将地图数据的某一视图状态保存起来,以便在使用时打开书签,直接回到这一视图状态.可创建多个书签以便快速回到不同的视图状态,也可以对书签进行管理. 文章目录 1 创建书签 2 管理书签注意:书签 ...
arcgis 授权操作
ArcGIS Enterprise 许可前期准备: 默认情况获取.prvc形式许可,这种情况下: 获取其中的授权码采用许可授权文档中的离线方式提前进行转换获取ecp形式的许可特别注意,Linu ...
gis中的加权求和工具在哪里_干货分享 | 地理加权回归介绍及其arcgis软件操作
一.地理加权回归模型概述橘生淮南则为橘,生于淮北则为枳,叶徒相似,其实味不同.所以然者何?水土异也.--<晏子春秋·内篇杂下>这段文字很好的描述了空间异质性.从地理空间的角度,经济发展尤 ...
Arcgis地理操作
Arcgis有一个很快捷的方式,能够迅速找到新旧地名位置. ①通过"地理配准",多个旧地图重叠. 只要第一步"地理配准"合适,经纬度几乎完全吻合.其实近代的旧地 ...
ArcGIS实验操作一：绘制自定义线、垂直、平行线（附实验数据下载）
本专栏整理自汤国安.钱柯健.熊礼阳等教授编著的<地理信息系统基础实验操作100例>,感谢! 文章目录一.实验背景二.实验数据三.实验步骤 1.准备数据 2.数字化线 3.绘制固定端点 ...
Arcgis实例操作20--线分割面数据、删除线多余节点、提取点群最小边界几何
1.如何用线要素对面要进行素分割?(更方便的方法,建议使用) 1)加载分割面工具. 打开[菜单栏]|[自定义]|[自定义模式]对话框,选择[命令]|[拓扑]|[分割面工具],将其拖动至任意工具条内后释 ...
ArcGIS编辑操作的常用快捷键一览表
在ArcMap中,快捷键与一些编辑工具和命令相关联.使用快捷键能使编辑工作更加快捷有效,总结如下: 一.公共快捷键(对所有编辑工具有效): Z:放大 X:缩小 C:漫游 V:显示节点 ESC:取消 C ...