1、引入MapVGL库

MapVGL的介绍：MapVGL，是一款基于WebGL的地理信息可视化库，可以用来展示大量基于3D的地理信息点线面数据。设计初衷主要是为了解决大数据量的三维地理数据展示问题及一些炫酷的三维效果。

MapVGL官方地址：MapVGL | 快速入门 (baidu.com)

npm i mapvgl

导入MapVGL库后，首先我们需要创建一个map.js中间文件，利用jsonp拿到百度地图的数据。

2、创建map.js中间件

//ak是你的百度密钥
export function BMPGL(ak) {
    return new Promise(function(resolve, reject) {
      window.init = function() {
        // eslint-disable-next-line
        resolve(BMapGL)
      }
      const script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = `https://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`
      script.onerror = reject
      document.head.appendChild(script)
    })
  }
  

3、创建一个map组件，将map.js中的方法导入。

<template>
  <div class="mapbox">
    <div class="map" id="map_container"></div>
  </div>
</template>

<script>
    import { View , LineLayer} from 'mapvgl'
    import { BMPGL } from "@/../static/js/map" //之前写好的map.js中间件
    import arrData from '@/../static/json/arrData.json';//引入要画图层的json数据文件
    export default {
        data() {
            return {
                ak: "你的密钥", // 百度的地图密钥
                Mymap: '',
                center: [125.32558161237392, 43.82842501072748],
                // center: [124.85836971825131, 46.5773334460883],
                Mapvgl: null
          };
        },
        mounted() {
          this.initMap()
        },
        methods:{
          initMap() {
            // 传入密钥获取地图回调。
            BMPGL(this.ak).then((BMapGL) => {
                const map = new BMapGL.Map('map_container', {
                  restrictCenter: false,
                  maxZoom: 25,
                  displayOptions: {
                    building: false,
                  },
                });
                //初始化地图中心点和缩放比例
                map.centerAndZoom(new BMapGL.Point(this.center[0], this.center[1]), 15);
                map.enableContinuousZoom();
                map.setTilt(0); //地图倾斜角度
                map.setHeading(-90); //地图旋转角度
                map.setDisplayOptions({
                  skyColors: ['rgba(21, 15, 9, 1)', 'rgba(2, 14, 35, 0.9)']
                })
                map.enableScrollWheelZoom(true);
              
                this.Mymap = map;
                // 创建MapVGL图层管理器
                this.Mapvgl = new View({
                  map: this.Mymap
                });
                this.initData()
              })
              .catch((err) => {
                console.log(err)
              })
          },

          initData(){
            let arr = arrData
            this.initDemo(list)
          }

          //在地图上画图层的方法
          initDemo(list){
            let _this=this;
            let ryh = [];
            //遍历拿到MapGVL想要的数据格式
            for(let i=0;i<list.geometry.length;i++){
              ryh.push({
                "geometry":{
                  "type":'LineString',
                  "coordinates":list.geometry[i].coordinates
                }
              })
            }
            var layer = new LineLayer({
                color:'rgb(250,5,5)',
                blend:'lighter',
                width: 5,
            })
            layer.setData(ryh);
            this.Mapvgl.addLayer(layer);
          },
        
        }
    }
</script>

按照文档，需要将你的json文件里的数据格式转换成MapVGL图层需要的数据格式

红色的线条就是最终画出来的图层效果。

代码demo地址

https://github.com/banyan666/Demo-vue