Wechat: yu389741| Email: gisdqy@163.com

Shop:https://www.giserdqy.com/shop

OpenLayers官方示例详解十七之伪造线(Synthetic Points)


 

一、示例简介

    本示例展示了如何生成10000条呈螺纹式排列的线要素

    低比例尺下效果:

    放大至高比例尺下的效果:

二、代码详解:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Synthetic Lines</title>
    <link href="ol_v5.0.0/css/ol.css" rel="stylesheet" type="text/css" />
    <script src="ol_v5.0.0/build/ol.js" type="text/javascript"></script>
</head>
<body>
    <div id="map"></div>

    <script>
        var count = 10000;          // 要创建的线要素数量
        var features = new Array(count);    // 用于保存线要素的数组

        var startPoint = [0, 0];    // 起始点坐标
        var endPoint;       // 终止点坐标

        var delta, deltaX, deltaY;      // 起始点和终止点之间的间隔
        var signX = 1;
        var signY = -1;

        // 创建一个方形螺纹
        for(var i = 0; i < count; i++){
            delta = (i + 1) * 2500;     // 这使得后面绘制的线要素总是比前面一条的线要素长2500个单位
            if(i % 2 === 0){            // 这使得线要素的方向规律性变化
                signY *= -1;
            }else{
                signX *= -1;
            }
            deltaX = delta * signX;
            deltaY = delta * signY;
            endPoint = [startPoint[0] + deltaX, startPoint[1] + deltaY];
            // 创建一个新的线要素
            features[i] = new ol.Feature({      
                'geometry': new ol.geom.LineString([startPoint, endPoint])
            });
            startPoint = endPoint;      // 将终止点坐标点作为新的起始点坐标
        }

        var vector = new ol.layer.Vector({
            source: new ol.source.Vector({
                features: features,
                wrapX: false
            }),
            style: new ol.style.Style({
                stroke: new ol.style.Stroke({
                    color: '#666',
                    width: 1
                })
            })
        });
        
        var map = new ol.Map({
            target: 'map',
            layers: [
                vector
            ],
            view: new ol.View({
                center: [0, 0],
                zoom: 0
            })
        });
    </script>
</body>
</html>

 

转载自:https://blog.csdn.net/qq_35732147/article/details/85699127