概述

關於web gis中解決前端顯示過多要素（點、線、面）時響應時間和美觀的問題，現在已知的兩種方式：一種是點雲（baidu地圖中的小紅點，其實不是顯示了所有的結果）另一種方式就是：點聚合（把臨近的點聚合成一個大點顯示）。這裡只說點聚合，首先看下Google文章中給出的不聚合和聚合的效果對比。

左圖是沒有點聚合的顯示效果，有沒有密集恐懼症的感覺。這種簡單點標記的還可以勉強接受，如果是飛機、汽車、船舶的標記密集顯示在這裡，那麼整個系統的介面美觀度和使用者可操作性就差到極限了。

在早期的版本中ArcGIS javascript api是沒有實現這個功能的，但是Flex和Silverlight的api中都是有的。總有一種選擇了javascript，但是javascript卻要被ESRI拋棄的感覺，汗...而且最近ESRI的下載網站已經沒有javascript的下載包了，明白的親們給個明白的說法吧...

接下來讓我們一起看下javascript api的實現。

arcgis實現效果圖

arcgis實現點聚合

arcgis javascript api的點聚合是通過提供一個ClusterLayer的定製圖層實現的，具體的說明可以參見esri給出的示例https://developers.arcgis.com/javascript/jssamples/layers_point_clustering.html。 使用時，只需要把示例程式碼下載包中的ClusterLayer.js放到工程的js目錄，新增正確的引用路徑，然後建立ClusterLayer並像其他圖層一樣新增到Map中即可使用。 建立ClusterLayer時傳入的引數如下：

引數名	引數說明
data	傳入聚合圖層的資料陣列。每個資料必須包含x，y，attributes三個屬性
labelColor	標記上顯示的文字顏色，預設為#FFF（白色）
labelOffset	標記文字的垂直方向偏移量，請根據標記圖示的大小來設定合適的值
resolution	解析度，即螢幕畫素和地影象素之間的比例關係，使用map.extent.getWidth() / map.width即可
showSingles	當滑鼠左鍵點選一個聚合後標記時，是否顯示出聚合此標記的所有實際點
singleSymbol	當滑鼠左鍵點選一個聚合後標記時，顯示出的聚合標記包含的所有實際點的顯示樣式
singleTemplate	聚合標記選中後，彈出的屬性顯示框中顯示內容的顯示模板
webmap	宣告地圖是否來源於ArcGIS.com
spatialReference	加入到ClusterLayer的點標記的空間座標系統，預設是102100（web mercator）

關於更具體的實現方式和使用方式，可以到官網去看https://developers.arcgis.com/javascript/jssamples/layers_point_clustering.html。

與其他web類庫對比

對於經常使用OpenLayer的朋友可能要笑話了，因為OpenLayer不僅很早就提供了支援，並且可以實現動畫效果。所謂的動畫效果就是：當地圖縮放的時候，圖層上的點緩慢的從上一個聚合點移動到當前的聚合點。這是一種很好的使用者體驗，這種效果Google地圖、高德地圖也都有，百度地圖似乎沒有（印象看到了百度官方的一個回帖，這裡作者偷懶不去追查了 ; ) ）。

arcgis javascript api比其他好的一個地方是，點選時彈出的對話方塊可以直接使用InfoTemplate，對於習慣InfoTemplate的使用者，應該用起來是很方便的。而且，InfoTemplate很是強大（3.11以後已經解決了之前不能正確顯示多要素的要素屬性，縮放後多要素的要素位置不正確等問題），在裡面放置各種東西都可以，訊息、圖片、視訊隨意。。

深度閱讀

這裡有一個比較好的博文，介紹了其他類庫的：

《Cluster面面觀》http://blog.163.com/ice_gbin/blog/static/175471755201341613352964/

《handle large amounts of markers in google map》http://www.svennerberg.com/2009/01/handling-large-amounts-of-markers-in-google-maps/

《Animated marker cluster strategy for OpenLayers》http://acuriousanimal.com/blog/2012/08/19/animated-marker-cluster-strategy-for-openlayers/