前端项目加载离线的百度地图,利用工具进行切指定区域的地图影像,自定义图层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; //存储到全局变量baiduMap
        map.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; //存储到全局变量baiduMap
      map.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);
          }
          //根据瓦片的文件路径拼接URL
          return '/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; //存储到全局变量baiduMap
        map.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; //存储到全局变量baiduMap
      map.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);
          }
          //根据瓦片的文件路径拼接URL
          return '/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>

  • 17
    点赞
  • 20
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 5
    评论
加载离线影像地图,首先需要下载适当的地图数据。可以从第三方服务或者官方地图提供商处获取这些数据。一旦数据下载完成,就可以使用gmap平台提供的工具加载这些离线地图。以下是详细的步骤: 1. 下载地图数据:从合适的来源获取离线地图数据。这可能需要使用特定的软件或者工具来下载地图数据,这取决于地图提供商的要求。 2. 准备地图数据:一旦数据下载完毕,需要对地图数据进行预处理,以便gmap平台能够正确加载和显示这些离线地图。这可能包括对数据进行压缩、格式转换、标记地图范围等操作。 3. 导入地图数据到gmap平台:使用gmap提供的工具或者接口,将准备好的地图数据导入到gmap平台中。这可能需要按照gmap平台的要求进行一些配置和设置。 4. 配置地图加载:在gmap平台上设置离线地图加载方式和参数,确保地图可以在需要的时候正确显示和使用。这可能包括设置地图的缩放级别、标记地图范围、添加地图图层等操作。 5. 测试地图加载:在加载完毕后,进行一些测试,确保离线地图可以正确显示和使用。这可能包括在不同的设备上测试地图加载速度、缩放功能、地图标注等操作。 通过以上步骤,就可以在gmap平台上成功加载和使用离线影像地图。这样用户就可以在没有网络连接的情况下,也能够方便地查看和浏览地图信息。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

草样的年华

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值