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,    //關閉打開之前的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參數，獲取圖片服務，對接多個管網有可能用到

Arcgis backbone操作感悟

框架概括

Backbone和arcgis

初步使用框架

書寫自己的頁面

頁面跳轉的實現方式

框架中封裝地圖的方法

已知組件

其他

Arcgis backbone操作感悟

js三大系列

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結