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

OpenLayers根据任意数量控制点绘制贝塞尔曲线

news 来源：原创 2025/8/4 3:13:05

以下是使用OpenLayers根据任意数量控制点绘制贝塞尔曲线的完整实现方案。该方案支持三个及以上控制点，使用递归算法计算高阶贝塞尔曲线。

实现思路

贝塞尔曲线原理：使用德卡斯特里奥算法（De Casteljau’s Algorithm）递归计算任意阶贝塞尔曲线。
坐标转换：将WGS 84经纬度点转换为Web Mercator投影（EPSG:3857）。
曲线计算：通过递归算法计算曲线上的多个点，形成平滑曲线。
地图渲染：使用OpenLayers的LineString几何对象绘制曲线。

代码实现

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>OpenLayers多控制点贝塞尔曲线</title><script src="https://cdn.jsdelivr.net/npm/ol@7.3.0/dist/ol.js"></script><link href="https://cdn.jsdelivr.net/npm/ol@7.3.0/ol.css" rel="stylesheet"><style>.map {width: 100%;height: 400px;}</style>
</head>
<body><div id="map" class="map"></div><script>// 1. 定义多个控制点（经纬度坐标）const controlPoints = [[116.3, 39.9],    // 北京[118.0, 37.5],    // 黄海海域[121.0, 35.0],    // 东海海域[122.0, 32.0],    // 控制点[121.4, 31.2]     // 上海];// 2. 经纬度转Web Mercator投影const transformPoints = (points) => {return points.map(point => ol.proj.transform(point, 'EPSG:4326', 'EPSG:3857'));};// 3. 递归计算贝塞尔曲线上的点（德卡斯特里奥算法）function deCasteljau(points, t) {if (points.length === 1) return points[0];const newPoints = [];for (let i = 0; i < points.length - 1; i++) {const x = (1 - t) * points[i][0] + t * points[i + 1][0];const y = (1 - t) * points[i][1] + t * points[i + 1][1];newPoints.push([x, y]);}return deCasteljau(newPoints, t);}// 4. 计算完整贝塞尔曲线function calculateBezierCurve(points, segments = 50) {const curvePoints = [];for (let t = 0; t <= 1; t += 1 / segments) {curvePoints.push(deCasteljau(points, t));}return curvePoints;}// 5. 转换坐标并计算贝塞尔曲线const mercatorPoints = transformPoints(controlPoints);const bezierPoints = calculateBezierCurve(mercatorPoints, 100);// 6. 创建地图const map = new ol.Map({target: 'map',layers: [new ol.layer.Tile({source: new ol.source.OSM()})],view: new ol.View({center: ol.proj.transform([119, 34], 'EPSG:4326', 'EPSG:3857'),zoom: 5})});// 7. 创建贝塞尔曲线要素const bezierCurve = new ol.geom.LineString(bezierPoints);const feature = new ol.Feature({geometry: bezierCurve,name: '贝塞尔曲线'});// 8. 设置曲线样式feature.setStyle(new ol.style.Style({stroke: new ol.style.Stroke({color: 'rgba(255, 0, 0, 0.8)',width: 3,lineDash: [10, 5]})}));// 9. 添加曲线到地图const vectorSource = new ol.source.Vector({features: [feature]});const vectorLayer = new ol.layer.Vector({source: vectorSource});map.addLayer(vectorLayer);// 10. 添加控制点标记controlPoints.forEach((point, index) => {const mercatorPoint = ol.proj.transform(point, 'EPSG:4326', 'EPSG:3857');const marker = new ol.Feature({geometry: new ol.geom.Point(mercatorPoint),name: `控制点${index + 1}`});marker.setStyle(new ol.style.Style({image: new ol.style.Circle({radius: 6,fill: new ol.style.Fill({ color: 'blue' }),stroke: new ol.style.Stroke({ color: 'white', width: 2 })}),text: new ol.style.Text({text: `控制点${index + 1}`,font: '14px Arial',fill: new ol.style.Fill({ color: 'black' }),stroke: new ol.style.Stroke({ color: 'white', width: 2 }),offsetY: -10})}));vectorSource.addFeature(marker);});</script>
</body>
</html>

核心代码解析

德卡斯特里奥算法：
- 递归计算贝塞尔曲线上的点，支持任意数量的控制点
- 公式：( B(t) = (1-t)B_{0}^{n-1}(t) + tB_{1}^{n-1}(t) )
- 时间复杂度：( O(n^2) )，n为控制点数量
坐标转换：
- 使用ol.proj.transform()确保所有点在同一投影系统下
曲线精度控制：
- segments参数控制曲线的平滑度，值越大曲线越平滑但性能开销更高

效果展示

在这里插入图片描述

（注：实际运行时会显示OpenStreetMap底图和红色贝塞尔曲线）

OpenLayers根据任意数量控制点绘制贝塞尔曲线

以下是使用OpenLayers根据任意数量控制点绘制贝塞尔曲线的完整实现方案。该方案支持三个及以上控制点，使用递归算法计算高阶贝塞尔曲线。实现思路贝塞尔曲线原理：使用德卡斯特里奥算法（De Casteljau’s Algorithm）递归计算任意…...

编程日记 2025/8/4 3:13:05

使用 Jackson 在 Java 中解析和生成 JSON

JSON（JavaScript Object Notation）是一种轻量级、跨语言的数据交换格式，因其简单易读和高效解析而广泛应用于 Web 开发、API 通信和数据存储。在 Java 中，处理 JSON 是许多应用程序的核心需求，尤其是在与 RESTful 服务交互或管理配置文件时。Jackson 是一个功能强大且广受…...

编程日记 2025/7/30 11:53:49

Qt中在子线程中刷新UI的方法

Qt中在子线程中刷新UI的方法在Qt中UI界面并不是线程安全的，意味着在子线程中不能随意操作UI界面组件（比如按钮、标签）等，如果强行操作这些组件有可能会导致程序崩溃。那么在Qt中如何在子线程中刷新UI控件呢？ 两种方…...

编程日记 2025/8/4 3:01:45

封装 RabbitMQ 消息代理交互的功能

封装了与 RabbitMQ 消息代理交互的功能，包括发送和接收消息，以及管理连接和通道。主要组件依赖项： 代码使用了多个命名空间，包括 Microsoft.Extensions.Configuration（用于配置管理）、RabbitMQ.Client&a…...

编程日记 2025/8/4 3:13:03

关于ffmpeg的简介和使用总结

主要参考： 全网最全FFmpeg教程，从新手到高手的蜕变指南 - 知乎 (zhihu.com) FFmpeg入门教程（非常详细）从零基础入门到精通，看完这一篇就够了。-CSDN博客 FFmpeg教程（超级详细版） - 个人文章 - S…...

编程日记 2025/8/4 3:08:18

计算机图形学编程(使用OpenGL和C++)(第2版)学习笔记 08.阴影

阴影没有阴影的渲染效果如下，看起来不真实： 有阴影的渲染效果如下，看起来真实： 显示阴影有两种方式，一种是原书中的方式，另一种是采用光线追踪技术，该技术可以参考ShaderToy学习笔记 08.阴…...

编程日记 2025/8/4 3:09:56

[面试]SoC验证工程师面试常见问题（七）低速接口篇

SoC验证工程师面试常见问题（七）低速接口篇摘要：低速接口是嵌入式系统和 SoC (System on Chip) 中常用的通信接口，主要用于设备间的短距离、低带宽数据传输。相比高速接口（如 PCIe、USB 3.0），低速接口的传输速率较低（通常在 kbps 到几 Mbps 范围），但具有简单…...

编程日记 2025/8/1 17:35:13

算法训练营第十三天｜226.翻转二叉树、101. 对称二叉树、 104.二叉树的最大深度、111.二叉树的最小深度

递归递归三部曲： 1.确定参数和返回值2.确定终止条件3.确定单层逻辑 226.翻转二叉树题目思路与解法第一想法： 递归，对每个结点进行反转 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, le…...

编程日记 2025/8/3 3:50:59

电子电器架构 --- 车载网关的设计

我是穿拖鞋的汉子，魔都中坚持长期主义的汽车电子工程师。老规矩，分享一段喜欢的文字，避免自己成为高知识低文化的工程师： 钝感力的“钝”，不是木讷、迟钝，而是直面困境的韧劲和耐力，是面对外界…...

编程日记 2025/8/4 3:09:57

`C_PiperInterface` 类接口功能列表

C_PiperInterface 类接口功能列表 C_PiperInterface 提供了全面的接口，用于控制 Piper 机械臂的运动、查询状态、设置参数以及管理 SDK 限制。官仓链接以下是 C_PiperInterface 类中所有接口的功能总结： 1. 初始化与连接相关接口 __new__: 实现单例…...

编程日记 2025/8/3 9:29:00

D. Apple Tree Traversing 【Codeforces Round 1023 (Div. 2)】

D. Apple Tree Traversing 题目大意有一个包含 n n n 个节点的苹果树，初始时每个节点上有一个苹果。你有一张纸，初始时纸上没有任何内容。你需要通过以下操作遍历苹果树，直到所有苹果都被移除： • 选择一个苹果路径 ( u , v…...

编程日记 2025/7/30 20:45:37

Docker镜像搬运工：save与load命令的实战指南

在日常的容器化开发中，镜像的搬运和部署是每个开发者必须掌握的技能。今天我们将深入探讨Docker的"save"和"load"这对黄金搭档，揭秘它们在镜像管理中的妙用。一、基础认知：镜像的打包与解包 docker save 和 docker loa…...

编程日记 2025/8/4 3:11:32

查看Electron 应用的调试端口

以下是一些可以知道已发布第三方 Electron 应用调试端口的方法： * **通过命令行参数查看** ： * 如果该 Electron 应用在启动时添加了类似 --remote-debugging-portxxxx 或 --inspectxxxx 的参数，那么其调试端口就是该参数指定的端口号。比…...

编程日记 2025/8/3 14:26:52

各种环境测试

加载测试专用属性当在测试时想要加入某些配置且对其他测试类不产生影响是可以用Import注释添加配置测试类中启动web环境默认为none不开启...

编程日记 2025/7/30 20:45:32

腾讯云低代码实战：零基础搭建家政维修平台

目录 1. 欢迎与项目概览1.1 教程目的与受众1.2 项目愿景与目标：我们要搭建一个怎样的平台？1.3 平台核心构成与架构解析1.4 技术栈选择与考量1.5 如何高效阅读本教程欢迎来到“腾讯云云开发低代码实战：从零搭建家政维修服务平台”开发教程&am…...

编程日记 2025/8/1 5:39:35

居然智家亮相全零售AI火花大会 AI大模型赋能家居新零售的进阶之路

当人工智能技术以摧枯拉朽之势重构商业世界时，零售业正在经历一场静默而深刻的革命。在这场变革中，居然智家作为新零售领域的创新标杆，凭借其在AI技术应用上的超前布局和持续深耕，已悄然构建起从消费场景到产业生态的智能化闭环。…...

编程日记 2025/8/2 13:17:31

微服务6大拆分原则

微服务6大拆分原则微服务拆分是指将一个大型应用程序拆分成独立服务的过程，在微服务拆分时，需要考虑以下6大微服务拆分原则一、单一职责原则微服务单一职责原则，是指每个微服务应该专注于解决一个明确定义的业务领域或功能，…...

编程日记 2025/8/4 3:03:31

进程间通信--管道【Linux操作系统】

文章目录进程间通信（IPC）进程间通信的目的1. 数据交换2. 资源共享3. 进程协同4. 系统解耦5. 分布式计算IPC 的典型方式对比总结进程间通信的前提匿名管道匿名管道的原理创建匿名管道的过程如果不关闭不需要的读写端会怎样？为什么父进程要同…...

编程日记 2025/8/4 3:05:13

模型实时自主训练系统设计一、系统架构 #mermaid-svg-MLuTBuo7ehvStoqS {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-MLuTBuo7ehvStoqS .error-icon{fill:#552222;}#mermaid-svg-MLuTBuo7ehvStoqS .error-text{f…...

编程日记 2025/8/4 3:13:05

5.1 神经网络: 层和块

1 层（Layer） 1.1 定义层是深度学习模型中的基本构建单元，它由一组神经元组成，负责对输入数据进行特定的数学运算和变换，以提取数据的某种特征或表示。每一层可以看作是一个函数，它接收输入数据&#xff…...

编程日记 2025/8/4 3:05:16

鸿蒙系统使用ArkTS开发语言支持身份证阅读器、社保卡读卡器等调用二次开发SDK

har库导入： { "license": "", "devDependencies": {}, "author": "", "name": "entry", "description": "Please describe the basic information.", &qu…...

编程日记 2025/7/30 20:45:20

【Bootstrap V4系列】学习入门教程之组件-输入组（Input group）

Bootstrap V4系列学习入门教程之组件-输入组（Input group）输入组（Input group）Basic example一、Wrapping 包装二、Sizing 尺寸三、Multiple inputs 多输入四、Multiple addons 多个插件五、Button addons 按钮插件六、Buttons with dropdowns 带下拉按钮七、Custom for…...

编程日记 2025/8/4 3:08:21

图像处理篇--- HTTP｜RTSP｜MJPEG视频流格式

文章目录前言一、MJPEG (Motion JPEG)基本概念技术特点编码方式传输协议数据格式优势实现简单低延迟兼容性好容错性强劣势带宽效率低不支持音频缺乏标准控制典型应用二、RTSP (Real Time Streaming Protocol)基本概念技术特点协议栈工作流程传输模式优势专业流媒体支持高…...

编程日记 2025/7/29 22:57:21

`RotationTransition` 是 Flutter 中的一个动画组件，用于实现旋转动画效果

RotationTransition 是 Flutter 中的一个动画组件，用于实现旋转动画效果。它允许你对子组件进行动态的旋转变换，从而实现平滑的动画效果。RotationTransition 通常与 AnimationController 和 Tween 一起使用，以控制动画的开始、结束和过渡效果…...

编程日记 2025/8/3 10:31:15

养生：开启健康生活的密钥

在快节奏的现代生活中，养生已成为追求健康的重要方式。从饮食、运动到生活习惯，每一个细节都关乎身体的健康。以下为你介绍科学养生的实用方法，助你打造健康生活。饮食养生：均衡营养，滋养身体合理的饮食是养生的基…...

编程日记 2025/8/3 1:29:05

大模型微调算法原理：从通用到专用的桥梁

前言本文聚焦大模型落地中的核心矛盾——理论快速发展与实际应用需求之间的脱节，并系统探讨微调技术作为解决这一矛盾的关键手段。尽管大模型展现出强大的通用能力，但其在垂直领域的直接应用仍面临适配性不足、计算成本高等挑战。微调通过在预训练模型基础上进行针对性优化，…...

编程日记 2025/7/31 23:55:08

引言：Client Hello 为何是 HTTPS 安全的核心？

当用户在浏览器中输入 https:// 时，看似简单的操作背后，隐藏着一场加密通信的“暗战”。Client Hello 作为 TLS 握手的首个消息，不仅决定了后续通信的加密强度，还可能成为攻击者的突破口。据统计，超过 35% 的网站因 TL…...

编程日记 2025/7/30 18:37:01

深度学习中的目标检测：从 PR 曲线到 AP

深度学习中的目标检测：从 PR 曲线到 AP 在目标检测任务中，评估模型的性能是非常重要的。通过使用不同的评估指标和标准，我们可以量化模型的准确性与效果。今天我们将重点讨论 PR 曲线（Precision-Recall Curve）、平均精…...

编程日记 2025/8/1 17:03:59

测试左移系列-产品经理实战-实战认知1

课程：B站大学记录产品经理实战项目系统性学习，从产品思维，用户画像，用户体验，增长数据驱动等不同方向理解产品，从0到1去理解产品从需求到落地的全过程，测试左移方向（靠近需求、设计…...

编程日记 2025/7/30 12:26:44

数据集-目标检测系列- 烟雾检测数据集 smoke ＞＞ DataBall

数据集-目标检测系列- 消防浓烟检测数据集 smoke>> DataBall 数据集-目标检测系列- 烟雾检测数据集 smoke ＞＞ DataBall * 相关项目 1）数据集可视化项目：gitcode: https://gitcode.com/DataBall/DataBall-detections-10…...

编程日记 2025/8/1 20:17:14

概率论与数理统计基础学习大纲

📅 课程规划阶段一：基础入门（第1-3周）目标：掌握概率基础和基本分布核心知识点：概率论的基本概念：随机事件、样本空间、概率公理条件概率与全概率公式：贝叶斯公式、事件独立性随机变量与分布：离散型和连续型随机变量常见分布：离散：二项分布、泊松分布连续：…...

编程日记 2025/7/31 17:53:42

5大B2B数字营销社群营销标杆案例TOB企业数字化营销内容营销AI营销培训讲师培训师专家顾问唐兴通分享

全球B2B数字营销领域的企业社区（或BBS）标杆案例在全球TOB（企业对企业）和B2B数字营销实践中，构建企业社区或在线论坛（BBS的现代演变）已成为增强客户关系、驱动产品采用、获取市场洞察和 genera…...

编程日记 2025/8/3 9:39:33

OC语言学习——Foundation框架（上）

一、字符串 NSString代表字符序列不可变的字符串，而NSMutable代表字符序列可变的字符串。 1.1 NSString字符串及功能通过NSString，我们可以： 1、创建字符串。2、读取文件或网络URL来初始化字符串，或者将字符串写入文件或URL。3…...

编程日记 2025/8/1 20:17:16

【Linux】基础 IO（一）

📝前言： 这篇文章我们来讲讲Linux——基础IO主要包括： 文件基本概念回顾 C文件的操作介绍系统关于文件的基本操作 🎬个人简介：努力学习ing 📋个人专栏：Linux 🎀CSDN主页愚润求学 …...

编程日记 2025/7/30 11:29:17

ODA服务器计算节点本地硬盘状态异常的处理

近期，在系统巡检过程中发现一个客户的ODA服务器本地硬盘节点出现告警，ODAX8 X9等，本地硬盘是使用的240GB M.2接口的SSD盘（卡式）的，这个没有外置的指示灯可以从服务器前面板查看，打开服务器机箱盖…...

编程日记 2025/8/1 23:18:01

图像处理篇---opencv实现坐姿检测

文章目录前言一、方法概述使用OpenCV和MediaPipe关键点检测角度计算姿态评估二、完整代码实现三、代码说明PostureDetector类find_pose()get_landmarks()cakculate_angle()evaluate_posture() 坐姿评估标准（可进行参数调整）：可视化功能&…...

编程日记 2025/8/1 9:22:41

微调ModernBERT为大型语言模型打造高效“过滤器”

ModernBERT（2024 年 12 月）是最近发布的小型语言模型，由 Answer.AI、LightOn 和 HuggingFace 共同开发。它利用了现代优化技术，如用于 8,192 token 上下文窗口的 RoPE 和 GeGLU layers，在保持效率的同时提升性能。jina…...

编程日记 2025/7/30 11:29:11

【C++指南】STL容器的安全革命：如何封装Vector杜绝越界访问与迭代器失效？

🌟 各位看官好，我是egoist2023！ 🌍 种一棵树最好是十年前，其次是现在！ 🚀 使用STL的三个境界：能用，明理，能扩展 👍 如果觉得这篇文章有帮助&#…...

编程日记 2025/8/1 1:37:18

Linux在web下http加密和配置虚拟主机及动态页面发布

web服务器的数据加密 1.简介：由于http协议以明文方式发送，不提供任何方式的数据加密，也不适合传输一些重要的信息，如银行卡号、密码等，解决该缺陷设计了安全套接字层超文本传输协议https； 2.https的握手流…...

编程日记 2025/7/30 11:29:07

8.2.CICD自动化

目录一、持续集成（CI）核心实践代码质量管理 • 静态代码分析：SonarQube规则定制（安全漏洞、代码异味检测） • 单元测试覆盖率：Jacoco报告生成与阈值控制（覆盖率≥80%） • 代码风格…...

编程日记 2025/7/30 11:29:05

解密数据结构之位图和布隆过滤器

位图和布隆过滤器前言:笔者在前面分享过哈希的知识，但是笔者在哈希那篇博客中并没有给出哈希的应用场景，今天笔者分享的知识是关于哈希的应用，也就是大名鼎鼎的位图和布隆过滤器。1.位图的定义位图解决 2.位图实现1.先使用命名空间封装&…...

编程日记 2025/8/1 19:49:41

《从零构建大模型》PDF下载（中文版、英文版）

内容简介本书是关于如何从零开始构建大模型的指南，由畅销书作家塞巴斯蒂安• 拉施卡撰写，通过清晰的文字、图表和实例，逐步指导读者创建自己的大模型。在本书中，读者将学习如何规划和编写大模型的各个组成部分、为大模型训练准备…...

编程日记 2025/8/2 9:33:53

Linux的web服务器的部署和优化

http中访问请求中I/O结构在HTTP协议中，I/O（输入/输出）结构主要涉及客户端与服务器之间的请求和响应交互。以下是HTTP请求和响应的基本结构及其关键组成部分： HTTP请求结构 HTTP请求由请求行、请求头和请求体三部分组成请求行…...

编程日记 2025/8/1 5:30:09

vue2 上传pdf，拖拽盖章，下载图片

效果图片： 不多废话上代码： <template><div class"pdf-stamp" onbeforecopyreturn false onselectdocument.selection.empty() ondragstartreturn false onselectstart return false ><div class"scroll-box" scro…...

编程日记 2025/8/3 12:11:50

MindSpore框架学习项目-ResNet药物分类-模型训练

目录 3.模型训练 3.1模型训练 3.1.1 定义优化器和损失函数定义优化器和损失函数代码解析 3.1.2定义训练、推理函数定义训练、推理函数代码解释 3.2模型保存模型保存代码说明 3.3绘制acc和loss的曲线参考内容： 昇思MindSpore | 全场景AI框架 | 昇思Mind…...

编程日记 2025/8/3 15:35:46

Jsp技术入门指南【十二】自定义标签

Jsp技术入门指南【十二】自定义标签前言一、什么是标签二、标签的类型有哪些？1. 空标签2. 带有属性的标签3. 带主体的标签三、自定义标签的部件3.1 自定义标签的四步骤3.2 标签处理程序3.3 自定义标签的开发及使用步骤第一步：创建标签助手类第二步&…...

编程日记 2025/7/30 12:55:09

数据库故障排查指南：从连接问题和性能优化

数据库作为现代应用程序的核心组件，其稳定性和性能直接影响整个系统的运行。然而，数据库在运行过程中常常会遇到各种故障，如连接失败、性能下降、数据不一致等问题。本文将从实际问题出发，结合代码示例和工具使用，系统…...

编程日记 2025/7/30 12:55:06

材料创新与工艺升级——猎板PCB引领高频阻抗板制造革命

在5G通信、AI服务器和自动驾驶的推动下，高频电路对信号完整性的要求日益严苛。猎板PCB作为国内高端PCB制造的标杆企业，通过材料创新与工艺革新，实现了阻抗控制的突破性进展，为行业树立了新标杆。 1. 高频材料的突破传统FR-4基材…...

编程日记 2025/8/1 8:37:25

GitHub 趋势日报 (2025年05月09日)

本日报由 TrendForge 系统生成 https://trendforge.devlive.org/ 🌐 本日报中的项目描述已自动翻译为中文 📈 今日整体趋势 Top 10 排名项目名称项目描述今日获星总星数语言1voideditor/void⭐ 1879⭐ 15214TypeScript2ruanyf/weekly科技爱好者周刊&…...

编程日记 2025/7/31 18:24:14

SaaS场快订平台项目说明【持续更新】

一、项目介绍 SaaS场快订平台是一个高效、便捷的体育场馆在线预订平台。本项目采用SaaS方式开发，用户不需要安装软件，直接通过互联网访问在线程序即可使用。本项目主要构建了一个体育馆预订系统，项目的功能主要包括：用户注册与登…...

编程日记 2025/8/3 14:08:43

实现思路

代码实现

核心代码解析

效果展示

相关文章：