OpenLayers 精确经过三个点的曲线绘制-CSDN博客

本文链接：https://blog.csdn.net/qq_45089709/article/details/147861326

OpenLayers 精确经过三个点的曲线绘制

根据您的需求，我将提供一个使用 OpenLayers 绘制精确经过三个指定点的曲线解决方案。对于三个点的情况，我们可以使用 二次贝塞尔曲线 或 三次样条插值，确保曲线精确通过所有控制点。

实现方案

下面是一个完整的实现，使用二次贝塞尔曲线算法生成平滑曲线，确保曲线精确通过所有三个控制点：

<!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: 500px;
        }
    </style>
</head>
<body>
    <div id="map" class="map"></div>

    <script>
        // 1. 指定要经过的三个顶点（经纬度坐标）
        const controlPoints = [
            [116.3, 39.9],    // 北京
            [118.8, 37.5],    // 青岛
            [121.4, 31.2]     // 上海
        ];

        // 2. 坐标转换工具
        const transformToMercator = (points) => 
            points.map(point => ol.proj.transform(point, 'EPSG:4326', 'EPSG:3857'));

        // 3. 二次贝塞尔曲线算法（关键函数）
        function quadraticBezierCurve(start, control, end, segments = 50) {
            const result = [];
            for (let t = 0; t <= 1; t += 1 / segments) {
                // 二次贝塞尔公式: B(t) = (1-t)²P0 + 2(1-t)tP1 + t²P2
                const x = Math.pow(1 - t, 2) * start[0] + 
                          2 * (1 - t) * t * control[0] + 
                          Math.pow(t, 2) * end[0];
                const y = Math.pow(1 - t, 2) * start[1] + 
                          2 * (1 - t) * t * control[1] + 
                          Math.pow(t, 2) * end[1];
                result.push([x, y]);
            }
            return result;
        }

        // 4. 计算控制点位置（确保曲线经过三个点）
        function calculateControlPoint(p0, p1, p2) {
            // 控制点位置计算方法：
            // 假设中间点p1是曲线上的点，则控制点C的位置可以通过以下公式计算：
            // p1 = 0.5² * p0 + 2 * 0.5 * 0.5 * C + 0.5² * p2
            // 解得：C = 2 * p1 - 0.5 * (p0 + p2)
            return [
                2 * p1[0] - 0.5 * (p0[0] + p2[0]),
                2 * p1[1] - 0.5 * (p0[1] + p2[1])
            ];
        }

        // 5. 创建地图与渲染
        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
            })
        });

        // 6. 转换坐标并计算贝塞尔曲线
        const mercatorPoints = transformToMercator(controlPoints);
        const start = mercatorPoints[0];
        const middle = mercatorPoints[1];
        const end = mercatorPoints[2];
        
        // 计算控制点
        const controlPoint = calculateControlPoint(start, middle, end);
        
        // 生成贝塞尔曲线
        const curvePoints = quadraticBezierCurve(start, controlPoint, end, 100);

        // 7. 创建曲线要素与样式
        const curveFeature = new ol.Feature({
            geometry: new ol.geom.LineString(curvePoints)
        });
        curveFeature.setStyle(new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'rgba(255, 0, 0, 0.8)',
                width: 4,
                lineCap: 'round',
                lineJoin: 'round'
            })
        }));

        // 8. 添加控制点标记
        const vectorSource = new ol.source.Vector();
        vectorSource.addFeature(curveFeature);
        
        controlPoints.forEach((point, index) => {
            const mercatorPoint = transformToMercator([point])[0];
            
            vectorSource.addFeature(new ol.Feature({
                geometry: new ol.geom.Point(mercatorPoint),
                style: new ol.style.Style({
                    image: new ol.style.Circle({
                        radius: 8,
                        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' }),
                        offsetY: -15
                    })
                })
            }));
        });

        // 9. 添加控制点标记（显示计算出的控制点）
        vectorSource.addFeature(new ol.Feature({
            geometry: new ol.geom.Point(controlPoint),
            style: new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 6,
                    fill: new ol.style.Fill({ color: 'rgba(0, 128, 0, 0.6)' }),
                    stroke: new ol.style.Stroke({ color: 'white', width: 1 })
                }),
                text: new ol.style.Text({
                    text: '控制点',
                    font: '12px Arial',
                    fill: new ol.style.Fill({ color: 'black' }),
                    offsetY: 15
                })
            })
        }));

        map.addLayer(new ol.layer.Vector({ source: vectorSource }));
    </script>
</body>
</html>

核心技术解析

二次贝塞尔曲线算法：
- 对于三个点的情况，二次贝塞尔曲线是最适合的选择
- 曲线公式：B(t) = (1-t)²P0 + 2(1-t)tP1 + t²P2，其中P0和P2是起点和终点，P1是控制点
控制点计算：
- 为了确保曲线经过中间点，我们通过数学方法计算出合适的控制点位置
- 控制点公式：C = 2 * P1 - 0.5 * (P0 + P2)，其中P1是需要经过的中间点
曲线精度控制：
- segments 参数控制曲线的分段数
- 值越大，曲线越平滑，但计算量也会增加

使用与调整

修改控制点：
- 编辑 controlPoints 数组，修改三个经纬度坐标点
- 必须提供三个点才能生成曲线
调整曲线平滑度：
- 修改 quadraticBezierCurve 函数中的 segments 参数
- 默认值为100，可根据需要增加或减少
样式定制：
- 修改曲线的颜色、宽度和线型
- 调整控制点标记的大小和颜色