百度Web離線地圖WebGIS Demo，百度網(wǎng)頁版離線地圖。

需求情景

項目需要在世界地圖的城市上進行標注，由于在內(nèi)網(wǎng)上使用不能連接外網(wǎng)，所以需要開發(fā)離線地圖功能。試過antv l7和echart，由于沒有離線數(shù)據(jù)的原因不能滿足需求（百度的世界地圖的離線js不能縮放到城市級別，antv即便用了MapBox也會去調(diào)用amap的js）。網(wǎng)上找了很多WebGIS的方案研究了一下，后來因此用瓦片地圖下載器下載了離線數(shù)據(jù)實現(xiàn)（這里用的太樂地圖下載）。

參考

antv l7離線地圖：https://l7.antv.vision/zh/docs/tutorial/map/offline 即便用了MapBox還是會去調(diào)用amap.com的js
echats離線地圖數(shù)據(jù)包：https://github.com/apache/incubator-echarts/tree/master/map 世界地圖只能到國家，不能在城市級別做標注

Html代碼

<!--startprint-->
    <div id="allmap" onselectstart="return false;" oncontextmenu="closePolyLine();enableDragging();"
        style="height: 100%;position:relative;">
    </div>
    <!--endprint-->

Js代碼

<script type="text/javascript" src="js/BaiduApi_2.0.js"></script>
<script src="baiduTilesInfo.js"></script>
<script type="text/javascript">
    var defaultCursor = null;
    var lineArray = new Array();        //線集合
    var currLine = "";                  //當前畫線
    var polyflag = false;               //畫線開關(guān)
    var isFixedMap = false;

    var tileLayer = new BMap.TileLayer();
    tileLayer.getTilesUrl = function (tileCoord, zoom) {
        var x = tileCoord.x;
        var y = tileCoord.y;
        var url = outputPath + zoom + '/' + x + '/' + y + format;
        return url;
    }
    var tileMapType = new BMap.MapType('tileMapType', tileLayer, { minZoom: minLevel, maxZoom: maxLevel });
    var map = new BMap.Map('allmap', { mapType: tileMapType });

    //初始化鼠標
    defaultCursor = map.getDefaultCursor();
    // 定位到地圖中心點
    map.centerAndZoom(new BMap.Point(centX, centY), minLevel);
    // 添加導(dǎo)航控件
    map.addControl(new BMap.NavigationControl());
    // 啟用滾輪放大縮小
    map.enableScrollWheelZoom();
    map.enableContinuousZoom();
    //啟用鍵盤操作
    map.enableKeyboard();

    // 創(chuàng)建用戶自定義地標
    if (pointsStr != "") {
        var points = pointsStr.split("##");
        for (var i = 0; i < points.length; i++) {
            var point = points[i];
            var info = point.split('$');
            addMarker(parseFloat(info[1]), parseFloat(info[0]), info[2], "images/marker_red_sprite.png", 23, 25);
        }
    }

    //添加自定義Marker標注
    function addMarker(lng, lat, markerInfo, iconCursor, cursorWidth, cursorHeight) {
        if (cursorWidth == null) {
            cursorWidth = 23;
        }
        if (cursorHeight == null) {
            cursorHeight = 25;
        }
        var marker;
        if (iconCursor != null) {
            var myIcon = new BMap.Icon(iconCursor, new BMap.Size(cursorWidth, cursorHeight));
            marker = new BMap.Marker(new BMap.Point(lng, lat), {
                icon: myIcon
            }); // 創(chuàng)建標注
        } else {
            marker = new BMap.Marker(new BMap.Point(lng, lat)); // 創(chuàng)建標注
        }
        map.addOverlay(marker); // 將標注添加到地圖中
        if (markerInfo != null) {
            marker.addEventListener("click", function () {
                alert(markerInfo);
            });
        }
    }    
</script>

截屏

Web百度離線地圖開發(fā)截屏

Web百度離線地圖開發(fā)截屏

Web百度離線地圖開發(fā)截屏

源碼目錄結(jié)構(gòu)

BaiduMapOfflineDemo
├── baidu_js ----- 代碼目錄
├    ├── js ------ js目錄
├    ├── images -- 圖片目錄
├    ├── css ----- css目錄
├── tiles -------- 瓦片資源

Demo源碼

https://github.com/loamen/BaiduMapOfflineDemo