openlayer5 ol5 生成圆方圆1公里点击生成圆以米为单位 ol.geom.Polygon

参考文章：https://stackoverflow.com/questions/53117619/openlayers-5-v5-2-0-draw-circle-as-polygon

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.0/build/ol.js"></script>
    <link rel="stylesheet"
        href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v5.3.0/css/ol.css" />

    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        #app {
            width: 100%;
            height: 100%;
        }
    </style>

</head>

<body>
    <div id="map">

    </div>
</body>

<script>

    const map = new ol.Map({
        // target
        target: document.getElementById('map'),
        // layer
        layers: [
            new ol.layer.Tile({
                source: new ol.source.OSM(),
            }),
        ],
        // view
        view: new ol.View({
            center: ol.proj.fromLonLat([113.75867124948216, 23.026719034540488]),
            zoom: 12,
        }),
    })

    // https://stackoverflow.com/questions/44167678/openlayers-ol-geom-circle
    function createCirclePointCoords(position = [113.75867124948216, 23.026719034540488], circleRadius = 1000, pointsToFind = 60) {
        const center = ol.proj.fromLonLat(position)
        let angleToAdd = 360 / pointsToFind
        let coords = []
        let angle = 0

        // 经典圆形坐标生成算法
        for (let i = 0; i < pointsToFind; i++) {
            angle = angle + angleToAdd
            let coordX = center[0] + circleRadius * Math.cos(angle * Math.PI / 180)
            let coordY = center[1] + circleRadius * Math.sin(angle * Math.PI / 180)
            coords.push([coordX, coordY])
        }

        return coords
    }

    function getCircularFeature(position, radius = 1000) {
        const coords = createCirclePointCoords(position, radius)
        // 创建多边形
        const Polygon = new ol.geom.Polygon([coords])
        // 返回要素
        return new ol.Feature(Polygon)
    }

    map.on('click', e => {
        // 当前点击的经纬度
        const lnglat = ol.proj.toLonLat(e.coordinate)

        // 生成「圆」要素
        const feature = getCircularFeature(lnglat, 1000)

        // 生成图层
        const layer = new ol.layer.Vector({
            source: new ol.source.Vector({ features: [feature] }),
            fill: new ol.style.Fill({ color: 'rgba(255, 0, 0, 0.5)' }),
            stroke: new ol.style.Stroke({ color: '#ffcc33',  2 }),
        })

        // 聚焦 
        // map.getView().fit(feature.values_.geometry.extent_)

        map.addLayer(layer)
    })

</script>

</html>

openlayer5 ol5 生成圆 方圆1公里 点击生成圆 以米为单位 ol.geom.Polygon

openlayer5 ol5 生成圆方圆1公里点击生成圆以米为单位 ol.geom.Polygon