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

亦凉 2023-02-16 12:00 45阅读 0赞

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

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

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

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

--------------------

具体操作方法是这样的

--------------------

##### 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',
                width: 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 顶点坐标获取到了接下来就是业务逻辑了…

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200609222652717.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200609222519869.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200609165931194.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0ODE3NDQw,size_16,color_FFFFFF,t_70