前端项目加载离线的百度地图，利用工具进行切指定区域的地图影像，自定义图层getTilesUrl

百度地图在开发中我们经常使用，但是有些项目是需要在内网进行，这时候我们不得不考虑项目中一些功能需要请求外网静态资源，比如百度地图。只有把包下载到本地，才能让静态资源文件的正常的访问。

获取百度地图开发秘钥

引入在线百度地图

加载离线地图

获取百度地图离线包

引入百度地图离线包

显示指定区域的地图影像

全能电子地图下载器

街道图

混合图

百度地图切图工具

完整代码

获取百度地图开发秘钥

我们使用的v.3.0版本

在项目中要使用百度地图API，必须要有秘钥，获取方法教程jspopularGL | 百度地图API SDK

引入在线百度地图

<style scoped>
#baiduMap {height: 100%;width: 100%;
}</style><template><div id="baiduMap"></div>
</template><script>
import $ from 'jquery'
/* eslint-disable */
export default {name:'baiduMap',data(){return{url:'http://api.map.baidu.com/api?v=3.0&ak=你自己申请的秘钥&callback=createMap'}},mounted(){this.initMap()},methods:{addBaiDuAPI(url){return new Promise((resolve)=>{let script = document.createElement("script");script.src = url;document.body.appendChild(script);resolve()})},async initMap() {const maxZoom =19;let that = this;await that.addBaiDuAPI(that.url);//百度地图加载成功，会回调createMap这个函数window.createMap = () => {window.BMAP_NORMAL_MAP.m.X3 = window.BMAP_NORMAL_MAP.m.mc = window.BMAP_NORMAL_MAP.m.maxZoom = window.BMAP_PERSPECTIVE_MAP.m.X3 = window.BMAP_PERSPECTIVE_MAP.m.mc = window.BMAP_PERSPECTIVE_MAP.m.maxZoom = window.BMAP_SATELLITE_MAP.m.X3 = window.BMAP_SATELLITE_MAP.m.mc = window.BMAP_SATELLITE_MAP.m.maxZoom = window.BMAP_HYBRID_MAP.m.X3 = window.BMAP_HYBRID_MAP.m.mc = window.BMAP_HYBRID_MAP.m.maxZoom = maxZoom;//创建Map实例let map = new BMap.Map("baiduMap", {minZoom: 3, maxZoom: 19}); // 创建Map实例map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 创建点坐标,初始化地图,设置中心点坐标和地图级别map.setMapType(BMAP_NORMAL_MAP);window.baiduMap = map; //存储到全局变量baiduMapmap.enableScrollWheelZoom(true); //开启鼠标滚轮缩放map.enableInertialDragging(); //两秒后开启惯性拖拽setTimeout(function (){//添加地图类型控件map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_ZOOM}));map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));//地图类型，地图，卫星var size = new BMap.Size(20, 220);map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP], anchor: BMAP_ANCHOR_BOTTOM_RIGHT, offset: size,}));map.addEventListener("mousemove", function (e) {$(".BMap_cpyCtrl").text("鼠标位置：" + e.point.lng + "," + e.point.lat)});//城市控件size = new BMap.Size(70, 10);map.addControl(new BMap.CityListControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, offset: size,}));/**map.addEventListener("zoomend", function() {let zoom = map.getZoom();map.centerAndZoom((new BMap.Point(lon, lat)),zoom)});**/},300)};},}
}
</script>

运行加载效果

加载离线地图

获取百度地图离线包

获取地址：链接：https://pan.baidu.com/s/1HgtmntYcQEdCDOii5ypazQ?pwd=yqe7提取码：yqe7

引入百度地图离线包

1、下载好的离线包，放在项目的公共资源目录下

2、修改代码，添加initOfflineMap方法加载离线地图

async initOfflineMap(){let that = this;//加载工具类javascript文件window.bmapConfig = {'tiles_path': '',      //显示普通地图，为空默认在 tiles/ 目录'tiles_satellite_path': '', //显示卫星影像，为空默认在 tiles_satellite/ ，只有底图没有地址标注'tiles_hybrid_path': ''  //显示带有街道的卫星影像，为空默认在 tiles_hybrid/，需和卫星影像配合使用};window.bmapConfig.home_dir = "/static/bmap_offline_demo/"; //地图API主目录window.bmapConfig.tiles_path = bmapConfig.home_dir + "/tiles";window.bmapConfig.tiles_satellite_path = bmapConfig.home_dir + "/tiles_satellite";window.bmapConfig.tiles_hybrid_path = bmapConfig.home_dir + "/tiles_hybird";await that.addScript(window.bmapConfig.home_dir + "map3.0.js");//创建Map实例let map = new BMap.Map("baiduMap", {minZoom: 3, maxZoom: 19}); // 创建Map实例map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 创建点坐标,初始化地图,设置中心点坐标和地图级别map.setMapType(BMAP_NORMAL_MAP);window.baiduMap = map; //存储到全局变量baiduMapmap.enableScrollWheelZoom(true); //开启鼠标滚轮缩放map.enableInertialDragging(); //两秒后开启惯性拖拽setTimeout(function (){//添加地图类型控件map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_ZOOM}));map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));//地图类型，地图，卫星var size = new BMap.Size(20, 220);map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP], anchor: BMAP_ANCHOR_BOTTOM_RIGHT, offset: size,}));map.addEventListener("mousemove", function (e) {$(".BMap_cpyCtrl").text("鼠标位置：" + e.point.lng + "," + e.point.lat)});//城市控件size = new BMap.Size(70, 10);map.addControl(new BMap.CityListControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, offset: size,}));/**map.addEventListener("zoomend", function() {let zoom = map.getZoom();map.centerAndZoom((new BMap.Point(lon, lat)),zoom)});**/},300)},

3、在mounted中使用，需要注释在线地图的方法。

mounted(){// this.initMap() // 加载在线地图this.initOfflineMap() // 加载离线地图},

4、出现淡黄的画面说明引入离线地图成功。

显示指定区域的地图影像

利用切图工具，获取中国地图任意区域的，使用百度地图提供的自定义图层API(getTilesUrl)加载图像。

有两种工具切图：1、全能电子地图下载器。2、百度地图切图工具。

区别：

百度地图切图工具只能切街道图，不能切混合图
全能电子地图下载器app已经提供地图区域，切那个区域由我们自己决定。百度地图切图工具是根据一张图片(png格式)进行切图，根据地图瓦片规则进行切片

根据自己场景需求进行选择。

全能电子地图下载器：https://pan.baidu.com/s/1OzdhPWpIqiRaSiWGs2CVzw?pwd=wc41提取码：wc41。

百度地图切图工具：链接：https://pan.baidu.com/s/1ANKedI6PDr3Hx6mG55XXcw?pwd=m0bi提取码：m0bi。

全能电子地图下载器

2、地图级别一般用13到17级，最大只能切到17级（勾选上18、19什么的也没用，切不了）

一个区域切的级别很多的话，切图速度很慢，如果非要切多级别的，建议级别分开切

3、点击地图，选百度地图，需要的地图类型只有街道图和混合图，这两种地图需要分开切图。

街道图

1、选街道图后，可以选两种切图方式，一种是自己框选，一种是选择某个地区。

2、选择存放路径，点击开始，开始切图。

3、切图完成后，在目录下会有baidumaps文件夹，里面的roadmap文件就是街道图文件。把roadmap文件夹里的全部文件复制到离线地图包bmap_offline_demo/目录下。

roadmap目录名称可以自定义名称

混合图

1、选混合图，其他步骤和街道图一样。

2、切图完成后，把overlay文件夹里的全部文件复制到离线地图包bmap_offline_demo/的tiles_hybird文件夹里，再把satellite文件夹里的全部文件复制到离线地图包bmap_offline_demo/的tiles_satellite文件夹里。

3、添加代码

getTilesUrl方法会在地图缩放改变时，自动调用。

zoom：地图当前所在的缩放级别。

切好的图最好放在服务器上面，因为切的级别越大，文件就越多。切图大小在几百M，G，T级别都是很正常。

//自定义图层let tileLayer = new BMap.TileLayer({isTransparentPng: true});tileLayer.getTilesUrl = function (tileCoord, zoom) {if (zoom >= 3) {var x = tileCoord.x;var y = tileCoord.y;if (x < 0) {x = 'M' + (-x);}if (y < 0) {y = 'M' + (-y);}//根据瓦片的文件路径拼接URLreturn '/static/bmap_offline_demo/roadmap/' + zoom + '/' + x + '/' + y + '.png';}};map.addTileLayer(tileLayer);

4、显示效果，地图显示的就是我们刚刚切好的区域图

百度地图切图工具

1、双击运行BaiduMapTileCutter.exe。

2、选择存储路径，输出类型选择仅图块，输入经纬度，点击下一步。

3、自定义放大级别，最大为19，最小为3。设置之后点击下一步。

4、作为图层保存，点击下一步，随后开始切图。

5、切图成功后，去保存路径查找。

将切好的放大级别的文件放到服务器或项目上，在bmap_offline_demo/目录下新建文件夹，文件夹名称自定义，把切换的瓦片 7.8.9这三个级别放到自定义文件夹目录里面。

需要注意的是，这个自定义文件目录的名称和代码里面的路径一致

完整代码

baiduMap.vue

<style scoped>
#baiduMap {height: 100%;width: 100%;
}</style><template><div id="baiduMap"></div>
</template><script>
import $ from 'jquery'
/* eslint-disable */
export default {name:'baiduMap',data(){return{url:'http://api.map.baidu.com/api?v=3.0&ak=你自己申请的秘钥&callback=createMap'}},mounted(){// this.initMap() // 加载在线地图this.initOfflineMap() // 加载离线地图},methods:{addScript(src) {let script = document.createElement("script");script.src = src;document.body.appendChild(script);},addBaiDuAPI(url){return new Promise((resolve)=>{let script = document.createElement("script");script.src = url;document.body.appendChild(script);resolve()})},async initMap() {const maxZoom =19;let that = this;await that.addBaiDuAPI(that.url);//百度地图加载成功，会回调createMap这个函数window.createMap = () => {window.BMAP_NORMAL_MAP.m.X3 = window.BMAP_NORMAL_MAP.m.mc = window.BMAP_NORMAL_MAP.m.maxZoom = window.BMAP_PERSPECTIVE_MAP.m.X3 = window.BMAP_PERSPECTIVE_MAP.m.mc = window.BMAP_PERSPECTIVE_MAP.m.maxZoom = window.BMAP_SATELLITE_MAP.m.X3 = window.BMAP_SATELLITE_MAP.m.mc = window.BMAP_SATELLITE_MAP.m.maxZoom = window.BMAP_HYBRID_MAP.m.X3 = window.BMAP_HYBRID_MAP.m.mc = window.BMAP_HYBRID_MAP.m.maxZoom = maxZoom;//创建Map实例let map = new BMap.Map("baiduMap", {minZoom: 3, maxZoom: 19}); // 创建Map实例map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 创建点坐标,初始化地图,设置中心点坐标和地图级别map.setMapType(BMAP_NORMAL_MAP);window.baiduMap = map; //存储到全局变量baiduMapmap.enableScrollWheelZoom(true); //开启鼠标滚轮缩放map.enableInertialDragging(); //两秒后开启惯性拖拽setTimeout(function (){//添加地图类型控件map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_ZOOM}));map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));//地图类型，地图，卫星var size = new BMap.Size(20, 220);map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP], anchor: BMAP_ANCHOR_BOTTOM_RIGHT, offset: size,}));map.addEventListener("mousemove", function (e) {$(".BMap_cpyCtrl").text("鼠标位置：" + e.point.lng + "," + e.point.lat)});//城市控件size = new BMap.Size(70, 10);map.addControl(new BMap.CityListControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, offset: size,}));/**map.addEventListener("zoomend", function() {let zoom = map.getZoom();map.centerAndZoom((new BMap.Point(lon, lat)),zoom)});**/},300)};},async initOfflineMap(){let that = this;//加载工具类javascript文件window.bmapConfig = {'tiles_path': '',      //显示普通地图，为空默认在 tiles/ 目录'tiles_satellite_path': '', //显示卫星影像，为空默认在 tiles_satellite/ ，只有底图没有地址标注'tiles_hybrid_path': ''  //显示带有街道的卫星影像，为空默认在 tiles_hybrid/，需和卫星影像配合使用};window.bmapConfig.home_dir = "static/bmap_offline_demo/"; //地图API主目录window.bmapConfig.tiles_path = bmapConfig.home_dir + "/tiles";window.bmapConfig.tiles_satellite_path = bmapConfig.home_dir + "/tiles_satellite";window.bmapConfig.tiles_hybrid_path = bmapConfig.home_dir + "/tiles_hybird";await that.addScript(window.bmapConfig.home_dir + "map3.0.js");//创建Map实例let map = new BMap.Map("baiduMap", {minZoom: 3, maxZoom: 19}); // 创建Map实例map.centerAndZoom(new BMap.Point(107.864933,25.990779), 14); // 创建点坐标,初始化地图,设置中心点坐标和地图级别map.setMapType(BMAP_NORMAL_MAP);window.baiduMap = map; //存储到全局变量baiduMapmap.enableScrollWheelZoom(true); //开启鼠标滚轮缩放map.enableInertialDragging(); //两秒后开启惯性拖拽//自定义图层let tileLayer = new BMap.TileLayer({isTransparentPng: true});tileLayer.getTilesUrl = function (tileCoord, zoom) {if (zoom >= 3) {var x = tileCoord.x;var y = tileCoord.y;if (x < 0) {x = 'M' + (-x);}if (y < 0) {y = 'M' + (-y);}//根据瓦片的文件路径拼接URLreturn '/static/bmap_offline_demo/roadmap/' + zoom + '/' + x + '/' + y + '.png';}};map.addTileLayer(tileLayer);setTimeout(function (){//添加地图类型控件map.addControl(new BMap.ScaleControl({anchor: BMAP_ANCHOR_BOTTOM_LEFT, type: BMAP_NAVIGATION_CONTROL_ZOOM}));map.addControl(new BMap.NavigationControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT}));//地图类型，地图，卫星var size = new BMap.Size(20, 220);map.addControl(new BMap.MapTypeControl({mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP], anchor: BMAP_ANCHOR_BOTTOM_RIGHT, offset: size,}));map.addEventListener("mousemove", function (e) {$(".BMap_cpyCtrl").text("鼠标位置：" + e.point.lng + "," + e.point.lat)});//城市控件size = new BMap.Size(70, 10);map.addControl(new BMap.CityListControl({anchor: BMAP_ANCHOR_BOTTOM_RIGHT, offset: size,}));map.addEventListener("zoomend", function() {let zoom = map.getZoom();map.centerAndZoom((new BMap.Point(107.864933,25.990779)),zoom)});},300)},}
}
</script>