单击鼠标后 OpenLayers Interaction 会立即删除吗？

Question

我已经根据 OpenLayers 5.3 创建了一张地图。根据这里的文档 https://openlayers.org/en/v5.3.0/examples/draw-features.html 我画了一个 feature/interaction，但是这个 'point' 在鼠标点击后立即被删除。你可以查看我的实时地图@ https://ramzingate.com/map.html并查看源码尝试点击地图创建一个 point/feature。但它被删除了!!!!! 我需要保留这一点，并获取 LonLat 坐标..

///// Creating a centering point on the map view and drawing a circle around it
var centerLongitudeLatitude = ol.proj.fromLonLat([51.338076, 35.699756]);
const source = new ol.source.Vector({
                                    wrapX: false,
//                                  projection: 'EPSG:4326',
//                                  features: [new ol.Feature(new ol.geom.Circle(centerLongitudeLatitude, 550))]
                                    });

    var layer = new ol.layer.Vector({
      source: source,
      style: [
        new ol.style.Style({
          stroke: new ol.style.Stroke({
            color: '#f75f62',
            width: 2
          }),
          fill: new ol.style.Fill({
            color: 'rgba(247,95,98, 0.35)'
          })
        })
      ]
    });
    
    raster = new ol.layer.Tile({
      source: new ol.source.OSM(),
    });

    var myMap = new ol.Map({
        layers: [layer],
        target: 'map',
        key: 'web.uNSRgsxSeuCdyNCZSMvciGHZBCDatUaXbGgaHN05',
        maptype: 'dreamy-gold',
        poi: true,
        traffic: false,
        view: new ol.View({
            center: ol.proj.fromLonLat([51.338076, 35.699756]),
            zoom: 15
        })
    });


    //// Here is where I am trying to enable draw a feature with interaction
    let draw; //// global so we can remove it later
    
    function addInteraction() {

    // myMap.removeInteraction(draw);

      draw = new ol.interaction.Draw({
         source: source,
         type: 'Point', // Point,Polygon,Circle
      });
        
    // draw.removeLastPoint();
      myMap.addInteraction(draw);
    }

    
    //////////////// Call the Draw Interaction
    addInteraction();

需要帮助

Answer 1

您看不到绘制的点，因为您的样式不包括 image 或 text，它们是唯一支持点几何的样式类型。将图像添加到样式将修复它，例如

    new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: '#f75f62',
        width: 2
      }),
      fill: new ol.style.Fill({
        color: 'rgba(247,95,98, 0.35)'
      }),
      image: new ol.style.Circle({
        radius: 6,
        fill: new ol.style.Fill({
          color: '#f75f62',
        })
      })
    })

单击鼠标后 OpenLayers Interaction 会立即删除吗？

OpenLayers Interaction is immediately removed after mouse click?

openlayers

openlayers-5