基于Openlayers对GeoServer发布的数据进行增删改

大洪

已于 2025-02-21 08:46:17 修改

阅读量735

点赞数 26

CC 4.0 BY-SA版权

分类专栏： OpenLayers geoserver 文章标签： javascript

于 2025-02-20 17:41:36 首次发布

本文链接：https://blog.youkuaiyun.com/dahongdahong/article/details/145757834

使用GeoServer进行图斑数据管理

本文将介绍如何使用GeoServer进行图斑数据的新增、删除和修改。我们将通过一个Vue.js应用来演示这些功能。

设置Vue.js应用

首先，我们设置Vue.js应用，并添加必要的组件和交互逻辑。

Check.vue

Check.vue文件包含初始化地图和处理图斑交互的主要逻辑。

// filepath: /D:/workspace/check/client/src/views/Check.vue
<template>
  <div class="page">
    <Header />
    <Map @map="init" />
    <div class="tool">
      <button @click="enableDraw">新增</button>
      <button @click="enableModify">编辑</button>
      <button @click="enableDelete">删除</button>
    </div>
  </div>
</template>

<script setup>
import Header from '../components/Header.vue'
import Map from '../components/Map.vue'
import {
   
    getBlockData, addBlockData, updateBlockData, deleteBlockData } from '../api'
// ...existing code...

function init(mapInstance) {
   
   
  map = mapInstance
  // ...existing code...
  select.on('select', (e) => {
   
   
    e.selected.forEach((feature) => {
   
   
      const featureId = feature.getId()
      deleteBlockData(featureId)
        .then(response => {
   
   
          vectorLayer.getSource().removeFeature(feature)
        })
        .catch(error => {
   
   
          console.error('Error deleting block data:', error)
        })
    })
  })
  getBlock()
  // ...existing code...
}

function getBlock() {
   
   
  const view = map.getView()
  const extent = view.calculateExtent()
  getBlockData(extent)
    .then(response => {
   
   
      const features = new GeoJSON().readFeatures(response.data, {
   
   
        featureProjection: map.getView().getProjection()
      })
      vectorLayer.getSource().clear()
      vectorLayer.getSource().addFeatures(features)
    })
    .catch(error => {
   
   
      console.error('Error fetching block data:', error