mapbox的popup里使用vue组件

贴个群号

WebGIS学习交流群461555818，欢迎大家。

问题

在mapbox官网中，他的popup实例是这样的

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

可以看到他的popup里面的内容，只能是原生的html，那些标签是可以写style的，是可以影响他的。

class是不会生效的，除非将class写在APP.Vue里面。

但是如果我们想要每个图层都添加一种popup，而且图层数量很多，显示内容不同的话，这样硬写不是可取的，还是应该使用vue组件，只不过要把vue组件包在这个popup里面。

操作

要注意的是，直接将组件和上面例子一样写在里面是没用的，他只支持原生的html，说白了，他的popup加载的方式，是mapbox添加到dom的，并不是vue编译进去的。

如果您尝试在弹出内容中使用Vue指令，则弹出窗口可能会有些棘手

下面是我的操作，先引入组件，注意要引入vue实例

import Vue from 'vue'

import BaseDetail from '@/views/detailData/BaseDetail.vue' //我想要塞进popup里面的一个组件，该组件负责展示一下点的详细信息
const BaseDetailItem = Vue.extend(BaseDetail) // 利用vue.extend 生成一个该组件的构造器

然后在调用处，给他一个唯一的id

popupHTML = '<div id="base-detail"></div>'      //这里是我们的popup内容，注意这里面只放一个有id的div

然后我们生成popup

 this.popup
   .setLngLat(lngLat)
   .setHTML(popupHTML)
   .setMaxWidth('none')
   .addTo(this.map)

然后将组件内容挂载到这个id下面，相当于利用这个组件替换了上面有这个id的div内容

  new BaseDetailItem({
    propsData: {
      detailId: this.detailId
    }
  }).$mount('#base-detail')

这里需要注意，propsData是关键字应该，不是我要传下去的值，我要传下去的值是detailId，在组件内接收的也是detailId，组件内部是这样只接收了这个detailId，这个你们自己想要接收什么就接受什么，我这里只是我的演示

  props: ['detailId'],

成果

可以看到，我已经成功的将我的vue组件，搞在了这个mapbox的popup内容里面去了

参考网站

https://tech.beyondtracks.com/posts/mapbox-gl-popups-with-vue/
https://github.com/phegman/vue-mapbox-gl#popups