vue中使用百度webgl地图以及踩坑记录_vue webgl

前言

在公司项目中，之前使用的是vue-baidu-map库，功能上使用暂无太大问题。最近需要在项目基础上添加一个大屏数据页面，并涉及到换肤功能，就是在换肤这里遇到了一些坑，使用个性化主题之后，出现，地图加载卡顿、白色方块，图层缩放最大等级问题等。

查了一些资料，因为vue-baidu-map中使用的是v2版本，而在给地图设置个性化主题时，使用的是setMapStyleV2方法，这个方法要V3版本才有。所以、跟着教程把vue-baidu-map修改成了V3版本，但事与愿违，并没有生效，反而在切换主题时，出现奇怪的效果、 2个主题同时出现在地图上。

最后看了一下百度地图官方上面的一些DEMO实例，决定使用webgl，除了3D视角，在其它方面上、如地图的加载、点与点的切换，缩放等功能，都有过渡动画和一些细节上的优化，和V2相比、给人的体验好太多。

一、百度webgl地图引入和初始化

webgl可自行到vue项目中的index.html中引入

<template>
  <div :id="el" style="width:100%;height:100%;z-index:0;"></div>
</template>
<script>
export default {
  props: {
    el: {
      type: String,
      default: "alarm-big-map"
    }
  },
  data() {
    return {
      zoom: 3,
      mapObj: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    // 地图初始化
    initMap() {
      if (!this.mapObj) {
        this.mapObj = new window.BMapGL.Map(this.el);
      }
      var point = new BMapGL.Point(116.404, 39.915); // 初始化中心点坐标
      this.mapObj.centerAndZoom(point, this.zoom); // 初始化地图，设置中心点坐标和地图级别
      this.mapObj.enableScrollWheelZoom(true);
    }
  }
};
</script>
<style lang="less" scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

二、设置个性化主题setMapStyleV2()

<template>
  <div :id="el" style="width:100%;height:100%;z-index:0;"></div>
</template>
<script>
import mapTheme from "@/assets/newbig/themeJson/default.json";
export default {
  props: {
    el: {
      type: String,
      default: "alarm-big-map"
    }
  },
  data() {
    return {
      zoom: 3,
      mapObj: null
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    // 地图初始化
    initMap() {
      if (!this.mapObj) {
        this.mapObj = new window.BMapGL.Map(this.el);
      }
      this.setTheme(mapTheme);
      var point = new BMapGL.Point(116.404, 39.915); // 初始化中心点坐标
      this.mapObj.centerAndZoom(point, this.zoom); // 初始化地图，设置中心点坐标和地图级别
      this.mapObj.enableScrollWheelZoom(true);
    },
    // 设置/切换 主题
    setTheme(styleJson) {
      this.mapObj.setMapStyleV2({
        styleJson
      });
    }
  }
};
</script>
<style lang="less" scoped>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

三、添加自定义覆盖物

1、Marker
如果是一些简单的自定义图片、形状点等，使用Marker就可以了。

let myIcon = new BMapGL.Icon(
    this.renderIcon(item),
    new BMapGL.Size(25, 25)
);
let mk = new BMapGL.Marker(
   new BMapGL.Point(item.longitude, item.latitude),
   { icon: myIcon }
);
mk.setTitle(item.equipmentName); // 设置鼠标悬浮展示标题
1
2
3
4
5
6
7
8
9

添加点击事件

 mk.addEventListener("click", () => {})
1

2、自定义覆盖物
有两个自定义覆盖类，CustomOverlay和CustomHtmlLayer，经过测试和使用，CustomOverlay类的MinZoom和MaxZoom属性设置后不生效(官方的DEMO上其实也不生效)，这两个属性主要是控制、在不同的缩放等级中是否展示或隐藏。所以选用CustomHtmlLayer

// 渲染 项目点
    renderItemPoint(list) {
      function createItemEle(config) {
        const box = document.createElement("div");
        box.setAttribute("class", "big-map-item-box");
        const span = document.createElement("span");
        span.innerText = config.count;

        let title = document.createElement("div");
        title.setAttribute("class", "big-map-item-box-title");
        title.innerText = config.workName;
        box.appendChild(span);
        box.appendChild(title);
        return box;
      }

      let _that = this;

      const customOverlay = new BMapGL.CustomHtmlLayer(createItemEle, {
        maxZoom: 13
      });

      let features = list.reduce((prev, next) => {
        prev.push({
          type: "Feature",
          geometry: {
            type: "Point",
            coordinates: [next.longitude, next.latitude]
          },
          properties: { // 这里的数据，点击事件中可以获取
            width: 50,
            height: 50,
            radius: 50,
            lineWidth: 20,
            bgBase: "#add",
            bgFill: "#9d55ef",
            data: 0.5,
            ...next
          }
        });

        return prev;
      }, []);

      var data = {
        type: "FeatureCollection",
        features
      };

      customOverlay.setData(data);
      // 添加自定义图层到地图上
      this.mapObj.addCustomHtmlLayer(customOverlay);
      // 点击事件
      customOverlay.addEventListener("click", function(e) {
        console.log(e.target.properties.data);
        let { longitude, latitude } = e.target.properties;
        _that.mapObj.setZoom(21);
        _that.mapObj.centerAndZoom(new BMapGL.Point(longitude, latitude), 21);
        setTimeout(() => {
          _that.zoom = 21;
        }, 1000);
      });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

四、清除所有覆盖物clearOverlays()

this.mapObj.clearOverlays();
1