当前位置：首页 > news >正文

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

news 来源：原创 2025/6/8 5:37:01

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

1. 初始化项目

首先，使用 Vite 快速创建一个 Vue 3 项目：

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 及其类型定义（可选）：

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 文件，并编写地图组件代码：

<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 文件：

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

6. 启动开发服务器

运行以下命令启动项目：

npm run dev

打开浏览器访问 http://localhost:5173，你应该可以看到 Mapbox 地图。
在这里插入图片描述

7. 添加自定义功能（可选）

1) 添加标记点

在 MapView.vue 的 mounted 方法中加入以下代码：

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

2) 响应用户交互

添加点击事件监听：

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

3) 加载自定义图层

示例：加载 GeoJSON 数据：

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. 部署项目

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

npm run build

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

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

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

下面是基于 Vite、Vue 3 和 Mapbox GL 从零搭建一个项目的完整步骤，包括环境搭建、依赖安装、配置和代码示例。 1. 初始化项目首先，使用 Vite 快速创建一个 Vue 3 项目： npm create vuelatest vue3-mapboxgl --template vue cd vue3-mapbo…...

编程日记 2025/6/3 0:42:55

驱动开发系列33 - Linux Graphics mesa Intel驱动介绍

一：概述 mesa 中的 Intel 驱动体系是为支持 Intel GPU 提供图形 API 的硬件实现部分，主要包括 OpenGL、Vulkan等图形接口，Intel驱动实现整体上分为四层：第一层：API 层，实现 OpenGL 和 Vulkan 接口, src/mesa/main、src/vulkan。第二层：驱动层，实现 OpenGL 和 Vulkan…...

编程日记 2025/6/3 7:44:15

【git】-3 github创建远程仓库,上传自己的项目，下载别人的项目

一、如何使用Github 1、创建远程仓库 2、使用github拉取/推送代码克隆仓库向远程仓库推送代码-git push 二、上传我们自己的项目到github 方法一：直接上传方法二：使用git命令方法三： 将仓库拉取到本地上传三、下载别人的项目 …...

编程日记 2025/6/3 7:45:03

[Qt]常用控件介绍-多元素控件-QListWidget、QTableWidget、QQTreeWidget

目录 1.多元素控件介绍 2.ListWidget控件属性核心方法核心信号细节 Demo：编辑日程 3.TableWidget控件核心方法 QTableWidgetItem核心信号 QTableWidgetItem核心方法细节 Demo：编辑学生信息 4.TreeWidget控件核心方法核心信号…...

编程日记 2025/6/3 7:45:22

_STM32关于CPU超频的参考_HAL

MCU: STM32F407VET6 官方最高稳定频率：168MHz 工具：STM32CubeMX 本篇仅仅只是提供超频（默认指的是主频）的简单方法，并未涉及STM32超频极限等问题。原理很简单，通过设置锁相环的倍频系数达到不同的频率&am…...

编程日记 2025/6/3 0:22:21

Flink链接Kafka

一、基于 Flink 的 Kafka 消息生产者 Kafka 生产者的创建与配置： 代码通过 FlinkKafkaProducer 创建 Kafka 生产者，用于向 Kafka 主题发送消息。Flink 执行环境的配置： 配置了 Flink 的检查点机制，确保消息的可靠性，支…...

编程日记 2025/6/3 7:44:47

Maven 配置本地仓库

步骤 1：修改 Maven 的 settings.xml 文件找到你的 Maven 配置文件 settings.xml。 Windows: C:\Users\<你的用户名>\.m2\settings.xmlLinux/macOS: ~/.m2/settings.xml 打开 settings.xml 文件，找到 <localRepository> 标签。如果没有该标…...

编程日记 2025/6/3 7:43:43

请求方使用 ApiAuthService::buildUrl($domain, [terminal => 1, ts => time()]); //http://域名/adminapi/login/platformLogin?sign=F7FE8A150DEC18BE8A71C5059742C81A&terminal=1&ts=1736904841接收方 $getParams = $this->request->get();$validate…...

编程日记 2025/5/30 17:00:06

mac 安装docker

1、下载docker 进入 /Applications/Docker.app/Contents/MacOS/Docker Desktop.app/Contents/Resources目录把app.asar 文件备份将下载的中文包复制进去。修改成一样的名字 [汉化包下载地址](https://github.com/asxez/DockerDesktop-CN)...

编程日记 2025/6/3 14:55:16

ANSYS Fluent学习笔记（七）求解器四部分

16.亚松弛因子 Controls面板里面设置，它能够稳定计算的过程。如果采用常规的迭代算法可能结果就会发生振荡的情况。采用亚松驰因子可以有助于残差的稳定。他的取值范围是0-1，0代表没有亚松驰，1表示物理量变化很快，一般情况下取…...

编程日记 2025/6/3 14:55:01

【微服务】面试 3、服务监控 SkyWalking

微服务监控的原因问题定位：在微服务架构中，客户端（如 PC 端、APP 端、小程序等）请求后台服务需经过网关再路由到各个微服务，服务间可能存在多链路调用。当某一微服务挂掉时，在复杂的调用链路中难以迅速确定…...

编程日记 2025/6/3 16:00:53

llamafactory使用8张昇腾910b算力卡lora微调训练qwen2-72b大模型

说明我需要在昇腾服务器上对Qwen2-72B大模型进行lora微调，改变其自我认知。我的环境下是8张910B1卡。显存约512GB。准备：安装llamafactory 请参考官方方法安装llamafactory：https://github.com/hiyouga/LLaMA-Factory 特别强调下&…...

编程日记 2025/6/3 14:56:39

在服务器上增加新网段IP的路由配置

在服务器上增加新网段IP的路由配置前提条件步骤一：检查当前路由表步骤二：添加新路由步骤三：验证新路由步骤四：持久化路由配置脚本示例结论在网络管理中，路由配置是一项基本且重要的任务。它决定了数据包在网络中的传输路径。本文将详细介绍如何在服务器上增加新的路由配置…...

编程日记 2025/6/2 23:21:15

2Spark Core

2Spark Core 1.RDD 详解1) 为什么要有 RDD?2) RDD 是什么?3) RDD 主要属性 2.RDD-API1) RDD 的创建方式2) RDD 的算子分类3) Transformation 转换算子4) Action 动作算子 3. RDD 的持久化/缓存4. RDD 容错机制 Checkpoint5. RDD 依赖关系1) 宽窄依赖2) 为什么要设计宽窄依赖 …...

编程日记 2025/6/3 14:55:32

【ANGULAR网站开发】初始环境搭建（SpringBoot）

1. 初始化SpringBoot 1.1 创建SpringBoot项目清理spring-boot-starter-test，有需要的可以留着 1.2 application.properties 将application.properties改为yaml，个人习惯问题，顺便设置端口8888，和前端设置的一样 server:por…...

编程日记 2025/6/3 14:56:04

Vue 页面布局组件-Vuetify、Semantic

在现代 Web 开发中，用户体验是关键，尤其是当我们利用 Vue.js 框架构建用户友好的界面时。今天，我们将深入探讨如何使用 Vuetify 和 Semantic UI 来创建高效、美观的页面布局组件。通过这项技术，你将能够为用户呈现一个流畅的交互体…...

编程日记 2025/6/3 14:56:55

小程序组件 —— 31 事件系统 - 事件绑定和事件对象

小程序中绑定事件和网页开发中绑定事件几乎一致，只不过在小程序不能通过 on 的方式绑定事件，也没有 click 等事件，小程序中绑定事件使用 bind 方法，click 事件也需要使用 tap 事件来进行代替，绑定事件的方式有两种&…...

编程日记 2025/6/3 14:55:48

23种设计模式

23种设计模式创建型模式（Creational Patterns）结构型模式（Structural Patterns）行为型模式（Behavioral Patterns）总结 Java中的设计模式是解决特定问题的通用、可复用的解决方案。它们不是完成代码&#x…...

编程日记 2025/6/3 0:44:21

SIBR详细介绍：基于图像的渲染系统及3DGS实例展示【3DGS实验复现】

文章目录什么是 SIBR？IBR 技术的优势SIBR 的核心组件SIBR 的应用场景如何使用 SIBR？3D Gaussian Splatting 实验实例展示1. 什么是 3D Gaussian Splatting (3DGS)？2. 实验运行环境步骤：简要说明如何使用 3DGS 的两种渲染方式 3. …...

编程日记 2025/5/31 23:08:28

每天五分钟深度学习框架pytorch：基于vgg块搭建VGG卷积神经网络

本文重点前面我们使用pytorch搭建了vgg块，本文我们使用vgg块搭建卷积神经网络VGG16，我们先来看一下vgg16的模型结构是什么样的：搭建vgg16 import torch from torch import nn def vgg_block(num_convs,in_channels,out_channels): net=[nn.Conv2d(in_channels,out_channe…...

编程日记 2025/6/4 12:23:26

【gin】中间件使用之jwt身份认证和Cors跨域，go案例

Gin-3 中间件编程及 JWT 身份认证 1. Gin 中间件概述中间件是处理 HTTP 请求的函数，可以在请求到达路由处理函数之前或之后对请求进行处理。在 Gin 框架中，中间件常用于处理日志记录、身份验证、权限控制等功能。 router : gin.Default() router.Us…...

编程日记 2025/6/4 13:23:28

探索 Vue.js 组件开发的新边界：动态表单生成技术

随着前端技术的飞速发展，Vue.js 作为一款灵活、易用且性能优异的框架，一直是开发者心中的不二之选。本文将深入介绍 Vue.js 组件开发中的最新技术之一：动态表单生成技术，并通过具体实例展示如何实现这一高效技术。为什么选择动态…...

编程日记 2025/5/30 16:58:56

Android 调用系统服务接口获取屏幕投影(需要android.uid.system)

媒体投影借助 Android 5（API 级别 21）中引入的 android.media.projection API，您可以将设备屏幕中的内容截取为可播放、录制或投屏到其他设备（如电视）的媒体流。 Android 14（API 级别 34）引入…...

编程日记 2025/6/3 18:43:02

Node.js - Express框架

1. 介绍 Express 是一个基于 Node.js 的 Web 应用程序框架，主要用于快速、简便地构建 Web 应用程序和 API。它是目前最流行的 Node.js Web 框架之一，具有轻量级、灵活和功能丰富的特点。核心概念包括路由，中间件，请求与响应&a…...

编程日记 2025/6/2 11:24:59

Picocli 命令行框架

官方文档 https://picocli.info/ 官方提供的快速入门教程 https://picocli.info/quick-guide.html 使用 Picocli 创建命令行应用程序 Picocli 是一个用于构建 Java 命令行应用的强大框架，它简化了参数解析和帮助消息生成的过程。下面是如何使用 Picocli 构建简单命…...

编程日记 2025/6/3 10:36:39

Vscode——SSH连接不上的一种解决办法

一、完整报错： > @@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@ > IT IS POSSIBLE THAT SOMEONE IS DOING SOMETHING NASTY! > Someone could be eavesdropping on you right now (man-in-the...

编程日记 2025/5/29 18:44:14

Stream流

一 : Stream流的介绍 stream不存储数据，而是按照特定的规则对数据进行计算，一般会输出结果； stream不会改变数据源，通常情况下会产生一个新的集合； stream具有延迟执行特性，只有调用终端操作时&#xff…...

编程日记 2025/5/30 10:21:07

开源文件存储分享平台Seafile部署与应用

Seafile 是一款开源的企业云盘，注重可靠性和性能，支持全平台客户端。Seafile 内置协同文档 SeaDoc ，让协作撰写、管理和发布文档更便捷。适用于团队协作、文件存储和同步的开源解决方案，它提供了可靠、安全和易用的云存储服务。主要有以下特点：文件存储和同步：Seafile 允…...

编程日记 2025/6/4 10:02:01

RAG技术：是将知识库的文档和问题共同输入到LLM中

RAG技术 RAG技术是将知识库的文档和问题共同输入到LLM中 RAG技术是先从知识库中检索出与问题相关的文档片段，然后将这些检索到的文档片段与问题一起输入到LLM中进行回答。具体过程如下：文本分块由于LLM的上下文窗口有限，需要将长文本资料分割成较小的块，以便LLM能够有…...

编程日记 2025/6/3 8:36:25

战略与规划方法——深入解析波士顿矩阵（BCG Matrix）：分析产品组合的关键工具

深入解析波士顿矩阵（BCG Matrix）：分析产品组合的关键工具在现代商业管理中，合理地分析和管理产品组合对于企业的成功至关重要。波士顿矩阵（BCG Matrix），又称为成长份额矩阵，是一种由波士顿咨询集团（Boston Consulting Group）在20世纪70年代提出的战略工具，用于帮助…...

编程日记 2025/6/3 7:54:46

GORM（Go语言数据交互库）

GORM（Go ORM，即对象关系映射）是Go语言中非常流行且功能强大的数据库交互库。它简化了与关系型数据库的交互过程，提供了丰富的API来处理各种数据库操作。下面将详细介绍GORM的功能、使用方法和一些高级特性。 1. 安装首先&#…...

编程日记 2025/5/31 22:53:40

Spring Boot教程之五十七：在 Apache Kafka 上发布 JSON 消息

Spring Boot | 如何在 Apache Kafka 上发布 JSON 消息 Apache Kafka是一个发布-订阅消息系统。消息队列允许您在进程、应用程序和服务器之间发送消息。在本文中，我们将了解如何在 Spring Boot 应用程序中向 Apache Kafka 发送 JSON 消息。为了了解如何创建 Spring…...

编程日记 2025/6/4 6:30:41

开发指南091-延迟退休算法

公布平台上人力资源系统有关延迟退休算法： package org.qlm.util;public class busiUtil {/*birthYearMonth 出生年月 yyyy-MMmode 0 男职工 1 女干部 2 女职工*/public static String calculateRetirementDate(String birthYearMonth, String mode){if ("0&…...

编程日记 2025/6/4 6:29:38

Flask-SQLAlchemy 基于一个base表 - 动态创建使用相同字段的其他业务表

1 安装首先，确保您安装了 Flask 和 SQLAlchemy，以及 MySQL 的驱动程序（例如 mysql-connector-python 或 PyMySQL）： pip install Flask Flask-SQLAlchemy mysql-connector-python2 创建项目结构创建一个简单的项目…...

编程日记 2025/6/4 6:30:09

数据结构--二叉树

目录有序二叉树： 平衡二叉树： 234树： 红黑树红黑树特点： 为什么红黑树是最优二叉树？ 哈夫曼树和哈夫曼编码有序二叉树： 平衡二叉树： 在有序二叉树的基础上得来的，且左右子…...

编程日记 2025/6/3 13:40:35

【编译构建】用cmake编译libjpeg动态库并实现转灰度图片

先编译出libjepg动态库 1、下载libjpeg源码: https://github.com/libjpeg-turbo/libjpeg-turbo 2、编译出动态库或静态库写一个编译脚本，用cmake构建。 #!/bin/bash# 定义变量 SOURCE_DIR"/home/user/libjpeg-turbo-main" BUILD_DIR"${SOURCE_…...

编程日记 2025/6/3 18:50:30

vLLM私有化部署大语言模型LLM

目录一、vLLM介绍二、安装vLLM 1、安装环境 2、安装步骤三、运行vLLM 1、运行方式 2、切换模型下载源 3、运行本地已下载模型四、通过http访问vLLM 一、vLLM介绍 vLLM（官方网址：https://www.vllm.ai）是一种用于大规模语言模型&#x…...

编程日记 2025/6/4 16:30:28

人工智能任务19-基于BERT、ELMO模型对诈骗信息文本进行识别与应用

大家好，我是微学AI，今天给大家介绍一下人工智能任务19-基于BERT、ELMO模型对诈骗信息文本进行识别与应用。近日，演员王星因接到一份看似来自知名公司的拍戏邀约，被骗至泰国并最终被带到缅甸。这一事件迅速引发了社会的广泛关注。该…...

编程日记 2025/5/30 18:04:30

ESP-IDF学习记录（5）画一块esp32-c3 PCB板

最近看了半个多月，趁着嘉立创官方活动，研究esp32-c3规格书，白嫖PCB 和元器件。原本计划按照官方推荐的搞个四层板，结果打样太贵，火速改成双层板，用了官方的券。小于10*10,也可以使用嘉立创的免费打样。下面…...

编程日记 2025/6/4 0:26:34

Day04-后端Web基础——Maven基础

目录 Maven课程内容1. Maven初识1.1 什么是Maven?1.2 Maven的作用1.2.1 依赖管理1.2.2 项目构建1.2.3 统一项目结构 2. Maven概述2.1 Maven介绍2.2 Maven模型2.2.1 构建生命周期/阶段(Build lifecycle & phases)2.2.2 项目对象模型 (Project Object Model)2.2.3 依赖管理模…...

编程日记 2025/6/3 10:23:01

ASP.NET Core - 日志记录系统(一)

ASP.NET Core - 日志记录系统（一） 一、日志记录二、ASP.Net Core 的日志记录2.1. 日志记录系统的接入2.2 记录日志2.3 基本配置2.3.1 日志级别2.3.2 全局输出配置2.3.3 针对特定日志提供程序的配置2.3.6 显式设置2.3.4 配置筛选原理2.3.5 日志作用域一、…...

编程日记 2025/6/4 6:47:47

Linux 各个服务启动命令

目录 redis后台启动rocketMq后台启动mongodb后台启动mysql后台启动 redis后台启动 ./redis-server ./redis.confrocketMq后台启动 #关闭Nameserver sh bin/mqshutdown namesrv #关闭Broker sh bin/mqshutdown broker #启动namesrv nohup sh bin/mqnamesrv -n 127.0.0.1:9876 …...

编程日记 2025/6/2 11:15:06

24-25-1-单片机开卷部分习题和评分标准

依据相关规定试卷必须按评分标准进行批改。给分一定是宽松的，能给分一定给，如有疑问也可以向学院教务办申请查卷。一部分学生期末成绩由于紧张或其他原因导致分数过低，也是非常非常遗憾的。个人也是非常抱歉的。开卷考试简答题第一…...

编程日记 2025/6/2 19:32:05

Apache Hop从入门到精通第二课 Apache Hop 核心概念/术语

1、apache hop核心概念思维导图虽然apache hop是kettle的一个分支，但是它的概念和kettle还是有一些区别的，下图是我根据官方文档梳理的appache hop的核心概念思维导图。 2、Tools（工具） 1）Hop Conf Hop Conf 是一个…...

编程日记 2025/6/3 3:14:01

网络安全 | Web安全常见漏洞和防护经验策略

关注：CodingTechWork 引言 OWASP (Open Web Application Security Project) Top 10是Web应用最常见的安全风险集合，帮助开发人员和安全专家识别和防止最严重的网络安全问题。以下是基于OWASP Top 10的Web安全防护经验策略与规则集。Web开发者必须对潜在…...

编程日记 2025/6/2 4:32:58

Unity 3D游戏开发从入门进阶到高级

本文精心整理了Unity3D游戏开发相关的学习资料，涵盖入门、进阶、性能优化、面试和书籍等多个维度，旨在为Unity开发者提供全方位、高含金量的学习指南.欢迎收藏。学习社区 Unity3D开发者这是一个专注于Unity引擎的开发者社区，汇聚了众多Un…...

编程日记 2025/6/1 20:27:22

浅谈云计算14 | 云存储技术

云存储技术一、云计算网络存储技术基础1.1 网络存储的基本概念1.2云存储系统结构模型1.1.1 存储层1.1.2 基础管理层1.1.3 应用接口层1.1.4 访问层 1.2 网络存储技术分类二、云计算网络存储技术特点2.1 超大规模与高可扩展性2.1.1 存储规模优势2.1.2 动态扩展机制 2.2 高可用性…...

编程日记 2025/6/3 20:38:18

No.1|Godot|俄罗斯方块复刻|棋盘和初始方块的设置

删掉基础图标新建assets、scenes、scripts文件夹俄罗斯方块的每种方块都是由四个小方块组成的，很适合放在网格地图中比如网格地图是宽10列，高20行要实现网格的对齐和下落 Node2D节点新建一个Node2D 添加2个TileMapLayer 一个命名为Board&…...

编程日记 2025/5/31 21:18:09

二 RK3568 固件中打开 ADB 调试

一 usb adb Android 系统，设置->开发者选项->已连接到计算机打开，usb调试开关打开通过 usb otg 口连接开发上位机 (windows/linux) 上位机安装 adb 服务之后，通过 cmd/shell: #1 枚举设备 adb devices #2 进入 android shell adb shell # 3 验证上传下载…...

编程日记 2025/6/2 21:11:05

鸿蒙报错Init keystore failed: keystore password was incorrect

报错如下： > hvigor ERROR: Failed :entry:defaultSignHap... > hvigor ERROR: Tools execution failed. 01-13 16:35:55 ERROR - hap-sign-tool: error: Init keystore failed: keystore password was incorrect * Try the following: > The key stor…...

编程日记 2025/6/4 0:13:43