Arcgis for Javascript实现图
首先，截个图给大家看结果：
初始化状态
放大后的状态
点击选中后的状态
如上图所看到的，一般的涉及到的地图的统计涉及到上述所展示的三个状态：1、初始化状态。2、缩放后的状态；3、点击选中显示详情状态。第一种状态下，载入统计图。一般来说，在地图上显示的统计图仅仅是一个趋势或者示意，具体的还得去点击显示。另外一种状态。随着地图的缩放，地图统计图随着地图的大小变化。第三种状态，点击选中，在信息框显示具体的统计图的信息。
首先，跟大家谈谈地图统计图几种实现方式。眼下情况下，在Arcgis for Javascript以下，实现统计图有三种方式。
1、示意图方式
示意图方式是最简单的一种方式。什么意思呢。就是用一个静态的png图片的方式，示意图的数据不代表真实的数据，示意在该状态时是地图统计图，具体的统计信息在点击示意图的时候才会出现。
2、后台生成图片方式
后台生成图片的方式也是有非常多人採取的一种解决方式，在这样的方式下，地图上的统计图的数据代表真实的数据信息，地图上的统计图是在后台用java或者c#生成的，并在地图上展示出来，并通过点击获取具体统计信息，这样的处理方式就是将压力交给server，减小client压力。可是显示的效果不好。
3、前台直接展示方式
前台直接展示是将统计数据传给前台，前台生成统计图的方式。这样的方式对client的压力比較大。并且从技术上来说，也是最难的。
了解了上述三种统计图的生成方式。接下来了解一下统计图在地图中的展示方式。
不论是上述那种方式。统计图在地图中的显示都是通过graphic和graphiclayer来展示的，仅仅是前两种展示的是栅格图，后一种方式展示的是矢量图，每个统计图是一个graphic对象。统计图在graphiclayer中显示。
下文将具体的讲述上述三种状态下的实现思路与方式。
第一，载入统计图。
在此，数据是json格式的。统计图的显示是通过X与Y去定位的，JSON的数据例如以下：
var CITY_DATA={
"total":34,
"items":[{"id":1,"name":"乌鲁木齐","X":87.575829,"Y":43.782212},
{"id":2,"name":"拉萨","X":91.162998,"Y":29.71042},
{"id":3,"name":"西宁","X":101.797303,"Y":36.593642},
{"id":4,"name":"兰州","X":103.584297,"Y":36.119086},
{"id":5,"name":"成都","X":104.035508,"Y":30.714179},
{"id":6,"name":"重庆","X":106.519115,"Y":29.478925},
{"id":7,"name":"贵阳","X":106.668071,"Y":26.457312},
{"id":8,"name":"昆明","X":102.726775,"Y":24.969385},
{"id":9,"name":"银川","X":106.167225,"Y":38.598524},
{"id":10,"name":"西安","X":108.967128,"Y":34.276112},
{"id":11,"name":"南宁","X":108.233931,"Y":22.748296},
{"id":12,"name":"海口","X":110.346181,"Y":19.96992},
{"id":13,"name":"广州","X":113.226683,"Y":23.18307},
{"id":14,"name":"长沙","X":112.947928,"Y":28.169916},
{"id":15,"name":"南昌","X":115.893715,"Y":28.652363},
{"id":16,"name":"福州","X":119.246768,"Y":26.070765},
{"id":17,"name":"台北","X":121.503567,"Y":25.008274},
{"id":18,"name":"杭州","X":120.183046,"Y":30.330584},
{"id":19,"name":"上海","X":121.449707,"Y":31.253361},
{"id":20,"name":"武汉","X":114.216597,"Y":30.579253},
{"id":21,"name":"合肥","X":117.262302,"Y":31.838353},
{"id":22,"name":"南京","X":118.805692,"Y":32.085022},
{"id":23,"name":"郑州","X":113.6511,"Y":34.746308},
{"id":24,"name":"济南","X":117.048331,"Y":36.60841},
{"id":25,"name":"石家","X":114.478215,"Y":38.033276},
{"id":26,"name":"太原","X":112.483066,"Y":37.798404},
{"id":27,"name":"呼和浩特","X":111.842806,"Y":40.895751},
{"id":28,"name":"天津","X":117.351094,"Y":38.925719},
{"id":29,"name":"沈阳","X":123.296299,"Y":41.801604},
{"id":30,"name":"长春","X":125.26142,"Y":43.981984},
{"id":31,"name":"哈尔","X":126.567138,"Y":45.69381},
{"id":32,"name":"北京","X":116.068276,"Y":39.892225},
{"id":33,"name":"香港","X":114.093117,"Y":22.427852},
{"id":34,"name":"澳门","X":113.552482,"Y":22.184495}
]
};
紧接着，就是显示统计图，代码例如以下：
var chartLayer = new GraphicsLayer({"id":"chartLayer"});
map.addLayer(chartLayer,1);
chartLayer.on("click",showDetailChart);
addReadPopup(CITY_DATA);
function addReadPopup(data){
var items= data.items;
for(var i=0;i<data.total;i++){
var symbol = new PictureMarkerSymbol("bar.png",20,30);
symbol.setOffset(-10,18);
var pt=new Point(items[i].X,items[i].Y,map.spatialReference);
var graphic = new esri.Graphic(pt,symbol,items[i]);
chartLayer.add(graphic);
}
};
通过X与Y。将每个统计图通过graphic的方式加入到graphiclayer里。
第二。缩放时统计图大小的变化。
地图缩放时，统计图的大小也得随着地图的缩放发生相相应的变化，例如以下：
map.on("zoom-end",function(zoom){
var level=zoom.level;
var symbol = new PictureMarkerSymbol("bar.png",20*(level-3),30*(level-3));
symbol.setOffset(-10*(level-3),18*(level-3));
var graphics = chartLayer.graphics;
for(var i=0;i<graphics.length;i++){
graphics[i].symbol = symbol;
chartLayer.redraw();
}
});
这里。主要通过监听map的zoom-end事件，去又一次绘制统计图。
第三，点击显示具体图。
点击是监听的graphiclayer的click事件，点击图通过infowindow的方式显示具体统计图信息，这里面就好做多了，例如以下：
function showDetailChart(evt){
var graphic = evt.graphic;
graphic.symbol.url="bar_select.png";
chartLayer.redraw();
map.infoWindow.setTitle("<b>"+graphic.attributes.name+"</b>");
var content="<div style='text-align: center;'><img src='bar_detail.png'/></div>";
map.infoWindow.setContent(content);
map.infoWindow.show(graphic.geometry);
$(".maximize").hide();
$(".close").click(function(){
restoreChart(evt);
});
};
function restoreChart(evt){
var graphic = evt.graphic;
graphic.symbol.url="bar.png";
chartLayer.redraw();
};
通过以上几步，就基本上实现了地图统计图部分的功能。完整代码例如以下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Simple Map</title>
<link rel="stylesheet" href="http://localhost/arcgis_js_api/library/3.9/3.9/js/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
</style>
<script src="http://localhost/arcgis_js_api/library/3.9/3.9/init.js"></script>
<script src="jquery-1.8.3.js"></script>
<script>
var CITY_DATA={
"total":34,
"items":[{"id":1,"name":"乌鲁木齐","X":87.575829,"Y":43.782212},
{"id":2,"name":"拉萨","X":91.162998,"Y":29.71042},
{"id":3,"name":"西宁","X":101.797303,"Y":36.593642},
{"id":4,"name":"兰州","X":103.584297,"Y":36.119086},
{"id":5,"name":"成都","X":104.035508,"Y":30.714179},
{"id":6,"name":"重庆","X":106.519115,"Y":29.478925},
{"id":7,"name":"贵阳","X":106.668071,"Y":26.457312},
{"id":8,"name":"昆明","X":102.726775,"Y":24.969385},
{"id":9,"name":"银川","X":106.167225,"Y":38.598524},
{"id":10,"name":"西安","X":108.967128,"Y":34.276112},
{"id":11,"name":"南宁","X":108.233931,"Y":22.748296},
{"id":12,"name":"海口","X":110.346181,"Y":19.96992},
{"id":13,"name":"广州","X":113.226683,"Y":23.18307},
{"id":14,"name":"长沙","X":112.947928,"Y":28.169916},
{"id":15,"name":"南昌","X":115.893715,"Y":28.652363},
{"id":16,"name":"福州","X":119.246768,"Y":26.070765},
{"id":17,"name":"台北","X":121.503567,"Y":25.008274},
{"id":18,"name":"杭州","X":120.183046,"Y":30.330584},
{"id":19,"name":"上海","X":121.449707,"Y":31.253361},
{"id":20,"name":"武汉","X":114.216597,"Y":30.579253},
{"id":21,"name":"合肥","X":117.262302,"Y":31.838353},
{"id":22,"name":"南京","X":118.805692,"Y":32.085022},
{"id":23,"name":"郑州","X":113.6511,"Y":34.746308},
{"id":24,"name":"济南","X":117.048331,"Y":36.60841},
{"id":25,"name":"石家","X":114.478215,"Y":38.033276},
{"id":26,"name":"太原","X":112.483066,"Y":37.798404},
{"id":27,"name":"呼和浩特","X":111.842806,"Y":40.895751},
{"id":28,"name":"天津","X":117.351094,"Y":38.925719},
{"id":29,"name":"沈阳","X":123.296299,"Y":41.801604},
{"id":30,"name":"长春","X":125.26142,"Y":43.981984},
{"id":31,"name":"哈尔","X":126.567138,"Y":45.69381},
{"id":32,"name":"北京","X":116.068276,"Y":39.892225},
{"id":33,"name":"香港","X":114.093117,"Y":22.427852},
{"id":34,"name":"澳门","X":113.552482,"Y":22.184495}
]
};
var map, mapCenter;
require([
"esri/map",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/FeatureLayer",
"esri/layers/GraphicsLayer",
"esri/geometry/Point",
"esri/symbols/PictureMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
"esri/renderers/SimpleRenderer",
"dojo/_base/Color",
"dojo/domReady!"],
function(Map,
Tiled,
FeatureLayer,
GraphicsLayer,
Point,
PictureMarkerSymbol,
SimpleLineSymbol,
SimpleRenderer,
Color)
{
map = new Map("map", {logo:false,slider: true});
var tiled = new Tiled("http://localhost:6080/arcgis/rest/services/chinamap/MapServer");
map.addLayer(tiled,0);
mapCenter = new Point(103.847, 36.0473, map.spatialReference);
map.centerAndZoom(mapCenter,4);
var chartLayer = new GraphicsLayer({"id":"chartLayer"});
map.addLayer(chartLayer,1);
chartLayer.on("click",showDetailChart);
addReadPopup(CITY_DATA); function addReadPopup(data){
var items= data.items;
for(var i=0;i<data.total;i++){
var symbol = new PictureMarkerSymbol("bar.png",20,30);
symbol.setOffset(-10,18);
var pt=new Point(items[i].X,items[i].Y,map.spatialReference);
var graphic = new esri.Graphic(pt,symbol,items[i]);
chartLayer.add(graphic);
} map.on("zoom-end",function(zoom){
var level=zoom.level;
var symbol = new PictureMarkerSymbol("bar.png",20*(level-3),30*(level-3));
symbol.setOffset(-10*(level-3),18*(level-3));
var graphics = chartLayer.graphics;
for(var i=0;i<graphics.length;i++){
graphics[i].symbol = symbol;
chartLayer.redraw();
}
});
};
function showDetailChart(evt){
var graphic = evt.graphic;
graphic.symbol.url="bar_select.png";
chartLayer.redraw();
map.infoWindow.setTitle("<b>"+graphic.attributes.name+"</b>");
var content="<div style='text-align: center;'><img src='bar_detail.png'/></div>";
map.infoWindow.setContent(content);
map.infoWindow.show(graphic.geometry);
$(".maximize").hide();
$(".close").click(function(){
restoreChart(evt);
});
};
function restoreChart(evt){
var graphic = evt.graphic;
graphic.symbol.url="bar.png";
chartLayer.redraw();
};
});
</script>
</head> <body>
<div id="map">
</div>
</body>
</html>
最后，第三种方式的实现眼下本人正在努力实现。实现后会第一时间与大家分享，如有不正确。还望指正！
如有疑问。请联系QQ：1004740957或者e-mail：niujp08@qq.com。联系请说明来意。谢谢！
版权声明：本文博客原创文章，博客，未经同意，不得转载。
Arcgis for Javascript实现图的更多相关文章
- Arcgis for Javascript之featureLayer图和属性互操作性
说明:主要实现加载FeatureLayer并显示属性表,而要实现联动属性表与地图,首先,看看实施后的效果: 显示效果 如上图所看到的,本文章主要实现了下面几个功能:1.FeatureLayer属性表的 ...
- ArcGIS for JavaScript继承TiledMapServiceLayer来实现“动态切图”
这种方式可以提高出图速度于效果,算法见http://blog.newnaw.com/?p=633,我用ArcGIS for JavaScript API来实现.具体代码为: function init ...
- Arcgis for Javascript之featureLayer图和属性的互操作
说明:主要实现加载FeatureLayer与显示属性表,并实现属性表与地图的联动,首先,看看实现后的效果: 显示效果 如上图所示,本文章主要实现了以下几个功能:1.FeatureLayer属性表的分页 ...
- Arcgis for Javascript API下类似于百度搜索A、B、C、D marker的实现方式
原文:Arcgis for Javascript API下类似于百度搜索A.B.C.D marker的实现方式 多说无益,首先贴两张图让大家看看具体的效果: 图1.百度地图搜索结果 图2.Arcgis ...
- arcgis for javascript之ArcGISDynamicMapServiceLayer图层控制的实现
图层控制是非常多GIS系统里面必须的一个小功能,本文就说说arcgis for javascript下ArcGISDynamicMapServiceLayer图层控制的实现方式.首先看图: 实现效果 ...
- Arcgis for javascript map操作addLayer具体解释
本节的内容非常easy.说说Arcgis for Javascript里面map对象的addLayer方法.在for JS的API中,addLayer方法有两种.例如以下图: watermark/2/ ...
- 利用Arcgis for javascript API绘制GeoJSON并同时弹出多个Popup
1.引言 由于Arcgis for javascript API不可以绘制Geojson,并且提供的Popup一般只可以弹出一个,在很多专题图制作中,会遇到不少的麻烦.因此本文结合了两个现有的Arcg ...
- ArcGIS for JavaScript学习（一）
一 API准备 从网上下载开发包:ArcGIS for JavaScript(百度网盘地址) sdk中含有API的帮助和例子 2.离线部署(以IIS为例) 配置IIS(详见网络):解压离线包,包中的 ...
- Arcgis for Javascript之统计图的实现
首先,截个图给大家看看效果: 初始化状态 放大后的状态 点击选中后的状态 如上图所示,一般的涉及到的地图的统计涉及到上述所展示的三个状态:1.初始化状态:2.缩放后的状态:3.点击选中显示详情状态.第 ...
随机推荐
- [Angular2 Form] Validation message for Reactive form
<div class="form-field"> <label>Confirm Password: </label> <input typ ...
- RocketMQ 安装详细说明
原文:RocketMQ 安装详细说明 目录 本文导读 环境说明 RocketMQ 下载 从 Apache 下载 从 GitHub 下载 RocketMQ 安装 文件上传 项目解压 编译部署 Rocke ...
- form表单上传附件的几种方法
问题描述:在网页开发过程中,当需要上传附件(图片,音频,视频等)时,常规方法是使用form表单进行提交,这里总结一下form表单提交的几种方法. 参考地址:http://www.cnblogs.com ...
- Centos6.5 网络配置
网络配置 本教程配置说明 以下为本教程安装时的配置,用户依据实际情况进行调整 * 在root用户权限下安装下完毕 * IP地址设置为 10.10.108.160 * 本机DNS设置为 8.8.8.8 ...
- 忙里偷闲( ˇˍˇ )闲里偷学【C语言篇】——（9）链表
我们至少可以通过两种结构来存储数据 数组 1.需要一整块连续的存储空间,内存中可能没有 2.插入元素,删除元素效率极低. 3.查找数据快 链表 1.查找效率低 2.不需要一块连续的内存空间 3.插入删 ...
- Android Notification如何显示表情？
遇到这种分析用什么实现的,肯定要祭出大杀器Android Device Monitor(AS在Tools->Android)打开之后,选中连接的设备,然后点击小手机图标,即可导出UI层次图.咱们 ...
- [Ramda] Curry and Uncurry Functions with Ramda
Most of the functions offered by the ramda library are curried by default. Functions you've created ...
- Android的NDK开发(2)————利用Android NDK编写一个简单的HelloWorld
1.Android NDK简介 NDK全称为native development kit本地语言(C&C++)开发包.而对应的是经常接触的Android-SDK,(software devel ...
- C# 关于反射事件
在frmMain类中的代码 private void StartRun(string tag, string date, bool tipType) { var d ...
- form的get与post方式的区别（转）
form元素的method属性用来指定发送form的http方法 使用get时,form数据集被附加到form元素的action属性所指定的URL后面,仅仅是拼接一个URL,然后直接向服务区请求数据, ...