离线BD瓦片地图加载

ak2111

已于 2024-04-03 12:06:22 修改

阅读量311

点赞数 16

文章标签： html css

于 2024-04-01 13:50:14 首次发布

本文链接：https://blog.csdn.net/ak2111/article/details/137229938

版权

1.概述

2.加载

3.加载代码

1.概述

本实例演示如何加载离线地图瓦片。包含三个文件/文件夹。分别是：bmap_offline、china_1和map.html。双击map.html即可在浏览器看到加载效果。

bmap_offline存放各种js和css，china_1存放离线瓦片资源，这里根据实际情况，是什么就是什么，命名随意，需要和map.html内的名称对应。运行效果如下：

这里截取了部分运行效果，全图在手机上老是提示违规，不知道这样截图算不算违规。

2.加载

bmap_offline就不详细说了，直接使用就行，也可以根据自己的需要改样式。目录结构如下：

china_1这个文件夹，在示例中存储了1-9级全国离线瓦片资源，目录结构如下：

每一级里存放的都是256×256的离线瓦片地图。比如：

这个目录里的资源就是离线瓦片，根据实际情况获取到资源后，放在这里，起个名字，和map.html内对应即可，用文本编辑工具打开map.html，可进行修改，修改后保存，双击即可在浏览器内查看。

bmapcfg.tiles_dir = "china_1";//主地图

var other_layer = [''];//副地图

3.加载代码

<!doctype html>

<html>

<head>

    <title></title>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta http-equiv="Pragma" content="no-cache" />

    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />

    <meta http-equiv="Expires" content="0" />

    <style>

        #allmap{width:100%;height:700px;}

.anchorBL > a { display: none; }

.BMap_cpyCtrl { display: none; }

    </style>

</head>

<body style="margin:0;padding:0">

    <div id="allmap"></div>

    <script src="bmap_offline/jquery_1.9.js"></script>

    <script src="bmap_offline/map_load.js"></script>

    <script>

        $(function () {

            $("#allmap").height($(window).height() - 1);

            bmapcfg.tiles_dir = "china_1";//主地图

            var other_layer = [''];//副地图

            var map = new BMap.Map("allmap", { minZoom: 1, maxZoom: 19 });

            map.centerAndZoom(new BMap.Point("107.027397", "33.619973"), 5);//初始地图中心点和级别

            map.enableScrollWheelZoom(true);

            map.enableKeyboard();

            var blc_opts = { anchor: BMAP_ANCHOR_BOTTOM_RIGHT, offset: new BMap.Size(110, 5) }

            var ctl_blc = new BMap.ScaleControl(blc_opts);

            map.addControl(ctl_blc);

            var navigation_opts =

            {

                anchor: BMAP_ANCHOR_TOP_LEFT,

                offset: new BMap.Size(10, 10),

                type: BMAP_NAVIGATION_CONTROL_ZOOM

            }

            var ctl_navigation = new BMap.NavigationControl(navigation_opts);

            map.addControl(ctl_navigation);

            var overview_opts =

            {

                isOpen: true,

                anchor: BMAP_ANCHOR_BOTTOM_RIGHT,

                offset: new BMap.Size(0, 0),

                size: new BMap.Size(100, 100)

            }

            var ctl_overview = new BMap.OverviewMapControl(overview_opts);

            map.addControl(ctl_overview);



            function ZoomLvControl() {

                this.defaultAnchor = BMAP_ANCHOR_TOP_LEFT;

                this.defaultOffset = new BMap.Size(10, 55)

            }

            ZoomLvControl.prototype = new BMap.Control();

            ZoomLvControl.prototype.initialize = function (map) {

                var div = document.createElement('div');

                div.setAttribute("class", "map_lv");

                div.appendChild(document.createTextNode(map.getZoom()));

                map.getContainer().appendChild(div);

                return div;

            }

            map.addControl(new ZoomLvControl());


            function PointControl() {

                this.defaultAnchor = BMAP_ANCHOR_BOTTOM_LEFT;

                this.defaultOffset = new BMap.Size(10,5);

            }

            PointControl.prototype = new BMap.Control();

            PointControl.prototype.initialize = function (map) {

                var div = document.createElement('div');

                div.setAttribute("class", "map_mousepoint");

                map.getContainer().appendChild(div);

                return div;

            }

            map.addControl(new PointControl());

            map.addEventListener("zoomend", function (e) {

                $(".map_lv").html(map.getZoom())

            })

            map.addEventListener("mousemove", function (e) {

                $(".map_mousepoint").html("当前鼠标坐标位置：" + e.point.lng + "," + e.point.lat);

            })



            $.each(other_layer, function (index, name) {

                var tileLayer = new BMap.TileLayer({ isTransparentPng: true });

                tileLayer.getTilesUrl = function (tileCoord, zoom) {

                    return name + '/' + zoom + '/' + (tileCoord.x + "").replace(/-/gi, "M") + '/' + (tileCoord.y + "").replace(/-/gi, "M") + '.png';

                }

                map.addTileLayer(tileLayer);

            })

        })

    </script>

</body>

</html>

全国范围离线瓦片资源1-12级可从这里下载：

https://download.csdn.net/download/ak2111/89064881?spm=1001.2014.3001.5501