单击即可将要素添加到地图

Question

我想与地图进行交互，在其中添加我已经知道几何形状的多边形，它基于作为中心（单击位置）的单个坐标，因此使用 单个点击我要添加这个多边形（真的是一个圆）

我似乎无法通过单击来完成此操作。我必须双击才能完成该功能。

我还想在单击保存要素之前在我的鼠标位置上看到多边形。

        value = "Circle";
        
        geometryFunction = (coordinates, geometry) => {
            var center = coordinates[0];
            var radius = 50 * 1852;
            /** radius = meters
            ** center = lonLat
            */
            const steps = 128;
            const polygonData = [];
            for (let i = 0; i < steps; i++) {
                polygonData.push(
                    fromLonLat(getDestination(toLonLat(center), radius, (i * -360) / steps))
                );
            }
            polygonData.push(polygonData[0]);
            geometry =  new Polygon([polygonData]);
            console.log("geom");
            
            return geometry;
        };

        var draw = new Draw({
            source: layer.getSource(),
            type: value,
            geometryFunction: geometryFunction,
            style: new Style({
                stroke: new Stroke({
                    color: '#F5F5F5',
                    width: 1.5
                }),
                fill: new Fill({
                    color: 'rgba(224, 230, 233, 0.1)'
                })
            })
        });

        map.addInteraction(draw);

Answer 1

圆形绘制类型需要单击两次，一次用于中心，另一次用于设置半径。只需单击一下，即可使用点绘制类型。然后，您可以在绘制该点后生成一个圆。 Openlayers 还有一个内置方法 https://openlayers.org/en/latest/apidoc/module-ol_geom_Polygon.html#.circular 来生成圆形多边形。

    var draw = new Draw({
        source: layer.getSource(),
        type: 'Point', 
        style: new Style({
            geometry: function(feature){
                var geometry = feature.getGeometry();
                var radius = 50 * 1852;
                var polygon = circular(toLonLat(geometry.getCoordinates()), radius, 128);
                return polygon.transform('EPSG:4326', 'EPSG:3857');
            },
            stroke: new Stroke({
                color: '#F5F5F5',
                width: 1.5
            }),
            fill: new Fill({
                color: 'rgba(224, 230, 233, 0.1)'
            })
        })
    });

    draw.on('drawend', function(event){
        var center = event.feature.getGeometry().getCoordinates();
        var radius = 50 * 1852;
        var polygon = circular(toLonLat(center), radius, 128);
        event.feature.setGeometry(polygon.transform('EPSG:4326', 'EPSG:3857'));
    }

    map.addInteraction(draw);

单击即可将要素添加到地图

Add feature to map on single click

openlayers

openlayers-6