Qt撰寫地圖綜合應用27-點聚合

一、前言

在地圖上查詢結果通常以標記點的形式展現，但是如果標記點較多，不僅會大大增加客戶端的渲染時間，讓客戶端變得很卡，而且會讓人產生密集恐懼癥，為了解決這一問題，我們需要一種手段能在用戶有限的可視區域范圍內，利用最小的區域展示出最全面的資訊，而又不產生重疊覆寫，這就是點聚合功能的由來，百度地圖內置類點聚合的功能，在專案初期可能只有個位數的設備需要在地圖上顯示，隨著設備數量的增多，會發現標注點不僅密密麻麻而且變得越發卡頓，這樣就需要有個合并的功能，就某個區域的點都合并到一個點圖示展示，當用戶單擊該合并后的點以后，再去展開具體的詳細的標注點，監控行業、電力行業都用得非常頻繁，

最簡單的設定點聚合的方式是將傳入標注點坐標集合，轉換生成標注點物件陣列，再生成的時候可以設定點的名稱、經緯度、其他資訊等，然后實體化一個MarkerClusterer物件，再將生成的標注點物件陣列傳給這個物件即可，具體的點聚合演算法我們也無需知道，基本上都是比較智能的，當我們縮小地圖范圍時候可以看到多個集中的標注點消失了，變成了統一的一個點聚合圖示，單擊此圖示會自動展開下屬的所有標注點，一般建議在設定點聚合的時候要規劃好，哪些標注點屬于哪個點聚合，盡量一個區域內的放在一起，

二、功能特點

1. 同時支持在線地圖和離線地圖兩種模式，
2. 同時支持webkit內核、webengine內核、miniblink內核、IE內核，
3. 支持設定多個標注點，資訊包括名稱、地址、經緯度，
4. 可設定地圖是否可單擊、拖動、滑鼠滾輪縮放，
5. 可設定協議版本、秘鑰、主題樣式、中心坐標、中心城市、地理編碼位置等，
6. 可設定地圖縮放比例和級別，縮略圖、比例尺、路況資訊等控制元件的可見，
7. 支持地圖互動，比如滑鼠按下獲取對應位置的經緯度，
8. 支持查詢路線，可設定起點位置、終點位置、路線模式、路線方式、路線方案（最少時間、最少換乘、最少步行、不乘地鐵、最短距離、避開高速），
9. 可顯示點線面工具，可直接在地圖上劃線、點、矩形、圓形等，
10. 可設定行政區劃，指定某個城市區域繪制圖層，在線地圖自動輸出行政區劃邊界點集合到js檔案給離線地圖使用，
11. 可靜態或者動態添加多個覆寫物，支持點、折線、多邊形、矩形、圓形、弧線、點聚合等，
12. 提供函式介面處理經緯度決議成地址和地址決議成經緯度坐標，
13. 提供的demo直接可以單獨選點執行對應的處理比如路線查詢，
14. 可以拿到路線查詢到的點坐標資訊集合，比如用于機器人坐標導航等，
15. 封裝了豐富的函式比如洗掉指定點和所有點，洗掉指定覆寫物和所有覆寫物等，
16. 標注點彈框資訊可以自定義內容，標準html格式，
17. 標注點單擊事件可選 0-不處理 1-自己彈框 2-發送信號，
18. 標注點可設定影片效果 0-不處理 1-跳動 2-墜落
19. 標注點可設定本地圖片檔案等，
20. 函式介面友好和統一，使用簡單方便，就一個類，
21. 支持js動態互動添加點、洗掉點、清空點、重置點，不需要重繪頁面，
22. 支持任意Qt版本、任意系統、任意編譯器，

三、體驗地址

1. 體驗地址：https://pan.baidu.com/s/1ZxG-oyUKe286LPMPxOrO2A 提取碼：o05q 檔案名：bin_map.zip
2. 國內站點：https://gitee.com/feiyangqingyun
3. 國際站點：https://github.com/feiyangqingyun
4. 個人主頁：https://blog.csdn.net/feiyangqingyun
5. 知乎主頁：https://www.zhihu.com/people/feiyangqingyun/

四、效果圖

五、相關代碼

void MapBaiDu::getPoints(QStringList &list)
{
    //通用多個點坐標轉換成 BMap.Point 物件
    //坐標格式 121.414,31.1828|121.414,31.1838|121.416,31.1838
    list << QString("  function getPoints(points) {");
    list << QString("    var pts = []");
    list << QString("    var listPoint = points.split('|');");
    list << QString("    var len = listPoint.length");
    list << QString("    for (var i = 0; i < len; i++) {");
    list << QString("      var list = listPoint[i].split(',');");
    list << QString("      var pot = new BMap.Point(list[0], list[1]);");
    list << QString("      pts.push(pot);");
    list << QString("    }");
    list << QString("    return pts;");
    list << QString("  }");
}

void MapBaiDu::getMarkers(QStringList &list)
{
    //通用多個點坐標轉換成 BMap.Marker 物件
    //坐標格式 121.414,31.1828|121.414,31.1838|121.416,31.1838
    list << QString("  function getMarkers(points) {");
    list << QString("    var markers = []");
    list << QString("    var listPoint = points.split('|');");
    list << QString("    var len = listPoint.length");
    list << QString("    for (var i = 0; i < len; i++) {");
    list << QString("      var list = listPoint[i].split(',');");
    list << QString("      var pot = new BMap.Point(list[0], list[1]);");
    list << QString("      var marker = new BMap.Marker(pot);");
    list << QString("      markers.push(marker);");
    list << QString("    }");
    list << QString("    return markers;");
    list << QString("  }");
}

void MapBaiDu::getBounds(QStringList &list)
{
    //獲取可視區域經緯度 bssw=左下角 bsne=右上角 bsce=中心
    list << QString("  function getBounds() {");
    list << QString("    var bs = map.getBounds();");
    list << QString("    var bssw = bs.getSouthWest();");
    list << QString("    var bsne = bs.getNorthEast();");
    list << QString("    var bsce = bs.getCenter();");
    list << QString("    var rect = bssw.lng + ',' + bssw.lat + ',' + bsne.lng + ',' + bsne.lat + ',' + bsce.lng + ',' + bsce.lat + ',' + map.getZoom();");
    //信號發出去
    list << QString("    receiveData('bounds', rect);");
    list << QString("  }");
}

void MapBaiDu::getBoundary(QStringList &list)
{
    //獲取邊界點集合
    list << QString("  function getBoundary() {");
    list << QString("    for (var i = 0; i < polygons.length; i++) {");
    list << QString("      var polyline = polygons[i];");
    list << QString("      var pts = polyline.getPath();");
    list << QString("      var result = '';");
    list << QString("      for (var j = 0; j < pts.length; j++) {");
    list << QString("        result += pts[j].lng + ',' + pts[j].lat + ';';");
    list << QString("      }");
    list << QString("      receiveData('newboundary', result);");
    list << QString("    }");
    list << QString("  }");
}

void MapBaiDu::getZoom(QStringList &list)
{
    //獲取當前地圖縮放級別
    list << QString("  function getZoom() {");
    list << QString("    var zoom = map.getZoom();");
    list << QString("    receiveData('zoom', zoom);");
    list << QString("  }");
}

void MapBaiDu::addMarkerClusterer(QStringList &list)
{
    //動態添加點聚合
    list << QString("  function addMarkerClusterer(points) {");
    list << QString("    var markers = getMarkers(points);");
    //最簡單的用法,生成一個marker陣列,然后呼叫markerClusterer類即可
    list << QString("    var markerClusterer = new BMapLib.MarkerClusterer(map, {markers:markers});");
    list << QString("  }");
}