openlayers绘制点且只显示最后一次绘制的点

直接上代码

//绘制点,地图初始化就可以绘制操作
  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);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

定位算法工程师

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值