圖1

圖2

圖3

-------------------------------------華麗麗的分割線-----------------------------------

圖4

圖5

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

??????? ???????????????? ???

??????????????????????????????????????????????????????????????? 他們的內心是崩潰的……

偉大的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, heightlang.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});

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

哈哈，不說廢話了，直接看結果。

寫在最后：

代碼實現了從地圖要素中讀取屬性數據，然后用dojo的圖表展示出來。當然也可以使用Echarts、amCharts、D3或者highCharts等等的。祝好運。

?

測試示例依然存在一些Bug和美觀問題，如背景非透明（這是圖表框架限制的……）、圖表壓蓋等。還請期待。

總結

以上是生活随笔為你收集整理的AGS API for JavaScript 图表上地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。