Question

我已经在Geoserver中发布了一个形状文件“ 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数据库中的编辑内容。

Answer 1

由于所需内容将比现有代码复杂得多，因此应将其更新为最新版本的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>

由Geoserver发布的OpenLayers2中的编辑功能，并将更新的功能保存在postgres连接的数据库表中

1 个答案: