贴个群号
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