VUE使用百度地图进行上万条数据渲染的解决方案

本文主要是介绍VUE使用百度地图进行上万条数据渲染的解决方案，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、vue 中使用百度地图

1. npm i vue-baidu-map -S // 安装依赖

2.在main.js 中引入

import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, {// ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */ak: 'XXXX'
})

3.具体使用代码如下

<template><div class='zdy-box'><baidu-map class="home-map" ref="homeMapRef":center="center" :zoom="zoom" :min-zoom="1":max-zoom="12":scroll-wheel-zoom="true"@ready="handler"  ><bm-city-list anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-city-list></div>
</template>
<script>
export default {props: {},data () {return {center: {lng: 0, lat: 0},zoom: 3,orgOverlayList: [],overlayList: [],BMap: null,map: null,}},// 监听属性 类似于data概念computed: {},// 监控data中的数据变化watch: {},// 生命周期 - 创建完成（可以访问当前this实例）created () {},// 生命周期 - 挂载完成（可以访问DOM元素）mounted () {},methods: {handler({BMap, map}) {this.center.lng = 116.404;this.center.lat = 39.915;this.zoom = 15;this.BMap = BMap;this.map = map;}}
}
</script>
<style lang='scss' scoped>
// @import url(); 引入公共css类
.zdy-box {width: 100%;height: 100%;.home-map {width: 100%;height: 100%;}
}
</style>

注意事项：1、使用vue-baidu-map必须给定中心经纬度和zoom 要不会导致数据渲染不出来具体参考官方文档：vue-baidu-map官方文档

2、如果网站访问受限可以在本地host 文件追加： 185.199.108.153 dafrok.github.io

二、少量数据（1000点以内）

1、如果你使用的数据量比较少只有几百条，你可以直接使用点（BmMarker）

劣势：数据的承载量一般

优势：扩展性比较强（自定义图标，添加动画）

2、如你渲染的数据更多且不在乎点的样式你可以使用海量点（BmPointCollection）

劣势：点的样式固定不可自定义（只做渲染查看）

优势：数据的承载量会更强

3、自定义覆盖物（BmOverlay）

劣势：数据的承载量会更弱

优势：扩展性更强（自定义图标，添加动画）

备注：当你的场景存在全国的数据比较多的时候分散到各地却很少，你可以使用自定义覆盖物，然后分城市加载，

1、给地图追加城市选择

2、定时通过dom获取城市（注意：自带change事件不能满足场景）

3、vue 动态监听城市变量，变化则获取后台数据

三、大量数据加载

但是对于数据量过多了使用上面的方法就会导致页面卡死，甚至浏览器崩溃；所以我们就会使用到百度mapV 进行数据渲染；速度飕飕的😄

1. 首先在html中引入mapV.js文件（注意：在html文件中还需要引入（下载mapV文件）

否则后报this.show不是函数的错误{ak : 为自己百度地图的ak}）

2.具体实现代码

<!--******************************************************** Copyright © 2020 LMK. All rights reserved. ********************************************************@description：@createTime：@author：@lastUpdateTime：@props：@emit：@version：
-->
<template><div class='bdmap-box'><div id="homeMap"></div></div>
</template><script>
import logoImg from "../../assets/green_device.png";
// @import 导入区域
export default {// import引入的组件需要注入到对象中才能使用components: {},props: {},data() {return {map: null,center: {lng: 116.404, lat: 39.915},zoom: 15,};},// 监听计算属性 类似于data概念computed: {},// 监控data中的数据变化watch: {},// 生命周期 - 创建完成（可以访问当前this实例）created() {},// 生命周期 - 挂载完成（可以访问DOM元素）mounted() {this.createMap();this.$get("/json/data").then(res => {console.log(res, this.map.getMapType())this.handerData(res);})},// 方法集合methods: {createMap() {this.map = new BMap.Map("homeMap", {enableMapClick: false}); // 创建Map实例this.map.centerAndZoom(new BMap.Point(this.center.lng, this.center.lat), this.zoom); // 初始化地图,设置中心点坐标和地图级别this.map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放// this.map.setMapStyle({//     style: 'midnight'// });},handerData(list) {let img = new Image();img.src = logoImg;const _self = this;img.onload = function() {let arr = list.map(v => {v.geometry = {type: 'Point',coordinates: [v.baiDuLongitude - 2 + Math.random() * 4, v.baiDuLatitude - 2 + Math.random() * 4]}v.icon = img;return v;})let dataSet = new mapv.DataSet(arr);let options = {draw: 'icon',width: 60, // 规定图像的宽度height: 60, // 规定图像的高度size: 30,methods: {click: function (e) {console.log(e);}},}console.log(_self.map);new mapv.baiduMapLayer(_self.map, dataSet, options);}}},
};
</script>
<style lang='scss' scoped>
// @import url(); 引入公共css类
.bdmap-box {width: 100%;height: 100%;
//   border: 1px solid red;#homeMap {width: 100%;height: 100%;}
}
</style>

分享：分享一个前端插件可以将本地json文件的数据转换为请求返回数据

安装 npm i -g json-server

命令 json-serve db.json (模拟json数据)

配置下代理：

devServer: {open: true,overlay: {warnings: false,errors: true},proxy: {"/json": {target: process.env.VUE_APP_BASE_URL,changeOrigin: true, // 是否改变域名ws: true,pathRewrite: {// 路径重写"/json/": "/" // 这个意思就是以api开头的，定向到哪里, 如果你的后边还有路径的 话， 会自动拼接上}}}}
}

这篇关于VUE使用百度地图进行上万条数据渲染的解决方案的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！