Mapbox 添加标记点（一）

官方例子：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>