openlayers draws points and only displays the last drawn point

directly on the code

//绘制点,地图初始化就可以绘制操作
  var draw: any;
  const drawpoint = (source: any) => {
    
    
    if (isview == false) {
    
    
      //画点
      const addInteraction = () => {
    
    
        draw = new Draw({
    
    
          source: source,
          type: 'Point',
          style: iconStyle
        });
        hxMap.mapInstance.addInteraction(draw);
      };
      addInteraction();
      if (draw) {
    
    
        hxMap.mapInstance.on('click', function (evt: any) {
    
    
          var pixel = hxMap.mapInstance.getEventPixel(evt.originalEvent); //获取点击的像素点
          var coordinate3857 = hxMap.mapInstance.getCoordinateFromPixel(pixel); //获取像素点的坐标
          const coor4326 = transform(coordinate3857, 'EPSG:3857', 'EPSG:4326');
          formRef.setFieldsValue({
    
     longitude: String(coor4326[0].toFixed(8)) });
          formRef.setFieldsValue({
    
     latitude: String(coor4326[1].toFixed(8)) });
        });
      }
      //只显示最后一个绘制的点
      draw.on('drawend', () => {
    
    
        let drawendSource: any[];
        nextTick(() => {
    
    
          drawendSource = source.getFeatures();
          if (drawendSource.length > 1) {
    
    
            //每点击一次就删除上一个绘制的点
            source.removeFeature(drawendSource[0]);
            source.getFeatures()[0].setId('drawfeature');
          }
        });
      });
      //绘制的点是否在田块内
      isinField();
    }
  };
    //使用条件
    //点样式
    let Iconsrc = require('@/assets/farm/point.gif');
    var iconStyle = new Style({
    
    
      image: new Icon({
    
    
        src: Iconsrc,
        scale: 0.05,
        anchor: [0.5, 0.8]
        //anchorXUnits: 'fraction',
        //anchorYUnits: 'fraction',
      })
    });
    var source = new VectorSource({
    
     wrapX: false, features: [] });
    var vectorlayer = new VectorLayer({
    
    
      source: source,
      style: iconStyle
    });
    hxMap.mapInstance.addLayer(vectorlayer);
    //调用
    drawpoint(source);

Guess you like

Origin blog.csdn.net/qq_37967853/article/details/129581045