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

VUE3+Mapbox-GL 实现鼠标绘制矩形功能的详细代码和讲解

news 来源：原创 2025/6/27 15:36:41

以下是如何使用 Mapbox GL JS 实现鼠标绘制矩形功能的详细代码和讲解。Mapbox GL JS 是一个强大的 JavaScript 库，可以用来创建交互式地图。下面将通过监听鼠标事件并动态更新地图图层来实现这一功能。

实现步骤

初始化地图
- 在 HTML 文件中引入 Mapbox GL JS 库，并设置一个容器来显示地图。
- 创建一个 mapboxgl.Map 实例，配置地图样式、中心点和缩放级别。
监听鼠标事件
- 使用 map.on 方法监听 mousedown（鼠标按下）、mousemove（鼠标移动）和 mouseup（鼠标松开）事件。
- 在 mousedown 时记录矩形的起始点。
- 在 mousemove 时根据鼠标位置实时更新矩形。
- 在 mouseup 时结束绘制并固定矩形。
绘制矩形
- 使用 GeoJSON 数据格式表示矩形。
- 通过 map.addSource 和 map.addLayer 将矩形添加到地图上。
- 在鼠标移动时动态更新 GeoJSON 数据以显示矩形的当前形状。
结束绘制
- 在绘制完成后移除不必要的事件监听器，避免重复触发。

详细代码

以下是完整的 HTML 和 JavaScript 代码示例：

<<template><div class="map-container"><div id="map" ref="mapContainer"></div><div class="control-panel"><button @click="toggleDrawMode">{{ isDrawMode ? '停止绘制' : '开始绘制' }}</button><button @click="clearRectangles">清除所有</button></div></div>
</template><script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import mapboxgl from 'mapbox-gl'
import 'mapbox-gl/dist/mapbox-gl.css'
import { setMapInstance } from '@/utils/mapUtils'const mapContainer = ref<HTMLElement | null>(null)
let map: mapboxgl.Map | null = null
const isDrawMode = ref(false)
const isDrawing = ref(false)
const startPoint = ref<[number, number] | null>(null)
const currentRectangle = ref<GeoJSON.Feature | null>(null)
const rectangleCollection = ref<GeoJSON.FeatureCollection>({type: 'FeatureCollection',features: []
})
const rectangleLayerId = 'rectangle-layer'
const tempRectangleSourceId = 'temp-rectangle-source'
const tempRectangleLayerId = 'temp-rectangle-layer'const initMap = () => {if (!mapContainer.value) returnmapboxgl.accessToken = "你的token"map = new mapboxgl.Map({container: mapContainer.value,style: 'mapbox://styles/mapbox/streets-v12',center: [116.397428, 39.90923],zoom: 12})map.on('load', () => {// Add source for completed rectanglesmap?.addSource('rectangle-source', {type: 'geojson',data: rectangleCollection.value})// Add layer for completed rectanglesmap?.addLayer({id: rectangleLayerId,type: 'fill',source: 'rectangle-source',paint: {'fill-color': '#4e9af5','fill-opacity': 0.5,'fill-outline-color': '#0066cc'}})// Add layer for rectangle outlinemap?.addLayer({id: 'rectangle-outline',type: 'line',source: 'rectangle-source',paint: {'line-color': '#0066cc','line-width': 2}})// Add source for the temp rectangle being drawnmap?.addSource(tempRectangleSourceId, {type: 'geojson',data: {type: 'Feature',geometry: {type: 'Polygon',coordinates: [[[0, 0],[0, 0],[0, 0],[0, 0],[0, 0]]]},properties: {}}})// Add layer for the temp rectanglemap?.addLayer({id: tempRectangleLayerId,type: 'fill',source: tempRectangleSourceId,paint: {'fill-color': '#4e9af5','fill-opacity': 0.3,'fill-outline-color': '#0066cc'}})// Add temp rectangle outline layermap?.addLayer({id: 'temp-rectangle-outline',type: 'line',source: tempRectangleSourceId,paint: {'line-color': '#0066cc','line-width': 2,'line-dasharray': [2, 2]}})// Event handlers for drawingsetupDrawingEventHandlers()})setMapInstance(map)
}const setupDrawingEventHandlers = () => {if (!map) return// First click - start drawingmap.on('click', (e) => {if (!isDrawMode.value) return// If not drawing yet, start a new rectangleif (!isDrawing.value) {isDrawing.value = truestartPoint.value = [e.lngLat.lng, e.lngLat.lat]// Initialize the temp rectangleupdateTempRectangle(startPoint.value, startPoint.value)} // If already drawing, complete the rectangleelse if (startPoint.value) {const endPoint: [number, number] = [e.lngLat.lng, e.lngLat.lat]// Complete the rectanglecompleteRectangle(startPoint.value, endPoint)// Reset drawing stateisDrawing.value = falsestartPoint.value = null// Clear temp rectangleupdateTempRectangle([0, 0], [0, 0])}})// Mouse move - update rectangle while in drawing mode, but after first clickmap.on('mousemove', (e) => {// Only update if we're in drawing mode AND we've made the first clickif (!isDrawMode.value || !isDrawing.value || !startPoint.value) return// Update the rectangle as mouse moves (without needing to hold the button)updateTempRectangle(startPoint.value, [e.lngLat.lng, e.lngLat.lat])})
}const updateTempRectangle = (start: [number, number], end: [number, number]) => {if (!map) return// Create rectangle coordinates from start and end pointsconst coords = createRectangleCoordinates(start, end)// Update the temporary rectangleconst geojsonSource = map.getSource(tempRectangleSourceId) as mapboxgl.GeoJSONSourceif (geojsonSource) {geojsonSource.setData({type: 'Feature',geometry: {type: 'Polygon',coordinates: [coords]},properties: {}})}
}const completeRectangle = (start: [number, number], end: [number, number]) => {if (!map) return// Create rectangle coordinates from start and end pointsconst coords = createRectangleCoordinates(start, end)// Skip if rectangle is too smallif (Math.abs(start[0] - end[0]) < 0.0001 && Math.abs(start[1] - end[1]) < 0.0001) {return}// Create a new rectangle featureconst newRectangle: GeoJSON.Feature = {type: 'Feature',geometry: {type: 'Polygon',coordinates: [coords]},properties: {id: Date.now().toString()}}// Add to collectionrectangleCollection.value.features.push(newRectangle)// Update the map sourceconst source = map.getSource('rectangle-source') as mapboxgl.GeoJSONSourceif (source) {source.setData(rectangleCollection.value)}
}const createRectangleCoordinates = (start: [number, number], end: [number, number]): [number, number][] => {return [[start[0], start[1]],[end[0], start[1]],[end[0], end[1]],[start[0], end[1]],[start[0], start[1]] // Close the polygon]
}const toggleDrawMode = () => {isDrawMode.value = !isDrawMode.valueif (!isDrawMode.value) {// Reset drawing state when exiting draw modeisDrawing.value = falsestartPoint.value = nullupdateTempRectangle([0, 0], [0, 0])}// Change cursor based on draw modeif (map) {map.getCanvas().style.cursor = isDrawMode.value ? 'crosshair' : ''}
}const clearRectangles = () => {if (!map) return// Clear all rectanglesrectangleCollection.value.features = []// Update the map sourceconst source = map.getSource('rectangle-source') as mapboxgl.GeoJSONSourceif (source) {source.setData(rectangleCollection.value)}
}onMounted(() => {initMap()
})onUnmounted(() => {map?.remove()map = null
})
</script><style scoped>
.map-container {width: 100%;height: 100vh;position: relative;
}#map {width: 100%;height: 100%;
}.control-panel {position: absolute;top: 20px;right: 20px;z-index: 1;background: white;padding: 10px;border-radius: 4px;box-shadow: 0 2px 4px rgba(0,0,0,0.2);display: flex;gap: 8px;
}button {padding: 8px 16px;background: #2c3e50;color: white;border: none;border-radius: 4px;cursor: pointer;
}button:hover {background: #34495e;
}
</style>

代码讲解

1. 初始化地图

引入 Mapbox GL JS：通过 <script> 和 <link> 标签引入 Mapbox GL JS 的 JavaScript 和 CSS 文件。
设置访问令牌：将 mapboxgl.accessToken 设置为你的 Mapbox 访问令牌（需自行申请）。
创建地图实例：使用 mapboxgl.Map 配置地图，指定容器 ID（map）、地图样式（streets-v11）、中心点和缩放级别。

2. 监听鼠标事件

鼠标点击 (clik)：
- 通过 e.lngLat 获取鼠标按下时的经纬度，存储在 startPoint 中。
- 绑定 mousemove，开始绘制流程。
鼠标移动 (mousemove)：
- 调用 drawRectangle 函数，实时更新矩形形状。
鼠标再次点击 (clik)：
- 调用 stopDrawing 函数，移除事件监听器，结束绘制。

3. 绘制矩形

计算坐标：根据 startPoint 和当前鼠标位置 endPoint，生成矩形的四个顶点坐标，形成闭合的多边形。
创建 GeoJSON：将坐标封装为 GeoJSON 格式的 Polygon 类型。
更新地图：
- 如果地图上已有 rectangle 数据源，则通过 setData 更新数据。
- 如果没有，则通过 addSource 添加数据源，并通过 addLayer 创建一个填充图层来显示矩形。
样式设置：矩形填充颜色为 #088（青色），透明度为 0.5。

4. 结束绘制

在 stopDrawing 函数中，使用 map.off 移除 mousemove 和 mouseup 的事件监听器，确保绘制过程不会重复触发。
你可以选择在此处保存矩形数据（例如存储到数组中）或添加其他功能。

注意事项

访问令牌：确保将 'YOUR_MAPBOX_ACCESS_TOKEN' 替换为你的实际 Mapbox 访问令牌，否则地图无法加载。
单一矩形：当前代码只支持绘制一个矩形，绘制完成后会覆盖之前的矩形。如需支持多个矩形，可以为每个矩形生成唯一的 ID 并创建独立图层。
扩展功能：你可以添加按钮或逻辑来重置地图状态，或允许用户删除已绘制的矩形。

通过以上代码可以在 Mapbox GL JS 地图上实现鼠标绘制矩形的功能。这一功能适用于区域选择、地图标注等场景，具有很强的实用性。

VUE3+Mapbox-GL 实现鼠标绘制矩形功能的详细代码和讲解

以下是如何使用 Mapbox GL JS 实现鼠标绘制矩形功能的详细代码和讲解。Mapbox GL JS 是一个强大的 JavaScript 库，可以用来创建交互式地图。下面将通过监听鼠标事件并动态更新地图图层来实现这一功能。实现步骤初始化地图在 HTML 文件中引入 Mapbox GL JS 库&…...

编程日记 2025/6/27 15:36:41

Python数据类型-list

列表(List)是Python中最常用的数据类型之一，它是一个有序、可变的元素集合。 1. 列表基础创建列表 empty_list [] # 空列表 numbers [1, 2, 3, 4, 5] # 数字列表 fruits [apple, banana, orange] # 字符串列表 mixed [1, hello, 3.14, True] # 混合类型…...

编程日记 2025/6/27 15:32:08

【Python】Browser-Use：让 AI 替你掌控浏览器，开启智能自动化新时代！

Browser-Use：让 AI 替你掌控浏览器，开启智能自动化新时代！ Github地址: https://github.com/browser-use/browser-use/tree/main 在 AI 浪潮席卷的今天，我们是否想过让 AI 不仅仅是聊天、生成内容，而是能像人一样实际操…...

编程日记 2025/6/27 15:26:45

1.查看显卡 lspci | grep VGA 2.修改grub 2.1备份grub cp /etc/default/grub /etc/default/grub.bak 2.2修改grub vi /etc/default/grub 如果是Intel的CPU GRUB_CMDLINE_LINUX_DEFAULT“quiet intel_iommuon” 如果是AMD的CPU： GRUB_CMDLINE_LINUX_DEFAUL…...

编程日记 2025/6/26 1:44:29

C# FileStream 使用详解

总目录前言在 C# 编程中，文件操作是常见的任务之一。FileStream 类是 System.IO 命名空间中的一个重要类，它提供了对文件的读取和写入操作的底层支持。本文将详细介绍 FileStream 的使用方法，包括如何创建、读取、写入文件，以及…...

编程日记 2025/6/27 15:29:32

C++编程语言：抽象机制：一个矩阵的设计(Bjarne Stroustrup)

第29章一个矩阵的设计(A Matrix Design) 目录 29.1 引言 29.1.1 基本的 Matrix 用法 29.1.2 Matrix 的要求 29.2 一个 Matrix 模板 29.2.1 构造和赋值(Construction and Assignment) 29.2.2 下标和分片(Subscripting and Slicing) 29.3 Matrix算术运算(Matrix…...

编程日记 2025/6/2 8:52:19

Swift LeetCode 246 题解：中心对称数（Strobogrammatic Number）

摘要在日常开发中，我们经常遇到一些关于对称性的判断，比如字符串回文、镜像翻转等。而 “中心对称数”（Strobogrammatic Number） 这个问题，本质上是考察一个数字在旋转 180 度后是否还是原来的样子。这个问题看似简…...

编程日记 2025/6/25 22:41:09

网络安全等级保护测评

名词解释网络安全等级保护测评网络安全等级保护测评，是对信息系统进行的一种安全评估活动。它的目的是验证信息系统是否达到了国家网络安全等级保护制度所规定的安全保护要求。这个制度将信息系统按照重要性划分为不同的安全保护等级，每个等级都有相应的安全保护要求。 …...

编程日记 2025/6/26 14:01:16

项目复盘：websocket不受跨域限制的原理

主要还是因为： 1、WebSocket 是独立于 HTTP 的应用层协议，通过 HTTP 建立连接后，完全脱离 HTTP 语义约束。这意味着不受 HTTP 同源策略限制不需要预检请求不依赖 CORS 头机制 2、建立连接时的握手请求仍使用 HTTP 格式，但…...

编程日记 2025/6/27 2:09:23

deep-sync开源程序插件导出您的 DeepSeek 与 public 聊天

一、软件介绍文末提供下载 deep-sync开源程序插件导出您的 DeepSeek 与 public 聊天，这是一个浏览器扩展，它允许用户公开、私下分享他们的聊天对话，并使用密码或过期链接来增强 Deepseek Web UI。该扩展程序在 Deepseek 界面中添加了一个 “…...

编程日记 2025/6/23 1:48:50

AI原生应用爆发：从通用大模型到垂直场景的算力重构

2025年第一季度，中国AI产业迎来标志性转折点：DeepSeek-R1大模型月活用户突破3000万，通义千问QwQ-32B在医疗领域诊断准确率达三甲医院主治医师水平，京东AI虚拟模特单日生成商品图超200万张……这些数据的背后，是AI技术从…...

编程日记 2025/6/25 23:29:43

arcgis jsapi 4.31 调用geoserver 发布的wms服务

服务的调用我也测试了网络搜索的很多方法，均未奏效，后来还是通过对官网例子的研究，找到了解决方案，调试的过程是非常痛苦的，最大的问题就是调用后没有任何反应，也不会给你任何的错误信息，这是最…...

编程日记 2025/6/26 8:18:18

《筋斗云的K8s容器化迁移》

点击下面图片带您领略全新的嵌入式学习路线 🔥爆款热榜 88万阅读 1.6万收藏文章目录 **第一章：斗战胜佛的延迟焦虑****第二章：微服务化的紧箍咒****第三章：混沌中的流量劫持****第四章：量子筋斗的终极形态****终章&…...

编程日记 2025/6/25 12:19:52

[笔记.AI]大模型训练与向量值的关系

（借助 DeepSeek-V3 辅助生成） 大模型在训练后是否会改变向量化的值，取决于模型的训练阶段和使用方式。以下是详细分析： 1. 预训练阶段：向量化值必然改变动态调整过程： 在预训练阶段（如BERT、…...

编程日记 2025/6/24 16:36:02

【学Rust写CAD】18 定点数2D仿射变换矩阵结构体（MatrixFixedPoint结构别名）

源码 // matrix/fixed.rs use crate::fixed::Fixed; use super::generic::Matrix;/// 定点数矩阵类型别名 pub type MatrixFixedPoint Matrix<Fixed, Fixed, Fixed, Fixed, Fixed, Fixed>;代码解析这段代码定义了一个定点数矩阵的类型别名 MatrixFixedPoint&#xff…...

编程日记 2025/6/24 18:52:17

Linux进程间通信：【目的】【管道】【匿名管道】【命名管道】【System V 共享内存】

目录一.进程间通信目的二.管道三.匿名管道 3.1用fork来共享管理管道 3.2站在文件描述符角度-深度理解管道 3.3内核角度 3.4管道样例 3.4.1测试管道读写 3.4.2代码解决方案1：倒着关闭： 解决方案2： 只让父进程一个人指向写端四…...

编程日记 2025/6/27 13:26:13

Python 自动化：节省时间，更智能地工作

大家好，这里是架构资源栈！点击上方关注，添加“星标”，一起学习大厂前沿架构！ 时间是你最宝贵的资产。如果你花费数小时手动执行重复性任务，那么当 Python 可以为你完成这些任务时，你就是在浪费时…...

编程日记 2025/6/21 12:16:33

StarRocks的执行计划和Profile

文章目录一、执行计划和Profile相关脚本二、如何分析查询1、概念了解2、Query Plan①查看 Query Plan②分析 Query Plan 3、Query hint4、Query Profile①启用 Query Profile②查看 Query Profile③分析 Query Profile 一、执行计划和Profile相关脚本命令功能ANALYZE PROFIL…...

编程日记 2025/6/24 15:01:37

【设计模式】过滤器模式

过滤器顾名思义，定义一些过滤规则，将符合要求的内容筛选，就比如过滤不同大小或者不同颜色的水果，需要颜色和大小过滤器，筛选条件独立为对象，可以通过灵活组合形成过滤链条。避免大量使用判断语句。案例代…...

编程日记 2025/6/21 3:41:03

Jenkins插件安装失败如何解决

问题：安装Jenkins时候出现插件无法安装的情况。测试环境： 操作系统：Windows11 Jenkins：2.479.3 JDK：17.0.14（21也可以） 解决办法一： 更换当前网络，局域网、移动、联通…...

编程日记 2025/6/27 15:32:18

GO语言杂记（文章持续更新）

1、MAIN冲突在一个文件夹下有两个go文件同时写了main函数，将会报错，main函数只能在main包中。实则不然，有些环境下并不会报错。 2、gofmt命令---自动对齐命令作用：将go文件代码自动缩进。 gofmt -w escapecharprac.go...

编程日记 2025/6/22 21:43:46

VUE如何前端控制及动态路由详细讲解

在Vue.js中，前端控制通常指的是通过Vue的响应式系统、组件化、路由、状态管理等技术来实现对前端应用的控制和管理一、前端路由控制基础使用 vue-router 管理路由，通过路由守卫和动态添加路由实现权限控制。 1. 安装和配置 npm install vue-router…...

编程日记 2025/6/1 16:08:58

【区块链安全 | 第九篇】基于Heimdall设计的智能合约反编译项目

文章目录背景目的安装1、安装 Rust2、克隆 heimdall-dec3、编译 heimdall-dec4、运行 heimdall-dec 使用说明1、访问 Web 界面2、输入合约信息3、查看反编译结果实战演示1、解析普通合约2、解析代理合约背景在区块链安全研究中，智能合约的审计和分析至关重要。…...

编程日记 2025/6/23 23:56:34

day1_Flink基础

文章目录 Flink基础今日课程内容目标为什么要学Flink技术更新迭代市场需求流式计算批量计算概念特点批量计算的优势和弊端流式计算生活中流场景流式计算的概念 Flink简介Flink历史Flink介绍 Flink架构体系已学过的框架技术Flink架构 Flink集群搭建Flink的集群模式Standalone模…...

编程日记 2025/6/25 5:50:06

43页可编辑PPT | 大数据管理中心设计规划方案大数据中心组织架构大数据组织管理

这份文档是一份关于大数据管理中心规划设计方案的详细报告，涵盖了背景与需求分析、整体规划方案、关键能力实现方案以及实施方案等内容。报告强调大数据在城市治理中的重要性，提出通过构建统一的大数据平台，整合城市各部门数据资源&#xff0…...

编程日记 2025/6/22 1:16:54

JavaScript数据结构

目录 JavaScript数据结构一、基础数据结构 1. 数组（Array） 2. 对象（Object） 二、ES6 高级数据结构 1. Map 2. Set 3. WeakMap 与 WeakSet 三、类型化数组（Typed Arrays） 四、其他数据结构实现 …...

编程日记 2025/5/30 2:12:12

如何使用 FastAPI 构建 MCP 服务器

哎呀，各位算法界的小伙伴们！今天咱们要聊聊一个超酷的话题——MCP 协议！你可能已经听说了，Anthropic 推出了这个新玩意儿，目的是让 AI 代理和你的应用程序之间的对话变得更顺畅、更清晰。不过别担心，为你的…...

编程日记 2025/6/25 2:05:22

Js 主线程和异步队列哪个先执行

JavaScript 主线程与异步队列执行顺序详解 JavaScript 是单线程语言，通过事件循环（Event Loop）机制来处理同步和异步任务。以下是主线程与异步队列的执行顺序解析： 1. 执行顺序基本原则 console.log(1. 主线程同步任务);setTim…...

编程日记 2025/6/27 5:22:06

C#实现HTTP服务器：处理文件上传---解析MultipartFormDataContent

完整项目托管地址：https://github.com/sometiny/http HTTP还有重要的一块：文件上传。这篇文章将详细讲解下，前面实现了同一个链接处理多个请求，为了方便，我们独立写了一个HTTP基类，专门处理HTTP请求。 ht…...

编程日记 2025/6/27 6:59:06

【hadoop】远程调试环境

根据上一节，我们已经安装完成hadoop伪分布式环境 hadoop集群环境配置_jdk1.8 441-CSDN博客还没安装的小伙伴可以看看这个帖子这一节我们要实现使用vscode进行远程连接，并且完成java配置与测试目录 vscode 配置远程安装java插件新建java项目 …...

编程日记 2025/6/25 9:31:19

检索增强生成（RAG）：强化 AI 智能体的知识 “武装”

技术点目录第一章、智能体(Agent)入门第二章、基于字节Coze 构建智能体(Agent)第三章、基于其他平台构建智能体（Agent）第四章、国内外智能体(Agent)经典案例详解第五章、大语言模型应用开发框架LangChain入门第六章、基于LangChain的大模型API接入第七章…...

编程日记 2025/6/22 14:11:50

使用 Provider 和 GetX 实现 Flutter 局部刷新的几个示例

1. 使用 Provider 实现局部刷新示例 1：ChangeNotifier Consumer 通过 ChangeNotifier 和 Consumer 实现局部刷新。 import package:flutter/material.dart; import package:provider/provider.dart;void main() {runApp(ChangeNotifierProvider(create: (_) &g…...

编程日记 2025/6/22 14:11:37

notepad++ 正则表达式

注意：Notepad正则表达式字符串最长不能超过69个字符 \ 转义字符如：要使用 “\” 本身, 则应该使用“\\” \t Tab制表符注：扩展和正则表达式都支持 \r 回车符CR 注：扩展支持，正则表达式不支持 \n 换行符…...

编程日记 2025/6/25 17:32:10

一起学大语言模型-通过ollama搭建本地大语言模型服务

文章目录 Ollama的github地址链接安装下载需求配置更改安装目录安装更改下载的模型存储位置Ollama一些目录说明日志目录运行一个模型测试下测试下更改服务监听地址和端口号 Ollama的github地址链接 https://github.com/ollama/ollama 安装下载 mac安装包下载地址&#xff1…...

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

webpack配置详解+项目实战

webpack在vue中的配置，适合想重新认知webpack的你 webpack配置-初级配置 1、配置入口和出口文件 2、配置loader 3、配置eslint（可组装js、jsx检查工具） 4、配置babel（将高级的js语法转换成低版本的js语法） 5、使用 ht…...

编程日记 2025/6/26 7:48:57

【学习笔记】文件上传漏洞--js验证、mime验证、.user.ini、短标签、过滤、文件头

概念文件上传漏洞什么是文件上传漏洞？ 文件上传漏洞是指由于程序员在对用户文件上传部分的控制不足或者处理缺陷，而导致的用户可以越过其本身权限向服务器上上传可执行的动态脚本文件。这里上传的文件可以是木马，病毒，恶意脚…...

编程日记 2025/6/25 3:33:44

经典卷积神经网络LeNet实现（pytorch版）

LeNet卷积神经网络一、理论部分1.1 核心理论1.2 LeNet-5 网络结构1.3 关键细节1.4 后期改进1.6 意义与局限性二、代码实现2.1 导包2.1 数据加载和处理2.3 网络构建2.4 训练和测试函数2.4.1 训练函数2.4.2 测试函数2.5 训练和保存模型2.6 模型加载和预测一、理论部分 LeNet是一…...

编程日记 2025/6/24 8:58:59

【VM虚拟机ip问题】

我就是我，不一样的烟火。文章目录前言一、启动VM虚拟机1. 开启虚拟机2. 输入账号密码登录3. 依次输入指令二、主机ping地址测试1. ping ip地址-成功三、安装-MobaXterm_Personal_21.51. 点击Session2. 选择SSH连接3. 输入信息4. 首次进入5. 连接成功总结前言 …...

编程日记 2025/6/22 14:57:16

【计算机视觉】YOLO语义分割

一、语义分割简介 1. 定义语义分割（Semantic Segmentation）是计算机视觉中的一项任务，其目标是对图像中的每一个像素赋予一个类别标签。与目标检测只给出目标的边界框不同，语义分割能够在像素级别上区分不同类别，从…...

编程日记 2025/6/23 19:34:33

【C++游戏引擎开发】《线性代数》（3）：矩阵乘法的SIMD优化与转置加速

一、矩阵乘法数学原理与性能瓶颈 1.1 数学原理矩阵乘法定义为：给定两个矩阵 A （ m n ） \mathrm{A}（mn） A（mn）和 B （ n p ） \mathrm{B}（np） B（np），它们的乘积 C = A B \mathrm{C}=AB C=AB 是一个 m p \mathrm{m}p mp 的矩阵，其中： C i , j = ∑ k = 1…...

编程日记 2025/6/25 21:38:15

聚焦交易能力提升！EagleTrader 模拟交易系统打造交易成长新路径

在全球市场波动加剧的背景下，交易者面临的挑战已不仅限于技术分析层面。许多交易者在实盘操作中常因情绪干扰导致决策变形，如何构建科学的交易心理与风险控制体系成为行业关注焦点。国内自营交易考试EagleTrader运用自己研发的模拟交易系统&#xff0c…...

编程日记 2025/5/31 10:37:25

文件分片上传

1前端 <inputtype"file"accept".mp4"ref"videoInput"change"handleVideoChange"style"display: none;">2生成hash // 根据整个文件的文件名和大小组合的字符串生成hash值，大概率确定文件的唯一性fhash(f…...

编程日记 2025/6/27 9:03:49

C#Lambda表达式与委托关系

1. 核心关系图示 A[委托] --> B[提供方法容器] B --> C[Lambda表达式] C --> D[委托实例的语法糖] A --> E[类型安全约束] C --> F[编译器自动生成委托实例] 2. 本质联系 2.1 类型关系 ‌Lambda表达式‌是编译器生成的‌委托实例‌表达式自动匹配符合签名的…...

编程日记 2025/6/23 19:52:10

机器翻译和文本生成评估指标：BLEU 计算公式

📌 BLEU 计算公式 BLEU 主要由**n-gram精确匹配率（Precision）和长度惩罚（Brevity Penalty, BP）**组成。 1️⃣ n-gram 精确匹配率计算不同长度的 n-gram（1-gram, 2-gram, ..., n-gram）在生成…...

编程日记 2025/6/27 14:57:32

24 python 类

在办公室里，类就像一个部门（如销售部、财务部），定义了该部门员工的共同属性（姓名、职位）和行为（处理客户、提交报表）。一、面向对象技术简介作为一个要入门码农的牛马&#xff0…...

编程日记 2025/6/25 1:21:04

pycharm与python版本

python 3.6-3.9 pycharm 2021版本搭配最好 python 3.8 pycharm 2019版本搭配最好 pycharm各版本下载...

编程日记 2025/5/26 15:31:49

23种设计模式-结构型模式-外观

文章目录简介问题解决方案示例代码总结简介也称：门面模式、Facade。外观是一种结构型设计模式，能为程序库、框架或其他复杂类提供一个简单的接口。问题假设你必须在代码中使用某个复杂的库或框架中的众多对象。正常情况下，你需要负责…...

编程日记 2025/6/25 12:05:15

open3d教程（三）点云的显示

官方文档位置： Visualization - Open3D 0.19.0 documentationhttps://www.open3d.org/docs/release/tutorial/visualization/visualization.html核心方法： o3d.visualization.draw_geometries([几何对象列表]) import open3d as o3dprint("Load …...

编程日记 2025/6/23 20:05:31

node.js、npm相关知识

Node.js 是一个基于 Chrome V8 JavaScript 引擎构建的开源、跨平台的 JavaScript 运行时环境，主要用于服务器端编程。它允许开发者使用 JavaScript 编写高性能的后端服务，突破了 JavaScript 仅在浏览器中运行的限制。 npm（Node Package Man…...

编程日记 2025/6/26 10:39:05

大象如何学会太空漫步？美的：科技领先、To B和全球化

中国企业正处在转型的十字路口。一边是全新的技术、全新的市场机遇；一边是转型要面临的沉重负累和巨大投入，无数中国制造、中国品牌仍在寻路，而有的人已经走至半途。近日，美的集团交出了一份十分亮眼的2024年财报。数据显示&…...

编程日记 2025/6/26 22:53:23