圖1

圖2

圖3

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

圖4

圖5

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

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

??????????????????????????????????????????????????????????????? 他們的內(nèi)心是崩潰的……

偉大的GISer來了———想要和地圖交互效果的眾生們，你們的黎明就要來了！

話說回來，實現(xiàn)圖表上圖，個人理解有兩種方式。

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

某天在AGS群里突然發(fā)現(xiàn)有個大神（望留名）已經(jīng)實現(xiàn)的在地圖上面展示圖表的，而且自己寫了圖標的樣式。部分代碼如下：

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)));},

其代碼調(diào)用部分：

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，一看調(diào)用，確實有點費勁，心里癢癢、所以走起了我的代碼優(yōu)化之路，經(jīng)過混天地暗的奮斗，終于搞定。

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);},

調(diào)用部分：

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

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

哈哈，不說廢話了，直接看結(jié)果。

寫在最后：

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

?

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。