[求助]地图上大数据量呈现方式

<p>移动的项目B/S 结构，需要在地图上呈现所有的基站，可能有几万个。</p>
<p>由于是客户端绘制基站，当数量太大时，地图会很卡，各位有什么好的呈现方式吗？</p>
<p>能减轻浏览器的负荷，同时又能很直观的看出基站的分布、运行状况。</p>

<p>成图后，放到地图服务中发布；</p>
<p> </p>
<p>也可以参考下文中谷歌地图的处理方法 </p>

<font size="4">       在你有一个合理的标记数量的时候，使Google Map标记是很平常的。但是一旦你有几百个、甚至更多地标的时候，性能迅速的开始降低。在本文章中，我会告诉你一些提高性能的方法。同时我会放一个测试页面去比较它们的效率。          如果你是第一次使用Google Map的标记，我建议你先去了解一下在Google Map上使用标记的一些基本原理和操作。<br/>The Marker Manager-Keeps track of them 您的第一选择可能是利用MarkerManager，因为它是一个由谷歌提供的实用工具库。首先要将标记添加到MarkerManager，而不是使用GMap2.addOverlay()逐个的将每一个Marker添加到Map。MarkerManager会不断跟踪你所有的标记。通过定义几个不同的zoom-levels，将可能会同时出现的Marker集合放在同一level上，避免在同一时间大量的Marker同时显示。<br/>MarkerManager 最初比直接加入到地图中有些慢，但是这样添加的好处是你可以更好的控制它们。<br/>使用addMarker(GMarker, minZoom, maxZoom?)将标记添加到MarkerManager，这个方法携带三个参数，第一个是你要添加的标记，后两个参数是可选的，但是界定了在什么level上这个标记是可见的。<br/>A simple example //Create a new map<br/>var map=new GMap2(document.getElementById('map'));<br/>map.setCenter(new GLatLng(59.5,14.0),6);<br/>//Create a new instance of the MarkerManager<br/>var mgr = new MarkerManager(map);<br/>// Create a new marker  <br/>var marker = new GMarker(new GLatLng(59.0, 13.80));  <br/>// Add marker to the MarkerManager  <br/>mgr.addMarker(marker);<br/>明显的，没有谁会想MarkerManager添加单一的标记，但是如果你有几百个标记，那么可能就要这么做了。<br/>Bulk adding the markers 使用MarkerManager更高效的办法是，首先将所有标记添加到一个数组中，然后用addMarkers(markerArray, minZoom, maxZoom?)将这个数组添加到MarkerManager。<br/> <br/>        // Create a new instance of the MarkerManager  <br/>        var mgr = new MarkerManager(map);  <br/>        // Create marker array  <br/>        var markers = [];  <br/>        // Loop to create markers and adding them to the MarkerManager  <br/>        for(var i = 0; i < 50; i += 0.1) {  <br/>            var marker = new GMarker(new GLatLng(59.0 + i, 13.80 + i));  <br/>            markers.push(marker);  <br/>        }  <br/>        // Add the array to the MarkerManager  <br/>        mgr.addMarkers(markers);  <br/>        // Refresh the MarkerManager to make the markers appear on the map  <br/>        mgr.refresh();<br/>         请注意，在将存有标记数组添加到MarkerManager之后，必须调用mgr.refresh()。在逐个添加Marker的时候是不需要的。<br/>附加方法 removeMarker(marker) 从MarkerManager中移除一个标记。<br/>clearMarkers() 移除所有标记。<br/>getMarkerCount(zoom) 返回在指定的zoom-level下的标记个数。<br/> <br/>MarkerManager是Google提供的一个实用工具库。从下面的链接你可以下载源代码以及说明文档和例子。Google Maps MarkerManager SVN：<br/>http://gmaps-utility-library.googlecode.com/svn/trunk/markermanager/release/<br/> <br/>Marker Light - Markers on a diet(高亮标记-首都标记) Google的Pamela Fox 为减少复杂标记，从而提高效率的MarkerLight制作了一个简单的程序。这样做的代价是，真的仅仅是在地图上显示一个图片，但你不能与之交互。如果你不需要与程序交互，那么这种办法真的是一种简单的提高性能的办法，这样做唯一的区别就是你创建的是一个MarkerLight，而不是一个GMarker。<br/>作者Pamelas后来解释了为什么这种方法会提高效率：<br/>GMarker之所以耗时这么长是因为它实际上是由多个DOM元素构成-前景，阴影，打印版本，可点击区域等。<br/>如果你的目的只是显示，那么你可以选择象MarkerLight那样创建一个带有背景URL的DIV那样去创建一个GOverlay的扩展(或者背景颜色、甚至更好的)<br/>                                                                                                                         ------Pamela Fox<br/>以下是如何使用它：<br/>map.addOverlay(new MarkerLight(latlng, {image: "red_dot.png"}));<br/> <br/>red_dot.png这个图片是用于marker中的。这是最小最简单的一个。你可以尝试在Pamelas test page上用不同数量的标记测试效率。Download markerlight.js<br/> <br/>Using Marker Light in combination with MarkerManager-结合MarkerManager使用Marker Light 用MarkerManager的集中式添加MarkerLight的好处很多，而且真的很简单，只是将二者结合起来。<br/>mgr.addMarker(new MarkerLight(latlng, {image: "red_dot.png"}));<br/>这样做的原因是你可以显示在不同缩放级别下不同数量的标记。这种方式可以确保不会有太多的标记在同一时间显示。<br/>Clusterer - Only show what you need 另一种方法是使用ACME实验室群集Clusterer。这是一个第三方库，提供了更快捷的方式加入标记。它是在BSD许可证下发布，并免费提供。<br/>只需要做两件事情，效率会更快：<br/>         1.只有当前可见的标记会被建立。<br/>         2.如果有太多的标记需要显示，那么它们会组合在一起成为群集标记。 <br/>这会让你的地图上即使有成千上万个标记依然能保持良好的性能。我的测试表明，这种方法的效率要显著快于使用MarkerManager的方式。<br/>以下是如何使用它：<br/>        // Create a Clusterer object  <br/>        var clusterer = new Clusterer(map);  <br/>        // Create marker  <br/>        var marker = new GMarker(new GLatLng(57.8, 14.0));  <br/>        // Add marker to the map  <br/>        clusterer.AddMarker(marker, 'text to infobox');  <br/>调用clusterer.RemoveMarker(marker)方法来从Map中移除标记。另外还有一些方法来改变标志的行为。<br/>1.       clusterer.SetIcon(GIcon)  改变簇的图标<br/>2.       clusterer.SetMaxVisibleMarkers(n)  设置标记最多可见的数量门限，默认值是150.<br/>3.       clusterer.SetMinMarkersPerCluster(n) 为一个标记集合设置最少的标记数，默认值是5.<br/>4.       clusterer.SetMaxLinesPerInfoBox(n) 设置信息框内文本的最大行数，默认值是10.<br/>Download Clusterer2.js<br/> <br/>ClusterMarker - Chunk 'em all up ClusterMarker是一个根据GNU通用公共许可证发布的免费javascript库，可以集中添加标记。这个库的独特行在于它会自动检测标记，彼此相交和集成为一个标记群集。<br/>下面的图片说明是如何工作的：<br/>  <img src="http://pic002.cnblogs.com/img/sunyu829/201007/2010072922111624.jpg"/><br/>Images by Martin Pearman<br/>该构造函数有两个参数，如下：<br/>var cluster = new ClusterMarker(map, options).<br/> <br/>Map是对一个有如下属性的对象引用的 map对象和选项的参考(map is a reference to the map object and options is an object literal that can have these properties:)<br/>1.       clusterMarkerIcon [GIcon]          将默认的簇标记图标更改为你所选择的图标。<br/>2.       markers [array]          所有你想传递给ClusterMarker的标记的数组<br/>除了这些属性，你也可以使用类中的其他所有属性，查看完整的文档说明列表documentation。<br/>如下是如何使用最少的代码量，用ClusterMarker添加标记：<br/>    var markerArray = [];   <br/>    // Insert code to fill the markerArray with markers...   <br/>    // Creating a new cluster by adding the map and the markerarray   <br/>    var cluster = new ClusterMarker(map, {markers: markerArray});   <br/>    // Refreshing to show the added markers   <br/>cluster.refresh();<br/>这段代码将会在地图上插入标记，如果他们足够近的话，就用一个图标表示他们。欲了解更多关于如何细粒度操作的几种方法和属性，有关详细说明类库是如何工作的，在Clustermarker 项目页面上有很多优秀的文档。Clustermarker Project page.<br/>MarkerClusterer - The new kid in town 这个使用工具库的所有都是最新的，在我最初写这篇文章的时候还没有。这个库，是吴小溪写的，谷歌地图的开放源码工具库的一部分，易于使用，具有优良的性能。<br/>像其他的类库一样，他们聚集在一起使其更容易有一个概观，减少了可见标记的数量。观看下面的图像，看看如何：<br/> <img src="http://pic002.cnblogs.com/img/sunyu829/201007/2010072922113996.jpg"/><br/>Image by Xiaoxi Wu<br/> <br/>它的构造函数需要三个参数，第一个是地图的引用，第二个是一个GMarkers数组，第三个被选择的对象与文字。只有第一个参数是必须的。<br/>        var markers = [];   <br/>        // Insert code to fill the markerArray with markers...   <br/>        // Creating a new cluster by adding the map and the array of markers   <br/>        var markerCluster = new MarkerClusterer(map, markers);  <br/>查看完整的说明文档和它的功能documentation。更多信息去GoogleGeo开发博客读MarkerClusterer: A Solution to the Too Many Markers Problem。<br/> <br/>Compare performance <img src="http://pic002.cnblogs.com/img/sunyu829/201007/2010072922130635.jpg"/><br/><br/>Compare the different techniques on the Test page<br/>我的灵感来自于Pamela Fox的对MarkerLight的测试页，我也做了一个我自己的测试页<br/>，你也可以测试本文中所有不同做法的性能。<br/>结果：我在几个不同的浏览器运行了测试，每一个测试，我使用不同的技术添加500个标记，每次测试之间我刷新浏览器。所有的测试平台采用一个具有3.60 GHz的奔腾4处理器和超线程运行Windows XP的2 GB内存的PC。<br/>Load times in milliseconds (ms)<br/> <img src="http://pic002.cnblogs.com/img/sunyu829/201007/2010072922132477.jpg"/><br/>在这个测试中，Clusterer2是所有技术中最快的一个。但是要知道这是不是真实的数据，因为我只能够测量从我提交它们到标记传递到地图的时间，而不是知道在地图上看见标记的实际时间。当考虑到这方面，我觉得MarkerClusterer是最快的技术，紧随其后的是ClusterMarker。<br/> <br/>当谈到浏览器，性能最高的是带有绿色标记的浏览器，性能最差的带有红色标记的浏览器。毫无疑义，IE性能很差。谷歌浏览器和Safari整体上表现出，他们的javascript引擎和性能一直很快。<br/> <br/>如果你有什么好的想法去改善这个测试，使之能够更好的衡量直到标记在地图上显示实际时间，请在评论中通过共享或我的主页联络我。Contact page.<br/> <br/>结论利用这篇文章中的技术，执行效果一般都很好，因为你没有一个令人难以置信的大量的标记。对于一些特殊的场合，这些技术并不能满足你的需求，你将不得不采取更加极端的措施，例如，创建一个大的覆盖层，覆盖所有的标记，但是这超出了本文的讲述范围。<br/></font>

<p>您好：</p>
<p>谢谢你的建议，但是我这儿可能有点困难，如下：</p>
<p>1.网络环境是内网环境；地图是由移动提供的，地图服务是采用ArcGis提供。因此不能使用Google Map的服务</p>
<p>2.我尝试过采用后台生成图片的方式来呈现，但是这样会使前端呈现效果不好，例如：鼠标移动到基站上后要显示ToolTip，点击后的动画效果等不好做。</p>
<p>我在前端采用Silverlight来呈现。</p>
<p> </p>
<p>我尝试了ArcGis的聚类，这样能减少界面的元素。但是ArcGis 提供的API扩展性不高，我想自己研究一下算法，网上的算法文档大部分都是论文，要收费的，能否提供点聚类的资料或者链接？</p>
<p>谢谢了</p>