openlayers绘制一个线段

最新推荐文章于 2024-08-09 17:29:51 发布

无足鸟丶

最新推荐文章于 2024-08-09 17:29:51 发布

阅读量272

点赞数 3

文章标签： javascript

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

版权

显示效果

<!doctype html>
<html lang="zh">

<head>
    <link href="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol-debug.css" rel="stylesheet">

    <script src="https://cdn.bootcdn.net/ajax/libs/openlayers/4.6.5/ol-debug.js"></script>
    <title>Day-01</title>
</head>

<body>
    <div id="map" class="map" style="width: 100%;height: 800px;"></div>
    <script type="text/javascript">
        const view = new ol.View({
            center: ol.proj.fromLonLat([116.39570134439728, 39.9162774443995]),
            zoom: 16
        });
        const layers = [
            new ol.layer.Tile({
                source: new ol.source.OSM()
            })
        ];
        const map = new ol.Map({
            target: 'map',
            layers,
            view
        });
        // 创建一个Vector Layer
        var vectorLayer = new ol.layer.Vector({
            source: new ol.source.Vector()
        });

        // 添加Vector Layer到地图中
        map.addLayer(vectorLayer);

        // 定义线的控制点
        var controlPoints = [
            [-110, 40],  // 起点
            [-75, 75],   // 控制点1
            [-25, 75],   // 控制点2
            [10, 40]     // 终点
        ];

        // 创建一个线的Geometry
        var bezierCurve = new ol.geom.LineString(controlPoints);

        // 将线的Geometry转换为Feature
        var bezierFeature = new ol.Feature({
            geometry: bezierCurve
        });

        // 将Feature添加到Vector Layer中
        vectorLayer.getSource().addFeature(bezierFeature);

        // 设置线的样式
        bezierFeature.setStyle(new ol.style.Style({
            stroke: new ol.style.Stroke({
                color: 'blue',
                width: 4
            })
        }));

        // 将地图视图定位到线的范围
        var extent = bezierCurve.getExtent();
        map.getView().fit(extent, { padding: [50, 50, 50, 50] });

    </script>
</body>

</html>