官方例子:https://docs.mapbox.com/mapbox-gl-js/example/cluster/
效果图:
实现:
map组件:
<template>
<div style="height: 100%; width: 100%; text-align: left">
<div ref="basicMapbox" :style="mapSize" class="mapClass"></div>
</div>
</template>
<script>
import mapboxgl from 'mapbox-gl'
export default {
props: {
mapWidth: {
type: String,
},
mapHeight: {
type: String,
},
mapData: {
type: Array,
required: false,
},
},
components: {},
data() {
return {
mapInst: '',
// 组件加载后隐藏
showInfoWindow: false,
popupTemp: null,
lengeData: {
lev1_show: true,
lev2_show: true,
},
visible: false,
mapDataCopy: JSON.parse(JSON.stringify(this.mapData)), // 标记点数据
currentMarkers: [], //标记点集合
}
},
mounted() {
this.init()
},
methods: {
// 初始化
init() {
// 官网注册 accessToken
mapboxgl.accessToken = 'pk.eyJ1IjoibWVpaW4xxxxxxxxxxxxxxxxxGt4MTJ4bjBxcjNmcng5NCJ9.GRpGEmZhxJ58EkNW6Ta_AQ'
// 初始化地图
this.mapInst = new mapboxgl.Map({
container: this.$refs.basicMapbox,
style: 'https://xxxxxxxx.cn/vector-styles/mapbox/mapbox-light.json',
center: [113.34411, 23.141], // 地图初始化时的地理中心点
zoom: 8,
})
// 加载标记点
this.loadPoint()
},
// 加载标记点位
loadPoint() {
this.mapDataCopy.forEach((item) => {
let coordinate = [Number(item.longitude), Number(item.latitude)]
let el = document.createElement('div')
el.id = 'markerId'
if (item.status === 1) { //绿色标记点
el.style.backgroundColor = '#3AB236'
el.style.width = 14 + 'px'
el.style.height = 14 + 'px'
el.style.borderRadius = '50%'
} else if (item.status === 2) { //红色标记点
el.style.backgroundColor = '#EC4646'
el.style.width = 14 + 'px'
el.style.height = 14 + 'px'
el.style.borderRadius = '50%'
}
let marker = new mapboxgl.Marker(el).setLngLat(coordinate).setOffset([0, -19]).addTo(this.mapInst) // 将标记添加到地图上
this.currentMarkers.push(marker)
})
},
},
computed: {
mapSize() {
let styleObj = {
width: this.mapWidth,
height: this.mapHeight,
}
return styleObj
},
},
watch: {
mapData: function (val) {
if (val) {
this.mapDataCopy = JSON.parse(JSON.stringify(this.mapData))
this.init()
}
},
},
}
</script>
调用:
<template>
<div>
<Mapboxpoint :mapData="mapData" mapWidth="100%" :mapHeight="mapboxHeight" />
</div>
</template>
<script>
export default {
data() {
return {
mapData: [], // 点位的经纬度数据
mapboxHeight: '600px',
}
},
}
</script>
<style lang="scss" scoped>
</style>