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

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

article 2025/10/3 16:13:58

以下是使用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/9/19 13:58:32

STM32--RCC--时钟

教程系统时钟 RCC RCC（Reset and Clock Control）是STM32微控制器中管理时钟和复位系统的关键外设模块，负责整个芯片的时钟树配置和复位控制。 RCC主要功能时钟系统管理： 内部/外部时钟源选择时钟分频/倍频配置各外设时钟门…...

编程日记 2025/9/21 15:44:32

uniapp 不同路由之间的区别

在UniApp中，路由跳转是实现页面导航的核心功能，常见的路由跳转方式包括navigateTo、redirectTo、reLaunch、switchTab和navigateBack。这些方法在跳转行为和适用场景上有所不同。一、路由跳转的类型与区别 1. uni.navigateTo(OBJECT) 特点&#xff1…...

编程日记 2025/6/26 0:23:25

mysql 已经初始化好，但是用 dbeaver 连接报错：Public Key Retrieval is not allowed

MySQL 已经初始化好，但用 DBeaver 连接时报错 “Public Key Retrieval is not allowed”，这是 MySQL 8 默认认证插件 caching_sha2_password 导致的安全限制问题。解决方法如下： 解决方案 1. 在 DBeaver 中开启 allowPublicKeyRetrievaltru…...

编程日记 2025/6/24 1:26:05

Spring 项目无法连接 MySQL：Nacos 配置误区排查与解决

在开发过程中，我们使用 Nacos 来管理 Spring Boot 项目的配置，其中包括数据库连接配置。然而，在实际操作中，由于一些概念的混淆，我们遇到了一些连接问题。本文将分享我的故障排查过程，帮助大家避免类似的错…...

编程日记 2025/6/6 21:39:31

仿腾讯会议——创建房间加入房间

等等...

编程日记 2025/9/19 15:03:12

Linux系统入门第十二章 --Shell编程之正则表达式

一、正则表达式之前学习了 Shell 脚本的基础用法，已经可以利用条件判断、循环等语句编辑 Shell脚本。接下来我们将开始介绍一个很重要的概念-正则表达式(RegularExpression，RE) 1.正则表达式的定义正则表达式又称正规表达式、常规表达式。在代码中常…...

编程日记 2025/9/19 12:12:34

[架构之美]Spring Boot多环境5种方案实现Dev/Test/Prod环境隔离

[架构之美]Spring Boot多环境5种方案实现Dev/Test/Prod环境隔离（十六） 摘要：本文深入剖析Spring Boot多环境配置的5种实现方案，涵盖YAML分组配置、Maven Profile集成、Kubernetes适配等企业级实践，并附赠配置加密方案…...

编程日记 2025/9/20 3:20:27

C++STL——stack,queue

stack与queue 前言容器适配器deque 前言本篇主要讲解stack与queue的底层，但并不会进行实现，stack的接口 queue的接口 ，关于stack与queue的接口在这里不做讲解，因为通过前面的对STL的学习，这些接口都是大同小异的。 …...

编程日记 2025/9/19 11:48:47

解决社区录音应用横屏状态下,录音后无法播放的bug

最近看到社区有小伙伴反映，社区录音应用横屏时，录音后无法播放的问题。现分享解决办法。社区录音应用的来源：https://gitee.com/openharmony/applications_app_samples/tree/OpenHarmony-5.0.2-Release/code/SystemFeature/Media/Recorder …...

编程日记 2025/9/19 17:19:15

专业级软件卸载工具：免费使用，彻底卸载无残留！

在数字生活节奏日益加快的今天，我们的电脑就像每天都在"吃进"各种软件。但您是否注意到，那些看似消失的程序其实悄悄留下了大量冗余文件？就像厨房角落里积攒的调味瓶空罐，日积月累就会让系统变得"消化不良"。…...

编程日记 2025/9/19 10:36:12

前端开发实战：用React Hooks优化你的组件性能

问题背景在前端开发中，React组件的性能优化是一个常见挑战。尤其是当组件逻辑复杂或数据频繁更新时，性能问题尤为突出。本文将介绍如何利用React Hooks（如useMemo和useCallback）来优化组件性能。解决方案 useMemo：用…...

编程日记 2025/6/5 16:27:48

JVM对象创建内存分配

对象创建的主要流程： 检查加载类–》分配内存–》初始化–》设置对象头–》实例化，执行init方法。在内存分配中，虚拟机将为新生对象内存分配 Minor GC : 新生代垃圾收集，特点是频繁，回收速度快； Full GC …...

编程日记 2025/9/19 18:48:27

华为云Git使用与GitCode操作指南

目录 1 概述 1.1 背景介绍 1.2 案例流程 1.3 资源总览 2 GitCode基础使用 2.1 GitCode注册 2.2 项目创建 3 云主机上Git常用基础命令使用 3.1 Git工具安装检查 3.2 git config 全局设置 3.3 git clone 创建仓库 3.4 git init 仓库初始化 3.5 git add/remove 文件添…...

编程日记 2025/7/5 9:33:22

标量/向量/矩阵/张量/范数详解及其在机器学习中的应用

标量（Scalar）、向量（Vector）、矩阵（Matrix）、张量（Tensor）与范数（Norm）详解及其在机器学习中的应用 1. 标量（Scalar） 定义&#xff1…...

编程日记 2025/9/30 0:10:42

PySide6 GUI 学习笔记——常用类及控件使用方法（常用类边距QMarginsF）

文章目录类简介方法总览关键说明示例代码类简介 QMarginsF 用于定义四个浮点型边距（左、上、右、下），描述围绕矩形的边框尺寸。所有边距接近零时 isNull() 返回 True，支持运算符重载和数学运算。方法总览方法名/运算符参数返…...

编程日记 2025/9/19 13:58:14

STM32实现九轴IMU的卡尔曼滤波

在嵌入式系统中，精确的姿态估计对于无人机、机器人和虚拟现实等应用至关重要。九轴惯性测量单元（IMU）通过三轴加速度计、陀螺仪和磁力计提供全面的运动数据。然而，这些传感器数据常伴随噪声和漂移，单独使用无法满足高精…...

编程日记 2025/9/22 6:16:49

机器学习-简要与数据集加载

一.机器学习简要 1.1 概念机器学习即计算机在数据中总结规律并预测未来结果，这一过程仿照人类的学习过程进行。深度学习是机器学习中的重要算法的其中之一，是一种偏近现代的算法。 1.2 机器学习发展历史从上世纪50年代的图灵测试提出、塞缪尔开发…...

编程日记 2025/9/19 12:29:08

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

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

编程日记 2025/10/3 15:24:05

二叉树的遍历与构造

好想回家，我想回家跟馒头酱玩，想老爸老妈。如果上天再给我一次选择的机会，我会选择当一只小动物，或者当棵大树也好，或者我希望自己不要有那么多多余的情绪，不要太被别人影响，开心点，…...

编程日记 2025/9/19 9:14:50

Python+OpenCV实现手势识别与动作捕捉：技术解析与应用探索

引言：人机交互的新维度在人工智能与计算机视觉技术飞速发展的今天，手势识别与动作捕捉技术正逐步从实验室走向大众生活。通过Python的OpenCV库及MediaPipe等工具，开发者能够以较低门槛实现精准的手部动作识别，为虚拟现实、智能家…...

编程日记 2025/6/21 22:18:32

MYSQL服务的使用流程

MYSQL是一个单进程多线程，支持多用户，基于客户机/服务器的关系数据库管理系统。与其他数据库管理系统相比，MYSQL具有体积小，易于安装，运行速度快，功能齐全，成本低廉以及开源等特点。MYSQL可运行…...

编程日记 2025/9/19 15:44:30

华为云API、SDK是什么意思？有什么区别和联系？

目录一、API：像菜单 + 打电话点餐 📌 本质解释： 🔧 操作方式（偏底层）： 🍱 类比举例：二、SDK：像外卖App（美团/饿了么）自动点餐 📌 本质解释： 🔧 操作方式（偏上层）： 🍱 类比举例：三、联系：SDK 是对 API 的“封装与简化” 四、操作实例对…...

编程日记 2025/6/13 19:53:42

【java】使用iText实现pdf文件增加水印功能

maven依赖 <dependencies><dependency><groupId>com.itextpdf</groupId><artifactId>itext7-core</artifactId><version>7.2.5</version><type>pom</type></dependency> </dependencies>实现代码前…...

编程日记 2025/9/19 12:29:02

Python爬虫实战：获取艺恩娱数最新电影舆情数据并分析，为影院排片做参考

一、引言在电影行业蓬勃发展的当下，了解影片的各项指数对于票房宣发排片起着至关重要的作用。艺恩娱数网站作为电影行业重要的数据平台，提供了丰富且有价值的电影相关数据。然而，直接从该网站获取数据面临诸多挑战。Python 作为一种功能强大、应用广泛的编程语言，拥有众多…...

编程日记 2025/7/15 6:17:46

Linux指令入门：DevOps与SRE视角

文章目录 Linux指令入门：DevOps与SRE视角一、Linux基础命令概述二、文件系统操作命令1. 文件与目录基本操作2. 文件查看与编辑3. 文件压缩与归档三、进程管理命令1. 进程查看与控制2. 服务管理（Systemd） 四、网络管理命令1. 网络连接与诊断2…...

编程日记 2025/6/25 4:34:35

socket套接字-TCP

上一篇：socket套接字-UDP（下）https://blog.csdn.net/Small_entreprene/article/details/147569071?fromshareblogdetail&sharetypeblogdetail&sharerId147569071&sharereferPC&sharesourceSmall_entreprene&sharefromfr…...

编程日记 2025/9/19 7:18:46