vue项目使用个性化离线百度地图

原创已于 2022-11-28 10:57:13 修改 · 3.9k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2022-06-28 16:07:52 首次发布

该博客详细介绍了如何在Vue2项目中使用望远网的百度离线地图工具包。首先，从望远网下载离线地图编辑工具和所需区域的矢量地图，然后将下载的地图文件放入项目静态资源目录。接着，在项目中引入离线地图所需的JS文件，并在Vue组件中创建地图实例，设置个性化样式。最后，通过修改引用地址，利用后端nginx代理解决大量瓦片文件的前端引用问题。

引言: 由于项目使用在交警内网,无法使用百度在线地图.并且由于种种限制使用了望远网百度离线地图.此使用方法实在vue2.0项目上使用,没在vue3上使用过.

1,因为我使用的是望远网的矢量地图,所以需要下载望远网线下工具

http://www.wmksj.com/script.html 打开地址后下载

2,打开地址 http://www.wmksj.com/map.html

打开如上图页面,第一步,选择个性地图矢量地图;第二步,点击编辑json样式,把你在百度地图上设置的个性化样式json复制到内容框里面;第三步,选择你要下载地图卡片的区域;第四步,在地图上右键下载

3.现在需要使用到第一步下载的工具包

找到此文件双击出现上图右边app.输入望远网账号和密码,选择主题为自定义样式,把前面复制的坐标粘贴到输入坐标框上面,选择保存路径,选择webGL矢量,勾选要下载的瓦片,点击开始下载,这样就可以下载到你想要的矢量地图.

如何在vue项目中使用

1.打开http://www.wmksj.com/script.html 选择如下图文件

下载完成解压后找到如下图offlinemap文件,

把offlinemap文件放在vue项目public下的static文件下

2.把我们最先下载好的矢量图片放在offlinemap文件下的 tiles_v文件里面

3,在vue项目入口文件index.html引入如下文件,

4.组件页面使用(暂时没找到支持vue-baidu-map组件的方法)

<template>
<div>
	<div>this is a test</div>
  <div id="map_container" style="width: 100%; height: 500px;"></div>
  </div>
</template>
<script>
    export default {
        data() {
            return{

            }
        },
        mounted () {
            this.$nextTick(() => {
                this.drawMap()
            })
        },
        methods: {
            drawMap () {
              var map = new window.BMapGL.Map("map_container");    // 创建Map实例
              //初始化地图,设置中心点坐标和地图级别
              map.centerAndZoom(new BMapGL.Point(121.56847909,29.8100979777), 17)
              //开启鼠标滚轮缩放
              map.enableScrollWheelZoom(true);

              var navi3DCtrl = new BMapGL.NavigationControl3D();  // 添加3D控件
              map.addControl(navi3DCtrl);

              var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
              map.addControl(scaleCtrl);

              var zoomCtrl = new BMapGL.ZoomControl();   // 添加缩放控件
              map.addControl(zoomCtrl);

              map.setMapStyleV2({styleJson: stylejson});
            }
        }
	}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
html, body, #map_container{
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin:0;
		}

		.BMap_cpyCtrl {
			display: none;
		}

		.anchorBL {
			display: none;
		}

		.BMap_mask {
			z-index: 999;
		}
</style>

最后说明一下,一般下载的瓦片数量比较打,我后面使用了nginx代理,这样就不用把这么多的瓦片放在前端.具体方法就是需要后端给你一个nginx地址,只需要把引用地址更换一下就可以,下面是具体更换位置