基于vite+vue3+mapbox-gl从零搭建一个项目

下面是基于 ViteVue 3Mapbox GL 从零搭建一个项目的完整步骤,包括环境搭建、依赖安装、配置和代码示例。


1. 初始化项目

首先,使用 Vite 快速创建一个 Vue 3 项目:

bash 复制代码
npm create vue@latest vue3-mapboxgl --template vue
cd vue3-mapboxgl
npm install

项目目录结构将类似于以下内容:

复制代码
vue3-mapboxgl/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── router/
│   ├── stores/
│   ├── views/
│   ├── App.vue
│   ├── main.js
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.js

2. 安装 mapbox-gl 依赖

安装 Mapbox GL JS 及其类型定义(可选):

bash 复制代码
npm install mapbox-gl

3. 配置 Mapbox Access Token

Mapbox 需要 Access Token。请前往 Mapbox官网 注册并获取一个 Token。

src 目录下创建一个 .env 文件(注意:此文件不要上传到版本控制,添加到 .gitignore):

复制代码
VITE_MAPBOX_TOKEN=你的_access_token

4. 实现地图组件

创建 src/components/MapView.vue 文件,并编写地图组件代码:

vue 复制代码
<template>
  <div ref="mapContainer" id="map-container"></div>
</template>

<script lang="ts" setup>
import { onMounted, onBeforeUnmount, ref } from 'vue';
import mapboxgl from "mapbox-gl";
import "mapbox-gl/dist/mapbox-gl.css";

const mapContainer = ref(null);
let map;

onMounted(() => {
  // 设置 Mapbox Access Token 令牌 
  mapboxgl.accessToken = import.meta.env.VITE_APP_MAP_TOKEN;
  console.log(mapboxgl.accessToken);

  // 创建 Map 实例
  console.log(mapContainer.value);
  map = new mapboxgl.Map({
    container: mapContainer.value, // 绑定的 DOM 容器
    style: "mapbox://styles/mapbox/streets-v11", // 地图样式
    center: [120.1551, 30.2741], // 初始中心点经纬度(杭州)
    zoom: 10, // 初始缩放级别
  });

  // 添加缩放和方向控制
  map.addControl(new mapboxgl.NavigationControl());
});

onBeforeUnmount(() => {
  // 销毁地图实例
  if (map) map.remove();
});
</script>

<style>
#map-container {
  width: 100%;
  height: 100vh;
}
</style>

5. 在 App.vue 中使用地图组件

修改 src/App.vue 文件:

vue 复制代码
<template>
 <MapView />
</template>

<script lang="ts" setup>
import MapView from './components/MapView.vue';

</script>

<style>

</style>

6. 启动开发服务器

运行以下命令启动项目:

bash 复制代码
npm run dev

打开浏览器访问 http://localhost:5173,你应该可以看到 Mapbox 地图。


7. 添加自定义功能(可选)

1) 添加标记点

MapView.vuemounted 方法中加入以下代码:

js 复制代码
const marker = new mapboxgl.Marker()
  .setLngLat([120.1551, 30.2741]) // 设置标记点位置
  .addTo(this.map); // 添加到地图

2) 响应用户交互

添加点击事件监听:

js 复制代码
this.map.on('click', (e) => {
  const { lng, lat } = e.lngLat;
  alert(`你点击了坐标: ${lng}, ${lat}`);
});

3) 加载自定义图层

示例:加载 GeoJSON 数据:

js 复制代码
this.map.on('load', () => {
  this.map.addSource('my-data', {
    type: 'geojson',
    data: {
      type: 'FeatureCollection',
      features: [
        {
          type: 'Feature',
          geometry: { type: 'Point', coordinates: [120.1551, 30.2741] },
          properties: { title: '杭州' },
        },
      ],
    },
  });

  this.map.addLayer({
    id: 'my-data-layer',
    type: 'circle',
    source: 'my-data',
    paint: {
      'circle-radius': 10,
      'circle-color': '#007cbf',
    },
  });
});

8. 部署项目

将项目打包后部署到服务器:

bash 复制代码
npm run build

将生成的 dist 文件夹内容上传到服务器。


如果需要更复杂的功能或定制,可以继续扩展组件逻辑,比如结合 Vuex 或 Pinia 管理地图状态,或通过 Mapbox 的 API 添加更多交互。

相关推荐
章若楠圈外男友3 分钟前
修改了Element UI中组件的样式,打包后样式丢失
前端·vue.js
XU磊2608 分钟前
深入理解表单---提交用户与网页交互的重要方式:GET 与 POST 的本质区别与应用实践
服务器·前端·javascript
爱分享的程序员10 分钟前
前端跨端框架的开发以及IOS和安卓的开发流程和打包上架的详细流程
android·前端·ios
kadog20 分钟前
《Python3网络爬虫开发实战(第二版)》配套案例 spa6
开发语言·javascript·爬虫·python
珎珎啊21 分钟前
uniapp+vue3移动端实现输入验证码
前端·javascript·uni-app
HtwHUAT1 小时前
五、web自动化测试01
前端·css·chrome·python·功能测试·selenium·html
86Eric1 小时前
Vue 中 使用 Mixins 解决 多页面共用相同组件的相关问题
前端·javascript·vue.js·mixins·公用组件
qq_25249639961 小时前
react 子组件暴露,父组件接收
前端·javascript·react.js
fakaifa1 小时前
【最新版】西陆健身系统源码全开源+uniapp前端
前端·小程序·uni-app·开源·php·约课小程序·健身小程序
南囝coding1 小时前
关于我的第一个产品!
前端·后端·产品