【Vue+Mapbox】Vue中mapbox地图的使用（三）——mapbox对象在组件中共享

在mapbox中使用mapbox遇到一个问题，在使用mapbox对象时，一般的方法都是将生成函数存放在methods中，然后在mounted挂载。但是，如果我们还需要进行其他的操作，比如增加图层、改变数据之类的操作，我们无法获取生成函数中的map对象。

因此，查找了一些资料，总结出两种解决方法。

（可能会有更好的方法，欢迎分享）

方法一：

将click、on等map处理函数在生成函数里定义。

比如，下面的例子，就是在initmap()中添加了click事件；同样，可以在initmap（）中添加其余的事件。

该方法能够实现对数据交换或者交互需求不高的情况。

initmap() {
     mapboxgl.accessToken = "你的keytoken";
     var map = new mapboxgl.Map({
        container: "map",
        style: {
          version: 8,
          sources: {},
          layers: [
            {
              id: "background",
              type: "background",
              layout: {},
              paint: {
                "background-color": [
                  "interpolate",
                  ["linear"],
                  ["zoom"],
                  5,
                  "hsl(38, 43%, 89%)",
                  7,
                  "hsl(38, 48%, 86%)",
                ],
              },
            },
          ],
        },
        zoom: 5,
        center: [109, 38],
      });
      map.on("load", function () {
        map.addSource("states", {
          type: "geojson",
          // src\assets
          data: CHINAMAP,
        });
        map.addLayer({
          id: "china_map",
          type: "fill",
          source: "states",
          paint: {
            "fill-color": "#0080ff",
            "fill-outline-color": "#4f4f4f",
            "fill-opacity": [
              "case",
              ["boolean", ["feature-state", "hover"], false],
              1,
              0.8,
            ],
          },
        });
      });

      var swatch = document.getElementById('getmapmessage')
      swatch.addEventListener("click", () => {
        map.setPaintProperty("china_map",'fill-color','#FFB6C1')
      });
    }

方法二：

将map对象定义在mounted中，后续的on、addlayer等一系列操作单独存放在methods中

首先在export default{}外面，定义下面两个变量；

mapbox.accessToken = ''
let map;

接着，在mounted（）{}中声明map，新建一个空的地图容器；当然如果用mapbox提供的底图，可以将{}中的值换成【系列文章一】中的代码。

map = new mapboxgl.Map({
        container: "map",
        style: {
          version: 8,
          sources: {},
          layers: [
            {
              id: "background",
              type: "background",
              layout: {},
            },
          ],
        },
        zoom: 5,
        center: [109, 38],
      });

以上步骤便实现了map地图对象在当前页面（Vue）中的创建，其余函数可以直接使用map，来对地图进行操作。

 按道理应该还有别的方法，肯定比笔者的更好。但是笔者使用第二种方法，目前已经可以满足我的需求了，所以后期根据需求再进行学习。