利用JavaScript+Openlayers实现抹角法(线性迭代光滑法)折线光滑处理

最新推荐文章于 2024-01-31 23:12:23 发布

wfq0007

最新推荐文章于 2024-01-31 23:12:23 发布

阅读量273

点赞数

分类专栏： GIS 文章标签： javascript 算法

本文链接：https://blog.csdn.net/weixin_48792878/article/details/131307507

版权

GIS 专栏收录该内容

5 篇文章 2 订阅

订阅专栏

该文章介绍了一种通过JavaScript和OpenLayers库对折线进行光滑处理的方法。通过将折线进行N等分，连接相邻等分点，经过多次迭代来平滑线条，但这种方法可能导致光滑曲线不经过原始折点，存在较大误差。文中提供了HTML和JS代码示例，包括绘制折线和执行光滑处理的函数。

摘要由CSDN通过智能技术生成

原理:

对每条折线进行N等分,将相邻两条折线邻近的两个等分点连接,然后迭代多次,可实现折线的光滑处理,该方法计算较简单,但是光滑后的曲线不经过折点,误差较大.

使用JavaScript和Openlayers进行编程:

HTML部分:

<head>
    <meta charset="UTF-8">
    <title>折线光滑处理</title>
    <script src="ol.js" type="text/javascript"></script>
</head>
<body>
    <div>
		<label>线性迭代光滑法（抹角法）</label>
        <label>迭代次数：</label>
        <input type="text" id="times">
        <label>平滑等分数：</label>
        <input type="text" id="divides" value="4">
        <button id="submit">平滑</button>
    </div>
    <div id="map" style="width: 95%;height: 90%;position: absolute;border: solid;">
    </div>

</body>

JS部分:

①绘制两条折线:

var map = new ol.Map({
        target:'map',
        view:new ol.View({
            center:[110,29],
            projection:'EPSG:4326',
            zoom:8
        })
    });
    var lineFeature = new ol.Feature(
        new ol.geom.LineString([[108,28],[110,30],[112,28]])
    );
    var lineFeature2 = new ol.Feature(
        new ol.geom.LineString([[108,28],[110,30],[112,28]])
    );
    var source = new ol.source.Vector({
        features:[lineFeature,lineFeature2]
    });
    var vector = new ol.layer.Vector({
        source: source,
        style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: 'black',
                    width: 2
                }),
            })
        });   
    map.addLayer(vector);

②光滑处理函数:

 function smooth(coord,divides){
        var array = [];
        for(var j=0;j<coord.length;j++){
            if(j==coord.length-1){
                array.push(coord[j]);
            }else if(j==0){
                array.push(coord[j]);
                for(var i=0;i<divides-1;i++){
                    if(i==divides-2){
                        x = (i+1)*(coord[j+1][0]-coord[j][0])/divides + coord[j][0];
                        y = (i+1)*(coord[j+1][1]-coord[j][1])/divides + coord[j][1];
                        array.push([x,y]);
                    }
                }
            }else if(j==coord.length-2)
            {
                for(var i=0;i<divides-1;i++){
                    if(i==0){
                        x = (i+1)*(coord[j+1][0]-coord[j][0])/divides + coord[j][0];
                        y = (i+1)*(coord[j+1][1]-coord[j][1])/divides + coord[j][1];
                        array.push([x,y]);
                    }

                }
            }else{
                for(var i=0;i<divides-1;i++){
                    if(i==0 || i==divides-2){
                        x = (i+1)*(coord[j+1][0]-coord[j][0])/divides + coord[j][0];
                        y = (i+1)*(coord[j+1][1]-coord[j][1])/divides + coord[j][1];
                        array.push([x,y]);
                    }
                }
            }
        }
        return array;
    }

③修改迭代次数number以及每条折线的等分数divides:

    document.getElementById('submit').onclick = function(){
        // 还原
        var coord = lineFeature2.getGeometry().getCoordinates();
        lineFeature.getGeometry().setCoordinates(coord);

        var number = document.getElementById('times').value;
        var divides = document.getElementById('divides').value;
        // 多次迭代
        number = parseInt(number);
        for(var k=0;k<number;k++){
            var coord = lineFeature.getGeometry().getCoordinates();
            //console.log(smooth(coord,divides));
            lineFeature.getGeometry().setCoordinates(smooth(coord,divides));
            lineFeature.setStyle(
                new ol.style.Style({
                    stroke: new ol.style.Stroke({
                            color: 'red',
                            width: 5
                        }),
                })
            )
        }
    }

光滑效果: