AGS API for JavaScript 图表上地图
原文:AGS API for JavaScript 图表上地图
图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, 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
});一点运行心情如同下面这图画。
哈哈,不说废话了,直接看结果。
写在最后:
代码实现了从地图要素中读取属性数据,然后用dojo的图表展示出来。当然也可以使用Echarts、amCharts、D3或者highCharts等等的。祝好运。
测试示例依然存在一些Bug和美观问题,如背景非透明(这是图表框架限制的……)、图表压盖等。还请期待。
AGS API for JavaScript 图表上地图的更多相关文章
- ArcGIS api for javascript——查询没有地图的数据
描述 本例展示了用户能够从没有显示服务的地图服务查询数据.大部分地图服务包含属性信息的数据集,数据集能够被查询并显示在一个简单的列或表格里. 本例按提供的州名称查询USA人口普查数据,然后显示关于州的 ...
- ArcGIS API For JavaScript 加载地图,设置地图中心点
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- ArcGIS API for JavaScript使用中出现的BUG(1)
本人在使用ArcGIS API for JavaScript开发一个地图的搜索框时,总是出现一个BUG.如图所示: 搜索框总是出不来. 该引用的也引用了,找了半天终于解决,是因为路径没有定义详细. 应 ...
- ArcGIS API for JavaScript根据两个点坐标在地图上画线
ArcGIS API for JavaScript根据两个点坐标在地图上画线比如说a(xxxx,xxxxx),b(xxxx,xxxxx).利用这两个点画一条线 var polyline = new e ...
- 利用百度API(JavaScript 版)实现在地图上绘制任一多边形,并判断给定经纬度是否在多边形范围内。以及两点间的测距功能
权声明:本文为博主原创文章,未经博主允许不得转载. 利用百度API(JavaScript 版)实现在地图上绘制任一多边形,并判断给定经纬度是否在多边形范围内.以及两点间的测距功能. 绘制多边形(蓝色) ...
- ArcGIS api for javascript——用图表显示查询结果
描述 本例展示了如何使用查询任务结果用去Google Chart API构建一个图表.当运行本例,点击一个郡县去看出现在一个无焦点的InfoWindow中的人口统计的数据的图表. 函数init创建了一 ...
- ArcGIS.Server.9.3和ArcGIS API for JavaScript地图实现Toorbar功能(四)
转自:http://www.cnblogs.com/hll2008/archive/2008/11/22/1338630.html 目的:1.ArcGIS API for JavaScript实现To ...
- arcgis api for javascript本地部署加载地图
最近开始学习arcgis api for javascript,发现一头雾水,决定记录下自己的学习过程. 一.下载arcgis api for js 4.2的library和jdk,具体安装包可以去官 ...
- ArcGis API for JavaScript学习——加载地图
ArcGis API for JavaScript开发笔记——加载地图 在这个例子中使用的离线部署的API(请参见 http://note.youdao.com/noteshare?id=f42865 ...
随机推荐
- BZOJ4013 : [HNOI2015]实验比较
首先用并查集将等号缩点,然后拓扑排序判断有没有环,有环则无解,否则通过增加超级源点$0$,可以得到一棵树. 设$f[x][y]$表示$x$子树里有$y$种不同的数字的方案数,由底向上DP. 对于当前点 ...
- JavaScript事件流
什么是JS事件流 早期的IE事件传播方向为由上至下,即从document逐级向下传播到目标元素:而Netscape公司的Netscape Navigator则是朝相反的方向传播, 也就是从目标元素开始 ...
- c++ map和mutimaps 插入值
(1)运用value_type std::map<std::string, float> col1; col1.insert(std::map<std::string,float&g ...
- 【BZOJ】1441: Min(裴蜀定理)
http://www.lydsy.com/JudgeOnline/problem.php?id=1441 这东西竟然还有个名词叫裴蜀定理................ 裸题不说....<初等数 ...
- BZOJ3238: [Ahoi2013]差异 (后缀自动机)
Description Input 一行,一个字符串S Output 一行,一个整数,表示所求值 Sample Input cacao Sample Output 54 HINT 2<=N< ...
- Dynamic LINQ OrderBy
public static IOrderedQueryable<T> OrderBy<T>(this IQueryable<T> source, string pr ...
- 【问题&解决】手机网页Html代码实现(解决显示页面很小的问题)
工作需要,要做一个手机自适应的网页效果,终于搞定,先分享并记录! 其实主要就是改掉HTML页面声明: 在网页中加入以下代码,就可以正常显示了: <meta name="viewport ...
- tomcat从下载到使用
话说,某天正在和周公聊天下大事.被急促的电话铃声召唤回来,所谓江湖救急,于是远程一看.竟然是需要使用tomcat(汤姆家的猫),于是... 下面关于下载和配置tomcat的过程. ①.使用tomcat ...
- 【收集】JAVA多文件 上传文件接口代码 -兼容app
原文:http://www.verydemo.com/demo_c143_i23854.html 我们在 multifile 中可以很容易的发现如何使用,这里就简单说说了,首先在页面上我们需要有这样几 ...
- mongodb 手动分片的命令汇总
手动分片的操作 自动分片会带来性能的下降. 所以要合理使用手动分片. 并且配合Tag一起使用. # 对于4个shard的程序, 预先处理的指令1. 加入分片服务器sh.addShard( " ...