AGS API for JavaScript 圖表上地圖

時間 2019-11-18

標籤 ags api javascript 圖表地圖欄目 JavaScript 简体版

原文原文鏈接

原文: AGS API for JavaScript 圖表上地圖

圖1html

圖2node

圖3程序員

-------------------------------------華麗麗的分割線-----------------------------------瀏覽器

圖4網絡

圖5框架

……圖片欣賞到這吧，我想各位已經知道要表達什麼了。先來解釋一下圖片，圖一、2和3是十二、13和14三年的生產總值在ArcMap的不一樣表達，是否是以爲表達很簡單、很直觀也很粗暴！圖4和圖5展現的是全國農林牧漁業發生洪澇災害後的統計狀況，這個但是在瀏覽器上展現的噢，只是展現的，然而。。。。。。然而在這個網絡流行的社會，咱們不會爲了看到這樣一副美麗直觀的地圖來攜帶這個ArcMap或者對每一種表達都發一個如圖4和圖5這樣效果的服務。並且，還不能和地圖交互，同時，偉大的ArcGIS API for JavaScript也沒有提供相關接口，是否是感受到天已經黑了。dom

他們的心裏是崩潰的……ide

偉大的GISer來了———想要和地圖交互效果的衆生們，大家的黎明就要來了！測試

話說回來，實現圖表上圖，我的理解有兩種方式。優化



某天在AGS羣裏忽然發現有個大神（望留名）已經實現的在地圖上面展現圖表的，並且本身寫了圖標的樣式。部分代碼以下：

constructor: function (parameters) {
		        lang.mixin(this, parameters);
		        isContentShowing = false;

		        domClass.add(this.domNode, "myInfoWindow");
		        this._content = domConstruct.create("div", { "class": "content" }, this.domNode);
		        this._eventConnections = [];
		        domUtils.hide(this.domNode);
		        this.isShowing = false;
		    },

		    setMap: function (map) {
		        this.inherited(arguments);
		        this._eventConnections.push(map.on("pan", lang.hitch(this, this.__onMapPan)));
		        this._eventConnections.push(map.on("extent-change", lang.hitch(this, this.__onMapExtChg)));
		        this._eventConnections.push(map.on("zoom-start", lang.hitch(this, this.__onMapZmStart)));
		        this._eventConnections.push(map.on("zoom", lang.hitch(this, this.onMapZm)));
		    },

其代碼調用部分：

var infoWindow = new ChartInfoWindow({
                         domNode: domConstruct.create('div', null, document.getElementById('map'))
                    });
                    infoWindow.setMap(map);
					
                    var nodeChart = null;
                    nodeChart = domConstruct.create("div", { id: 'nodeTest' + i, style: "width:120px;height:50px" }, win.body());
                    var chart = makeChart(nodeChart,showFields,max,i);
                    //optinalChart = chart;
                    infoWindow.resize(122, 52);
                    
					//計算幾何的中心位置，將圖表信息框放置於此
					var labelPt = new Point(Data[i][1],Data[i][2],map.SpatialReference);
                    infoWindow.setContent(nodeChart);
                    infoWindow.__mcoords = labelPt;
                    infoWindow.show(map.toScreen(labelPt));

按照程序員的作法，確定是啃源碼！一看，其大體思路是infowindowbase，一看調用，確實有點費勁，內心癢癢、因此走起了個人代碼優化之路，通過混天地暗的奮鬥，終於搞定。

constructor: function (parameters) {//map, chartPoint, chart, width, height
		        lang.mixin(this, parameters);
		        isContentShowing = false;
                this.domNode= domConstruct.create('div',null, document.getElementById('map_root').parentNode);
                domClass.add(this.domNode, "myInfoWindow");
				domUtils.hide(this.domNode);
                this._content = domConstruct.create("div", { "class": "content"}, this.domNode);
                this.setContent(this.chart);
				this.__mcoords= this.chartPoint;
		        this._eventConnections = [];
		        this.isShowing = false;
				this.setMap(this.map);
				this.show(this.map.toScreen(this.chartPoint));
				this.resize(this.width, this.height);
		    },

調用部分：

var chartInfo= new ChartInfoWindow({
                                    map: map,
                                    chart:nodeChart,
                                    chartPoint: chartPoint,
                                    width: 123,
                                    height: 123
                                });

一點運行心情如同下面這圖畫。