百度API加载离线百度电子地图和卫星切片

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wo_buzhidao/article/details/82191922

百度API加载离线百度电子地图和卫星切片,可动态切换

如有侵权请联系删除

  • 本案例展示使用百度离线api加载百度离线切片
  • 效果图如下
    这里写图片描述
    这里写图片描述
  • 使用工具
    1.下载百度切片,可使用太乐地图下载器,可购买正版软件,或其他地图下载器
    2.Tomcat用于发布地图切片,具体方法为利用Tomcat发布虚拟路径,可在我之前博客中找到步骤
    3.下载网上大牛写的离线地图加载包,具体在哪里下载,哪位大神做的我已忘记,在此致敬。
  • *代码如下
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>百度API加载离线百度电子地图和卫星切片</title>
    <style type="text/css">
        body, html,#map_demo, #tab, #mapfrm {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
        #menu{height:100%;overflow-y:auto}
        td{font-size:14px}
        h4{margin:0;}
    </style>
    <link rel="stylesheet" type="text/css" href="css/baidu_map_v2.css"/>
    <script type="text/javascript" src="js/mapControl.js"></script>
</head>
<body>
<input type="button" onclick="satemap();" value="卫星地图">
<input type="button" onclick="normalemap();" value="电子地图">
<div id="map_demo" ></div>
<script type="text/javascript">

    function satemap(){
        bdmapcfg.tiles_dir="http://localhost:8087/itms/baidumap2";
        loadJScript();
    }

    function normalemap(){
        bdmapcfg.tiles_dir="http://localhost:8087/itms/baidumap";
        loadJScript();
    }
    //百度地图API配置
    var bdmapcfg = {
        'home':'source/', //API主目录
        'imgext':'.jpg', //瓦片图的后缀 ------ 根据需要修改,一般是 .png .jpg
        'tiles_dir':'http://localhost:8087/itms/baidumap'   //瓦片图的目录,为空默认在 baidumap_v2/tiles/ 目录
    };
    //百度地图API功能
    function loadJScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "js/baidumap_offline_v2_20160822_min.js";
        document.body.appendChild(script);
//异步加载增加代码
        window.BMap=window.BMap||{};
        window.BMap.apiLoad=function(){
            delete window.BMap.apiLoad;
            if(typeof init=="function"){
                init()
            }
        }
    }
    function init() {
        var lon=108.95346,lat=34.265725;  //坐标位置为钟楼
        var onlinemap=new OnlineMap(lon,lat,"map_demo");
        onlinemap.init();
    }

    //异步加载地图
    window.οnlοad=loadJScript;
</script>
</body>

mapControl.js文件内容如下:

function OnlineMap( lon, lat, dom, mapType) {
    debugger;
    var isShow = false;
    var t1;
    //地图上加载一个要素
    function addCircle() {
        remove_overlay();
        var SW = new BMap.Point(lon - 0.022146, lat - 0.018801);
        var NE = new BMap.Point(lon + 0.022317, lat + 0.018025);

        groundOverlayOptions = {
            opacity : 0.3,
            displayOnMinLevel : 13,
            displayOnMaxLevel : 18
        }
        // 初始化GroundOverlay
        var groundOverlay = new BMap.GroundOverlay(new BMap.Bounds(SW, NE),
            groundOverlayOptions);
        // 设置GroundOverlay的图片地址
        groundOverlay.setImageURL("images/leida_white.gif");

        map.addOverlay(groundOverlay);
    }

    //清除覆盖物
    function remove_overlay() {
        map.clearOverlays();
    }

    //自动刷新要素信息
    function refreshFlyInfo() {
        var level = map.getZoom();
        if (level < 13) {
            remove_overlay();
            isShow = false;
            window.clearInterval(t1);
        } else {
            isShow = true;
        }
        if (isShow) {
            addCircle();
        }
    }
    OnlineMap.prototype.init = function(mapType) {
        map = "";
        map = new BMap.Map(dom,{enableMapClick:false}); // 创建Map实例
        point = new BMap.Point(lon, lat);
        map.centerAndZoom(point, 14);
        map.setMaxZoom(18);
        if(mapType){map.setMapType(mapType);}
        map.enableScrollWheelZoom(); //启用滚轮放大缩小\
        t1 = window.setInterval(function() {
            refreshFlyInfo();
        }, 3000);
        map.addEventListener("zoomend", function() {
            window.clearInterval(t1);
            if (this.getZoom() < 13) {
                remove_overlay();
            } else {
                for (var i = 0; i < map.getOverlays().length; i++) {
                    map.getOverlays()[i].show();
                }
                t1 = window.setInterval(function() {
                    refreshFlyInfo();
                }, 1000);
                addCircle();
            }
        });
        addCircle();
    }
    //显示点图标和文字信息
    OnlineMap.prototype.pointsInfo = function(flyInfo) {
        addCircle();
        if (flyInfo.length > 0) {
            for (var i = 0; i < flyInfo.length; i++) {
                var point1 = new BMap.Point(Number(flyInfo[i].x),
                    Number(flyInfo[i].y));
                var marker = new BMap.Marker(point1); // 创建标注
                marker.setTop(true);
                var icon = new BMap.Icon("images/fly.png",
                    new BMap.Size(80, 80));
                var iconshaow = new BMap.Icon("/images/fly_shadow.png", new BMap.Size(50, 50));
                marker.setIcon(icon);
                marker.setZIndex(100);
                marker.setShadow(iconshaow);
                if (map.getZoom() >= 13) {
                    map.addOverlay(marker); // 将标注添加到地图中
                }
                var label = new BMap.Label(flyInfo[i].message, {
                    offset : new BMap.Size(20, -10)
                });
                marker.setLabel(label);
            }
        }

    }

}
展开阅读全文

没有更多推荐了,返回首页