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文件）

<!-- <script type="text/javascript" src="https://api.map.baidu.com/getscript?v=2.0&ak=XXXXservices=&t=20210225162129"></script> --> 否则后报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开头的，定向到哪里, 如果你的后边还有路径的 
               话， 会自动拼接上
                }
            }
        }
    }
}