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

15 篇文章 1 订阅
8 篇文章 0 订阅

直接上代码

//绘制点,地图初始化就可以绘制操作
  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);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
OpenLayers是一个开源的JavaScript库,用于在Web上渲染交互式地图。它提供了丰富的功能和API,允许用户在地图上添加各种不同的元素,包括、线和面。 以下是OpenLayers绘制、线和面的基本步骤: 1. 创建地图对象 使用OpenLayers创建一个地图对象,设置地图中心和缩放级别。 2. 创建矢量图层 使用OpenLayers创建一个矢量图层,并将其添加到地图中。 3. 创建要素 使用OpenLayers创建一个要素对象,可以是、线或面。 4. 绘制要素 使用OpenLayers提供的绘制工具,将要素添加到矢量图层中。可以通过鼠标交互或代码方式来进行绘制。 5. 渲染地图 将地图渲染到页面上,可以使用OpenLayers提供的默认样式,也可以自定义样式。 下面是一个简单的示例代码,演示如何使用OpenLayers绘制、线和面: ``` // 创建地图对象 var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([116.38, 39.9]), zoom: 10 }) }); // 创建矢量图层 var vectorLayer = new ol.layer.Vector({ source: new ol.source.Vector(), style: new ol.style.Style({ fill: new ol.style.Fill({ color: 'rgba(255, 255, 255, 0.2)' }), stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 }), image: new ol.style.Circle({ radius: 7, fill: new ol.style.Fill({ color: '#ffcc33' }) }) }) }); map.addLayer(vectorLayer); // 创建要素 var point = new ol.geom.Point(ol.proj.fromLonLat([116.38, 39.9])); var line = new ol.geom.LineString([ol.proj.fromLonLat([116.38, 39.9]), ol.proj.fromLonLat([116.4, 39.9])]); var polygon = new ol.geom.Polygon([[ ol.proj.fromLonLat([116.38, 39.9]), ol.proj.fromLonLat([116.4, 39.9]), ol.proj.fromLonLat([116.4, 39.92]), ol.proj.fromLonLat([116.38, 39.92]), ol.proj.fromLonLat([116.38, 39.9]) ]]); // 绘制要素 var pointFeature = new ol.Feature(point); var lineFeature = new ol.Feature(line); var polygonFeature = new ol.Feature(polygon); vectorLayer.getSource().addFeatures([pointFeature, lineFeature, polygonFeature]); // 渲染地图 map.render(); ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

定位算法工程师

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

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

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

打赏作者

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

抵扣说明:

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

余额充值