openlayers添加、删除矢量图,多边形

最近在学习openlayer,也遇到很多问题,解决很多问题,欢迎交流

<script type=”text/javascript”>
        // Layers
        var layers = [
            new ol.layer.Tile({
                name: “Natural Earth”, 
                minResolution: 306,
                source: new ol.source.XYZ(
                {    url: ‘https://{a-d}.tiles.mapbox.com/v3/mapbox.natural-earth-hypso-bathy/{z}/{x}/{y}.png’,
                    attributions: [ ‘&copy; <a href=”https://www.mapbox.com/map-feedback/”>Mapbox</a> ‘ ] 
                })
            })
        ]
        // The map
        var map = new ol.Map
            ({    target: ‘map’,
                view: new ol.View
                ({    zoom: 5,
                    center: [261720, 5951081]
                }),
                controls: ol.control.defaults({ “attribution”: false }),
                layers: layers
            });

        // New vector layer
        var vector = new ol.layer.Vector(
        {    name: ‘Vecteur’,
            source: new ol.source.Vector()
        })
        map.addLayer(vector);
        
        var interaction = new ol.interaction.DrawRegular (
            {    source: vector.getSource(), 
                sides:$(“#sides”).val() ,
                canRotate: $(“#rotation”).prop(‘checked’)
            });
        map.addInteraction(interaction);
 

    
        interaction.on(‘drawend’, function (e) { $(‘#info’).text(“”);
        console.log(e)
         console.log(e.feature.getGeometry().getCoordinates())
        });
         
         var clickSelect = new ol.interaction.Select({
            
        });
        map.addInteraction(clickSelect);

        var aa;
        clickSelect.on(‘select’, function(event){
               aa=event;
            
        }); 
        function test(){

            aa.selected[0].setStyle(new ol.style.Style({
                image: new ol.style.Circle({
                    radius: 0,
                    fill: new ol.style.Fill({
                        color: ‘blue’
                    })
                })
            }));
        }
    </script>

其实这个删除,是假删除,就是把选中的图形变为半径为0的园,就不见了。

转载自:https://blog.csdn.net/qq_36986305/article/details/81177835

You may also like...