Vue.js中如何集成Leaflet与Mapbox GL以实现地图绘图功能

1. 安装依赖 #

需要安装Leaflet和适配插件，实现Mapbox GL作为Leaflet底图的功能：

npm install leaflet leaflet-mapbox-gl

2. 修改Vue组件代码 #

替换原有组件代码，集成Leaflet并基于Mapbox GL底图实现绘图能力：

<template>
  <div id="mapContainer" class="basemap"></div>
</template>

<script>
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet-mapbox-gl';
import mapboxgl from 'mapbox-gl';

export default {
  name: "BaseMap",
  data() {
    return {
      accessToken: MAPBOX_ACCESS_TOKEN,
    };
  },
  mounted() {
    // 初始化Leaflet地图容器
    const leafletMap = L.map('mapContainer', {
      center: [1.345399, 103.811279], // Leaflet坐标顺序：[纬度, 经度]，注意与Mapbox GL反向
      zoom: 12,
      maxBounds: L.latLngBounds(
        L.latLng(1.1704753, 103.6),
        L.latLng(1.4754753, 104.1)
      )
    });

    // 配置Mapbox GL作为Leaflet的底图层
    mapboxgl.accessToken = this.accessToken;
    L.mapboxGL({
      accessToken: this.accessToken,
      style: 'mapbox://styles/mapbox/streets-v11'
    }).addTo(leafletMap);

    // 示例：用Leaflet添加标记点
    L.marker([1.345399, 103.811279])
      .addTo(leafletMap)
      .bindPopup('Leaflet标记点');

    // 示例：用Leaflet绘制红色折线
    const polyline = L.polyline([
      [1.34, 103.8],
      [1.35, 103.82],
      [1.36, 103.81]
    ], {color: 'red'}).addTo(leafletMap);
    leafletMap.fitBounds(polyline.getBounds());
  },
};
</script>

<style scoped>
.basemap {
  width: 100%;
  height: 100vh; /* 可根据实际需求调整地图高度 */
}
</style>

关键注意事项 #

• Leaflet坐标顺序为**[纬度, 经度]**，与Mapbox GL的[经度, 纬度]相反，需注意转换。
• 必须导入leaflet.css，否则Leaflet的控件、图形会出现样式异常。
• leaflet-mapbox-gl插件负责将Mapbox GL地图转为Leaflet图层，后续所有绘图操作均可通过Leaflet API完成（如L.polygon()绘制多边形、L.circle()绘制圆形等）。

内容的提问来源于stack exchange，提问作者VINA NIKAM