Web百度离线地图开发

百度Web离线地图WebGIS Demo，百度网页版离线地图。

需求情景

项目需要在世界地图的城市上进行标注，由于在内网上使用不能连接外网，所以需要开发离线地图功能。试过antv l7和echart，由于没有离线数据的原因不能满足需求（百度的世界地图的离线js不能缩放到城市级别，antv即便用了MapBox也会去调用amap的js）。网上找了很多WebGIS的方案研究了一下，后来因此用瓦片地图下载器下载了离线数据实现（这里用的太乐地图下载）。

参考

antv l7离线地图：https://l7.antv.vision/zh/docs/tutorial/map/offline 即便用了MapBox还是会去调用amap.com的js
echats离线地图数据包：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;               //画线开关
    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);
    // 添加导航控件
    map.addControl(new BMap.NavigationControl());
    // 启用滚轮放大缩小
    map.enableScrollWheelZoom();
    map.enableContinuousZoom();
    //启用键盘操作
    map.enableKeyboard();

    // 创建用户自定义地标
    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
            }); // 创建标注
        } else {
            marker = new BMap.Marker(new BMap.Point(lng, lat)); // 创建标注
        }
        map.addOverlay(marker); // 将标注添加到地图中
        if (markerInfo != null) {
            marker.addEventListener("click", function () {
                alert(markerInfo);
            });
        }
    }    
</script>

截屏

Web百度离线地图开发截屏 Web百度离线地图开发截屏 Web百度离线地图开发截屏

源码目录结构

BaiduMapOfflineDemo
├── baidu_js ----- 代码目录
├    ├── js ------ js目录
├    ├── images -- 图片目录
├    ├── css ----- css目录
├── tiles -------- 瓦片资源

Demo源码

https://github.com/loamen/BaiduMapOfflineDemo