由geoserver发布的OpenLayers2中的编辑功能,并保存更新后的postgres连接数据库表

问题描述 投票:0回答:1

我在geoserver中发布了一个shapefile“ind_adm2”作为Postgis(postgres数据库),它可以使用下面给出的OpenLayers代码作为网页访问。现在我需要在网页上编辑shapefile并在Postgres数据库中保存已编辑(更新)的内容。谁能帮忙!!

我尝试使用geoserver的wfs URL但无法选择该功能。

<html>
     <head>
       <script src="http://openlayers.org/api/OpenLayers.js"></script>
     </head>
     <body>
       <div style="width:100%; height:100%" id="map"></div>
       <script defer="defer" type="text/javascript">

    var map = new OpenLayers.Map('map');
    basemap = new OpenLayers.Layer.WMS( "Layer Name1",
    "http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
         utility = new OpenLayers.Layer.WMS( "Layer Name2",
    "http://localhost:8080/geoserver/iirs/ows?", {layers: 'iirs:ind_adm2', 
    transparent:"true"}, {isBaseLayer:false} );

      map.addLayers([basemap,utility]);
      map.zoomToMaxExtent();

  </script>

  </body>
  </html>

它应该选择任何多边形然后在那里编辑并更新postgres数据库中的编辑。

postgresql openlayers postgis geoserver
1个回答
0
投票

因为您需要的内容将比现有代码复杂得多,您应该将其更新到最新版本的OpenLayers(目前为5.​​3.0)并使用它进行开发。使用完全构建的https://openlayers.org/en/latest/doc/quickstart.html更容易,这与使用版本3和4非常相似,因此您将能够重用这些版本中的示例。有关编辑WFS的帮助,请参阅链接教程和一些示例Javascript editing WFS from GeoServer using OpenLayers的一个问题

  <html>
     <head>
       <link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
       <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
       <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
       <script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
     </head>
     <body>
       <div style="width:100%; height:100%" id="map"></div>
       <script defer="defer" type="text/javascript">

    var basemap = new ol.layer.Image({
        source: new ol.source.ImageWMS({
            url: "http://vmap0.tiles.osgeo.org/wms/vmap0",
            params: {
                'LAYERS': 'basic'
            },
            projection: 'EPSG:4326',
            ratio: 1
        })
    });

    var utility = new ol.layer.Image({
        source: new ol.source.ImageWMS({
            url: "http://localhost:8080/geoserver/iirs/ows",
            params: {
                'LAYERS': 'iirs:ind_adm2',
                'TRANSPARENT': 'true'
            },
            projection: 'EPSG:4326'
        })
    });

    var map = new ol.Map({
        target: 'map',
        layers: [basemap],  utility],
        view: new ol.View({
            projection: 'EPSG:4326'
        })
    });

    map.getView().fit(map.getView().getProjection().getExtent());

  </script>

  </body>
  </html>
© www.soinside.com 2019 - 2024. All rights reserved.