mapbox地图弹窗（popup）使用vue组件，实现弹窗样式轻松自定义化

摘要：mapbox官方提供的popup，在不要特殊的样式的时候，我们按照官方的实例去添加

var popup = new mapboxgl.Popup({className: 'my-class'})
  .setLngLat(e.lngLat)
  .setHTML("<h1>Hello World!</h1>")
  .setMaxWidth("300px")
  .addTo(map);

但是setHTML的内容只能原生的html,要修改样式就要用内联样式，，最主要在操作弹窗内部dom元素方便存在很大的不便性，现在我们将弹窗的内容写到vue组件里，然后挂载到popup,这样不仅能轻松定义样式，而且使用Vue指令

操作步骤

1、在地图的组件里引入vue和弹窗里面用到的vue组件

import mapboxgl from 'mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
import popup from './popup.vue'; //引入弹框组件
import Vue from 'vue';

2、添加挂载

举例：需求是点击某图层出现该图层的属性信息

2.1 第一种：使用setDOMContent()

map.on('click', '图层名', function (e) {
  let content = e.features[0].properties;
  const p = Vue.extend(popup);
  let vm = new p({
    propsData: {
      objes: content,
    }, //传参
  });
  vm.$mount(); //挂载

  popup
    .setLngLat(e.lngLat)
    .setMaxWidth('400px') //设置弹窗最大宽度
    .setDOMContent(vm.$el) //插入节点
    .addTo(MapObj.map);
});

上面使用的是setDOMContent,插入节点，如果使用setHTML， 则必须给弹窗设定id

2.2 使用setHTML()

let popupHTML = '<div id="popupId"></div>'
map.on('click', '图层名', function (e) {
  let content = e.features[0].properties;
  const p = Vue.extend(popupHTML);//弹窗组件
  let vm = new p({
    propsData: {
      objes: content,
    }, //传参
  });
  vm.$mount("popupId"); //挂载,id名与上面一致

  popup
    .setLngLat(e.lngLat)
    .setMaxWidth('400px') //设置弹窗最大宽度
    .setHTML(popupHTML) //插入节点
    .addTo(MapObj.map);
});

3、弹窗组件接受

<script>
export default {
  props: ['objes'],
  mounted() {
    console.log('objes: ', this.objes);
  },
};
</script>

这样我们就将vue组件挂载到popup里面啦，轻松自定义样式以及操作dom啦