Arcgis backbone操作感悟

最新推荐文章于 2024-07-22 13:30:10 发布

新时光，我好

最新推荐文章于 2024-07-22 13:30:10 发布

阅读量213

点赞数

分类专栏： Arcgis 文章标签： arcgis backbone.js

本文链接：https://blog.csdn.net/weixin_43131842/article/details/103895101

版权

Arcgis 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

框架概括

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,    //关闭打开之前的panelWidget
		widgetOpen: 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文件，不需要添加后缀名js
                data: 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，方法名为：targetChange
		drawEnd: 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,  //多个graphic
		graphicsLayer: 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参数，获取图片服务，对接多个管网有可能用到

新时光，我好

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Arcgis backbone操作感悟

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

扫一扫

专栏目录