Qt編寫地圖綜合應用49-地圖類型（街道圖、衛星圖）

一、前言

地圖類型主要是兩種，街道圖和衛星圖，平時我們看到的默認的都是街道圖，無論是街道圖還是衛星圖，都是一張張圖片文件組成的，級別越高，圖片越是清晰，一般都會支持到19級的地圖，相當於精確到20米內的圖像，這個已經完全足夠用了，想要再精確的級別應該是要商業級別的地圖數據了，大部分的應用程序街道圖夠用，也有少部分的程序需要衛星圖，可以看清地貌的情況。

衛星地圖，簡稱衛星圖，確切的說法是衛星遙感圖像，也叫衛星影像。所謂遙感，即遙遠地感知。衛星遙感即通過衛星在太空中探測地球地表物體對電磁波的反射和其發射的電磁波，從而提取這些物體的信息，完成遠距離識別物體。 將這些電波信息轉換、識別得到的圖像，即爲衛星圖。

百度地圖或者其他地圖，都提供了代碼設置默認地圖和快捷懸浮按鈕切換，比如懸浮切換按鈕放在右上角，地圖類型切換後，原有的設備的經緯度座標通用，不用做任何更改。

二、功能特點

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::addProperty(QStringList &list)
{
    if (mapType == 0) {
        //定義地圖對象
        //可設置默認街道圖還是衛星圖等 街道圖: BMAP_NORMAL_MAP 衛星圖: BMAP_SATELLITE_MAP
        list << QString("  var map = new %1.Map('map', {minZoom:%2, maxZoom:%3, enableMapClick:%4, mapType:%5});")
             .arg(mapFlag).arg(mapMinZoom).arg(mapMaxZoom).arg(enableMapClick ? "true" : "false").arg("BMAP_NORMAL_MAP");
        list << QString("  var point = new %1.Point(%2);").arg(mapFlag).arg(mapCenterPoint);
    } else if (!mapLocal) {
        //只有在線地圖纔有其他幾種
        if (mapType == 1) {
            //設置地圖類型爲地球模式  BMap對象全部改爲BMapGL
            list << QString("  var map = new BMapGL.Map('map');");
            list << QString("  var point = new BMapGL.Point(%1);").arg(mapCenterPoint);
            list << QString("  map.setMapType(BMAP_EARTH_MAP);");
        } else if (mapType == 2) {
            list << QString("  var map = new BMapGL.Map('map');");
            list << QString("  var point = new BMapGL.Point(%1);").arg(mapCenterPoint);
        } else if (mapType == 3) {
            list << QString("  var subwayCityName = '%1';").arg(mapCenterCity);
            list << QString("  var list = BMapSub.SubwayCitiesList;");
            list << QString("  var subwaycity = null;");
            list << QString("  var count = list.length;");
            list << QString("  for (var i = 0; i < count; ++i) {");
            list << QString("    if (list[i].name === subwayCityName) {");
            list << QString("      subwaycity = list[i];");
            list << QString("      break;");
            list << QString("    }");
            list << QString("  }");

            list << QString("  var map = new BMapSub.Subway('map', subwaycity.citycode);");
            list << QString("  var zoomControl = new BMapSub.ZoomControl({");
            list << QString("  anchor: BMAPSUB_ANCHOR_BOTTOM_RIGHT,");
            list << QString("  offset: new BMapSub.Size(10,100)");
            list << QString("  });");
            list << QString("  map.addControl(zoomControl);");
            list << QString("  map.setZoom(0.5);");
        }
    }

    //初始化地圖,設置中心點座標或者中心城市和地圖級別.優先按照中心座標設置
    //離線地圖需要採用中心點座標的形式
    if (!mapCenterPoint.isEmpty()) {
        list << QString("  map.centerAndZoom(point, %1);").arg(mapZoom);
    } else {
        list << QString("  map.centerAndZoom(\"%1\", %2);").arg(mapCenterCity).arg(mapZoom);
    }

    if (!mapLocal && mapType == 2) {
        //設置傾斜角角度
        list << QString("  map.setHeading(64.5);");
        list << QString("  map.setTilt(73);");
    }

    //啓用地圖拖拽事件,默認啓用(可不寫)
    if (enableDragging) {
        list << QString("  map.enableDragging();");
    }
    //啓用滾輪放大縮小,默認禁用
    if (enableScrollWheelZoom) {
        list << QString("  map.enableScrollWheelZoom();");
    }
    //啓用鼠標雙擊放大,默認啓用(可不寫)
    if (enableDoubleClickZoom) {
        list << QString("  map.enableDoubleClickZoom();");
    }
    //啓用鍵盤移動,默認禁用
    if (enableKeyboard) {
        list << QString("  map.enableKeyboard();");
    }

    //啓用地圖慣性拖拽,默認禁用
    list << QString("  map.enableInertialDragging();");
    //啓用連續縮放效果,默認禁用
    list << QString("  map.enableContinuousZoom();");
    //啓用雙指操作縮放,默認啓用
    list << QString("  map.enablePinchToZoom();");
    //啓用自動適應容器尺寸變化,默認啓用
    list << QString("  map.enableAutoResize();");

    //向地圖中添加縮放控件
    if (showNavigationControl) {
        list << QString("  map.addControl(new %1.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT, type:BMAP_NAVIGATION_CONTROL_LARGE}));").arg(mapFlag);
    }

    //向地圖中添加縮略圖控件
    if (showOverviewMapControl) {
        list << QString("  map.addControl(new %1.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT, isOpen:1}));").arg(mapFlag);
    }

    //向地圖中添加比例尺控件
    if (showScaleControl) {
        list << QString("  map.addControl(new %1.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT}));").arg(mapFlag);
    }

    //添加地圖類型控件,默認爲空則街道圖+衛星圖+三維圖都有
    if (showMapTypeControl) {
        //街道圖:BMAP_NORMAL_MAP  衛星圖:BMAP_SATELLITE_MAP  混合圖:BMAP_HYBRID_MAP  三維圖:BMAP_PERSPECTIVE_MAP
        list << QString("  map.addControl(new %1.MapTypeControl({mapTypes:[BMAP_NORMAL_MAP,BMAP_SATELLITE_MAP]}));").arg(mapFlag);
    }

    //添加全景控件
    if (showPanoramaCoverageLayer) {
        list << QString("  map.addTileLayer(new %1.PanoramaCoverageLayer());").arg(mapFlag);
        list << QString("  var ctrlPan = new %1.PanoramaControl();").arg(mapFlag);
        list << QString("  ctrlPan.setOffset(new %1.Size(20, 50));").arg(mapFlag);
        list << QString("  map.addControl(ctrlPan);");
    }

    //添加路況控件,離線地圖沒有實時路況
    if (showTrafficControl && !mapLocal) {
        list << QString("  var ctrlTra = new %1Lib.TrafficControl({showPanel:false});").arg(mapFlag);
        list << QString("  ctrlTra.setAnchor(BMAP_ANCHOR_BOTTOM_RIGHT);");
        list << QString("  map.addControl(ctrlTra);");
    }

    //設置顏色主題,2019-6開始收費,屏蔽下面這行即可
    if (!mapStyleName.isEmpty()) {
        //list<< QString("  map.setMapStyle({style:'%1'});").arg(mapStyleName);
    }

    //設置鼠標單擊獲取經度緯度,通過信號發出去
    if (enableClickPoint) {
        list << QString("  map.addEventListener('click', function(e) {");
        list << QString("    var point = e.point.lng + ',' + e.point.lat;");
        list << QString("    receiveData('point', point);");
        list << QString("  });");
    }
#if 0
    //部分設備需要通過事件機制實現鼠標滾輪縮放
    if (enableScrollWheelZoom) {
        list << QString("  window.addEventListener('mousewheel', function(e) {");
        list << QString("    var wheel = e.wheelDelta;");
        list << QString("    if (wheel > 0) {");
        list << QString("      map.zoomIn();");
        list << QString("    } else {");
        list << QString("      map.zoomOut();");
        list << QString("    }");
        list << QString("  });");
    }
#endif
}