zoukankan      html  css  js  c++  java
  • 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 顶点坐标获取到了接下来就是业务逻辑了…

  • 相关阅读:
    Cookie和Session的区别
    get和post的区别
    TCP和UDP的区别
    TCP三次握手过程
    docker 安装prometheus
    大数据集群环境搭建之一 hadoop-ha高可用安装
    大数据集群环境 zookeeper集群环境安装
    Centos 脚本中几个特殊符号的作用笔记
    VMware 设置虚拟机Centos 上网的两种方式
    大数据集群环境搭建之一 Centos基本环境准备
  • 原文地址:https://www.cnblogs.com/dengxiaoning/p/13336781.html
Copyright © 2011-2022 走看看