Mapbox GL在Vue项目中的应用（综合demo）

1、Mapbox简介

Mapbox GL提供了丰富的功能和特性，包括：

总的来说，Mapbox GL是一个多功能且功能丰富的库，用于构建具有高级可视化和地理空间能力的交互式地图。它广泛应用于各种应用程序，包括Web地图、数据可视化和基于位置的服务。

2、vue项目mapboxgl案例

2.1 实现的功能

2.2 具体代码

<template>
  <div>
    <div class="sidebar">
      <div class="sidebar-header">
        <h2>项目列表</h2>
      </div>
      <div class="sidebar-content">
        <ul class="project-list">
          <li v-for="project in projects" :key="project.id" @click="selectProject(project)">
            {{ project.name }}
          </li>
        </ul>
      </div>
    </div>
    <div class="map-container">
      <div ref="map" class="map"></div>
      <div class="popup" v-if="selectedProject">
        <div class="popup-header">
          <h3>{{ selectedProject.name }}</h3>
          <button @click="closePopup">关闭</button>
        </div>
        <div class="popup-content">
          <p>{{ selectedProject.description }}</p>
        </div>
      </div>
      <div class="controls">
        <button @click="toggleMarkers">插点效果</button>
        <button @click="toggleBasemap">切换底图</button>
        <button @click="simulatePlayback">模拟轨迹播放</button>
      </div>
    </div>
  </div>
</template>

<script>
import mapboxgl from 'mapbox-gl';

export default {
  data() {
    return {
      map: null,
      projects: [],
      selectedProject: null,
      markersVisible: true,
      basemaps: [
        { name: '街道地图', style: 'mapbox://styles/mapbox/streets-v11' },
        { name: '卫星地图', style: 'mapbox://styles/mapbox/satellite-v9' },
        // ...
      ],
      currentBasemap: 0,
      playbackInterval: null,
      playbackIndex: 0,
    };
  },
  mounted() {
    this.fetchProjects();
    this.initializeMap();
  },
  methods: {
    fetchProjects() {
      // 模拟获取项目列表数据
      this.projects = [
        { id: 1, name: '项目1', location: [lng, lat], description: '项目1的描述信息' },
        { id: 2, name: '项目2', location: [lng, lat], description: '项目2的描述信息' },
        // ...
      ];
    },
    initializeMap() {
      mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

      this.map = new mapboxgl.Map({
        container: this.$refs.map,
        style: this.basemaps[this.currentBasemap].style,
        center: [YOUR_MAP_CENTER_LONGITUDE, YOUR_MAP_CENTER_LATITUDE],
        zoom: YOUR_MAP_INITIAL_ZOOM,
      });

      this.map.on('load', () => {
        // 在地图加载完成后执行的操作
        this.addMarkers();
      });
    },
    addMarkers() {
      this.projects.forEach(project => {
        const marker = new mapboxgl.Marker()
          .setLngLat(project.location)
          .addTo(this.map);

        marker.getElement().addEventListener('click', () => {
          this.openPopup(project);
        });
      });
    },
    selectProject(project) {
      this.selectedProject = project;
      this.map.flyTo({ center: project.location });
    },
    openPopup(project) {
      this.selectedProject = project;
    },
    closePopup() {
      this.selectedProject = null;
    },
    toggleMarkers() {
      if (this.markersVisible) {
        this.map.style.stylesheet.layers.forEach(layer => {
          if (layer.type === 'symbol') {
            this.map.setLayoutProperty(layer.id, 'visibility', 'none');
          }
        });
      } else {
        this.map.style.stylesheet.layers.forEach(layer => {
          if (layer.type === 'symbol') {
            this.map.setLayoutProperty(layer.id, 'visibility', 'visible');
          }
        });
      }

      this.markersVisible = !this.markersVisible;
    },
    toggleBasemap() {
      this.currentBasemap = (this.currentBasemap + 1) % this.basemaps.length;
      this.map.setStyle(this.basemaps[this.currentBasemap].style);
    },
    simulatePlayback() {
      const coordinates = [
        [lng1, lat1],
        [lng2, lat2],
        // ...
      ];

      this.playbackIndex = 0;
      this.playbackInterval = setInterval(() => {
        if (this.playbackIndex < coordinates.length) {
          this.map.flyTo({ center: coordinates[this.playbackIndex] });
          this.playbackIndex++;
        } else {
          clearInterval(this.playbackInterval);
        }
      }, YOUR_PLAYBACK_INTERVAL);
    },
  },
};
</script>

<style scoped>
/* 样式 */
</style>

2.3 YOUR_PLAYBACK_INTERVA的含义

YOUR_PLAYBACK_INTERVAL是一个表示轨迹播放的时间间隔的值，以毫秒为单位。它决定了每个轨迹点之间的时间间隔，用于模拟轨迹的播放速度。

具体的值取决于你希望轨迹播放的速度和流畅度。较小的值会导致轨迹播放得更快，而较大的值会使播放速度变慢。你可以根据实际情况进行调整，以获得最佳的播放效果。

以下是一些示例值供参考：

1000：每秒播放一个轨迹点，即每个轨迹点之间的时间间隔为1秒。
500：每0.5秒播放一个轨迹点，即每个轨迹点之间的时间间隔为0.5秒。
200：每0.2秒播放一个轨迹点，即每个轨迹点之间的时间间隔为0.2秒。