• openlayers获取绘制多边形的顶点坐标


    虽使用Interaction无数次,进行图形绘制与用户交互等,但当需要获取绘制图形的顶点坐标时还是不晓得咋弄?

    都知道在绘制完成后回调中能获取到当前的event对象draw.on('drawend', function(e) {}) 而这个对象中就能拿到feature,根据这个就可以找到如下feature api , 踏又可以通过getGeometry得到对应的polygon

    在这里插入图片描述
    根据上面获得了polygon, so再找到polygon api ,他就有一个getCoordinates的方法
    在这里插入图片描述

    根据上面顺藤摸瓜就可以得出如下操作—>
    在这里插入图片描述


    具体操作方法是这样的


    1、画笔初始化方法
        /**
         * 画笔初始化
         */
        drawPrepare() {
          const source = new VectorSource()
          const vector = new VectorLayer({
            source: source,
            style: new Style({
              fill: new Fill({
                color: 'rgba(255,218,185, 0.4)'
              }),
              stroke: new Stroke({
                color: '#ffcc33',
                 2
              }),
              image: new Circle({
                radius: 7,
                fill: new Fill({
                  color: '#ffcc33'
                })
              })
            })
          })
          this.map.addLayer(vector)
    
          var modify = new Modify({
            source: source
          })
          this.map.addInteraction(modify)
          this.sourceOfPolygon = source
        },    
    2、执行绘制方法
    /**
         * 执行绘制
         */
        drawPattern() {
          const _self = this
          const source = this.sourceOfPolygon
          const draw = new Draw({
            source: source,
            type: 'Polygon'
          })
    
          // 添加 interaction
          this.map.addInteraction(draw)
          const snap = new Snap({
            source: source
          })
    
          // 添加 snap
          this.map.addInteraction(snap)
    
          draw.on('drawend', function(e) {
            const geometry = e.feature.getGeometry()
            const corrdinates = geometry.getCoordinates()
            console.log(corrdinates)
            // 清除画笔
            _self.map.removeInteraction(draw)
            _self.map.removeInteraction(snap)
          })
        }
      }

    ok 顶点坐标获取到了接下来就是业务逻辑了…

  • 相关阅读:
    中国气象局所有城市代码
    Android项目源码混淆问题解决方法
    跳转到系统默认的Home
    jsp四个属性范围的比较
    response内置对象学习
    jsp登陆程序实现
    request内置对象学习
    JavaBean的学习
    android编程中的琐碎知识点汇总(5)
    android编程中的琐碎知识点汇总(4)
  • 原文地址:https://www.cnblogs.com/dengxiaoning/p/13336781.html
Copyright © 2020-2023  润新知