彩票走势图

google地图大数据量处理的几种方式

转帖|其它|编辑:郝浩|2011-01-24 15:44:02.000|阅读 2179 次

概述:最近用到了Google地图进行开发,对Google地图的API有了初步的认识。使用Google API开发一般都会用到Marker,用来标注位置。本文将对显示大数据量的Marker进行研究和讨论。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

  最近用到了Google地图进行开发,对Google地图的API有了初步的认识。使用Google API开发一般都会用到Marker,用来标注位置。本文将对显示大数据量的Marker进行研究和讨论。

  问题提出:

  如果你需要在地图上展示大数据量的Marker,就会发现两个问题。

  1、性能问题:如果在地图上添加越多的Marker,使用起来就会感觉速度越慢。速度的快慢还取决浏览器和计算机的配置。在google浏览器上会比IE上快很多。

   2、可用性问题。地图上Marker越多,就会越不宜用。当然这还取决于Marker的密集度。如果这些Marker都很分散,关系不是很大。如果很密 集,用户就看不到地图上的东西了。如下图:显示10个、100个问题不大。当显示1000个的时候,地图被这些Marker占据了。

  显示10个marker,没有什么问题

  

  显示100个,感觉有点拥挤了。

  

  显示1000个,根本看不到地图上任何东西了。

  

  解决方案:

  方案一:减少显示数量

  1、在我们系统中,可以通过一个搜索框。比如:通过搜索,在地图上标注深圳所有沃尔玛超市的位置。

  2、加过滤。原则跟上面一样,减少显示的Marker。如:加一个过滤机制,只标注人口超越100W的城市。

  方案二:集群显示

  前面两种都是通过减少marker显示的数量来解决问题的,下面看看如果不减少marker的数量来到底同样的效果。方案就是通过集群的方式。根据一定 规则将Marker划分到不同的群中。根据地图的不同缩放级别显示不同的marker集群。当地图缩放的时候,继续将更多的相关的marker集中在这个 组中,用这个组代替marker显示。当放大到一定级别再显示marker本身。如1000个marker展示为下图:

  

  当缩小地图显示层级时,继续进行相关集群:

  

  但放大地图显示层级的时候分散集群:

  

  那又根据什么规则来集群的呢?下面介绍三种集群的方式:

  1、基于网格:将地图分割成很多网格。根据地图不同的缩放级别的在同一个网格中的marker集群在一个分组中。

  2、基于距离:这个很好理解,将距离近的marker显示在一个分组中。

  3、基于分区:我们可以将地图分成不同的分区,比如根据省份将地图分成不同的分区。将省份中的marker集中在一起显示。

  示例:

  下面我通过例子来实现以上的效果。

  1、使用MarkerClusterer,MarkerClusterer是一个google地图第三方的类库。它是基于网格分组的。

  创建地图:

1 // 创建地图
2 var options = {
3 zoom: 12,
4 center: new google.maps.LatLng(22.50, 114.07),
5 mapTypeId: google.maps.MapTypeId.ROADMAP
6 };
7 var map = new google.maps.Map(document.getElementById('map'), options);

  在可视的地图范围内创建1000个marker,并使用MarkerClusterer显示

01 google.maps.event.addListenerOnce(map, 'bounds_changed', function() {
02
03 // 获取地图分界线
04 var bounds = map.getBounds();
05
06 // 获取地图的角
07 var southWest = bounds.getSouthWest();
08 var northEast = bounds.getNorthEast();
09
10 // 计算地图从上到下的距离
11 var latSpan = northEast.lat() - southWest.lat();
12
13 // 计算地图从左到右的距离
14 var lngSpan = northEast.lng() - southWest.lng();
15
16 // 创建数据保存Marker对象
17 var markers = [];
18
19 // 创建一个循环
20 for (var i = 0; i < 1000; i++) {
21
22 //创建随机数
23 var lat = southWest.lat() + latSpan * Math.random();
24 var lng = southWest.lng() + lngSpan * Math.random();
25 var latlng = new google.maps.LatLng(lat, lng);
26
27 // 创建Marker,注意它没有添加到地图上面
28 var marker = new google.maps.Marker({
29 position: latlng
30 });
31
32 // 将Marker添加到数组中
33 markers.push(marker);
34
35 }
36
37 //创建一个MarkerClusterer对象,将marker数组对象传递给它
38 var markerclusterer = new MarkerClusterer(map, markers);
39
40 });

  

  2、使用markermanager。markermanager是基于分区的方式的。

  下面我在定义两个省份的marker:湖南和广东。湖南这个分区中定义长沙、常德、永州三个城市。广东定义广州、深圳、东莞三个城市。但层级大于6显示城市,否则显示省份的集群。代码如下:

01 (function() {
02
03 window.onload = function() {
04
05 // 创建地图
06 var options = {
07 zoom: 5,
08 center: new google.maps.LatLng(26.41, 111.61),
09 mapTypeId: google.maps.MapTypeId.ROADMAP
10 };
11 var map = new google.maps.Map(document.getElementById('map'), options);
12
13 // 初始化MarkerManager
14 var mgr = new MarkerManager(map);
15
16
17 // 创建表示湖南的marker
18 var hunan = new google.maps.Marker({
19 position: new google.maps.LatLng(28.19, 112.98),
20 icon: 'img/cluster.png'
21 });
22
23 // 给hunan添加一个点击事件
24 google.maps.event.addListener(hunan, 'click', function() {
25
26 //设置地图的层级
27 map.setZoom(7);
28
29 // 设置中心点
30 map.setCenter(hunan.getPosition());
31
32 });
33
34 // 创建表示广东的marker
35 var guangdong = new google.maps.Marker({
36 position: new google.maps.LatLng(22.50, 114.07),
37 icon: 'img/cluster.png'
38 });
39
40 // 给hunan添加一个点击事件
41 google.maps.event.addListener(guangdong, 'click', function() {
42
43 //设置地图的层级
44 map.setZoom(7);
45
46 // 设置中心点
47 map.setCenter(guangdong.getPosition());
48
49 });
50
51
52 var states = [hunan, guangdong];
53 // 创建湖南和广东省的城市
54 var cities = [
55 // 永州
56 new google.maps.Marker({ position: new google.maps.LatLng(26.41155054662258, 111.610107421875) }),
57 // 常德
58 new google.maps.Marker({ position: new google.maps.LatLng(29.017748018496046, 111.68701171875) }),
59 // 衡阳
60 new google.maps.Marker({ position: new google.maps.LatLng(28.22697003891834, 112.91748046875) }),
61 // 广州
62 new google.maps.Marker({ position: new google.maps.LatLng(23.120153621695614, 113.2470703125) }),
63 // 深圳
64 new google.maps.Marker({ position: new google.maps.LatLng(22.512556954051437, 114.0380859375) }),
65 //东莞
66 new google.maps.Marker({ position: new google.maps.LatLng(22.998851594142913, 113.75244140625) })
67 ];
68
69 // 在使用MarkerManager之前,确保MarkerManager已经加载
70 google.maps.event.addListener(mgr, 'loaded', function() {
71
72 // 这些marker在 1 到 5显示
73 mgr.addMarkers(states, 1, 5);
74
75 // 这些marker在大于6显示
76 mgr.addMarkers(cities, 6);
77
78 // 将MarkerManager添加到地图上
79 mgr.refresh();
80
81 });
82
83 };
84
85 })();

  集群显示:

  

  点击集群,分散显示marker。

  

  总结:本文就google地图大数据量的显示进行了探索,介绍了几种大数据量处理的方式。

 


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:网络转载

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP