vue3 + openlayers---实现矢量要素编辑

最新推荐文章于 2024-07-29 17:39:23 发布

小汪同学→_→

最新推荐文章于 2024-07-29 17:39:23 发布

阅读量265

点赞数 4

分类专栏： webGis-openlayers 文章标签： vue.js webgl

本文链接：https://blog.csdn.net/QDxin_xyz/article/details/139361872

版权

webGis-openlayers 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

在这里插入图片描述

// 创建 VectorLayer
const layer = new VectorLayer({
  source: new VectorSource({
    features: [
      new Feature({
        geometry: new Point([119.4, 29.6]).transform('EPSG:4326', 'EPSG:3857')
      }),
      new Feature({
        geometry: new LineString([
          [116.0, 29.4],
          [119.2, 29.3],
          [118.4, 29.5]
        ]).transform('EPSG:4326', 'EPSG:3857')
      }),
      new Feature({
        geometry: new Polygon([
          [
            [119.4, 29.0],
            [119.6, 29.0],
            [119.5, 29.2],
            [119.4, 29.0]
          ]
        ]).transform('EPSG:4326', 'EPSG:3857')
      })
    ]
  }),
  style: new Style({
    image: new StyleCircle({
      radius: 30,
      fill: new Fill({
        color: 'red'
      })
    }),
    stroke: new Stroke({
      color: 'blue',
      width: 2
    }),
    fill: new Fill({
      color: 'yellow'
    })
  })
})
window.olMap.addLayer(layer)
// 创建选择工具
const select = new Select({
  condition: singleClick,
  style: new Style({
    image: new StyleCircle({
      radius: 30,
      fill: new Fill({
        color: 'red'
      })
    }),
    stroke: new Stroke({
      color: 'blue',
      width: 2
    }),
    fill: new Fill({
      color: 'yellow'
    })
  }),
  layers: [layer]
})
const modify = new Modify({
  features: select.getFeatures()
})
// 监听modifyend事件，获取要素修改后的坐标
modify.on('modifyend', (e) => {
  const features = e.features
  if (features.getLength() > 0) {
    const feature = features.item(0)
    const geometry = feature.getGeometry()
    const coordinates = geometry.getCoordinates()
    // 点
    if (geometry instanceof Point) {
      console.log('更新后的点坐标：[' + coordinates + ']')
    }
    // 线
    if (geometry instanceof LineString) {
      let msg = []
      for (let i = 0; i < coordinates.length; i++) {
        msg.push('[' + coordinates[i] + ']')
      }
      console.log('更新后的线坐标：' + msg.join('、'))
      msg = []
    }
    // 面
    if (geometry instanceof Polygon) {
      let msg = []
      for (let i = 0; i < coordinates.length; i++) {
        const coordinate = coordinates[i]
        for (let j = 0; j < coordinate.length; j++) {
          msg.push('[' + coordinate[j] + ']')
        }
      }
      console.log('更新后的面坐标：' + msg.join('、'))
      msg = []
    }
  }
})
// 添加交互工具
window.olMap.addInteraction(select)
window.olMap.addInteraction(modify)