[转]openlayer+geoserver实现WFS操作

最新推荐文章于 2024-04-17 04:35:17 发布

weixin_30745553

最新推荐文章于 2024-04-17 04:35:17 发布

阅读量170

点赞数

原文链接：http://www.cnblogs.com/boonya/p/3896220.html

版权

From：http://liushaobo2005.blog.163.com/blog/static/253056702011541462372/

wfs是OGC的标准规范，主要用于提供对矢量地理数据的服务，我们以一个对摄像头图层进行操作为例了解如何通过openlayer+geoserver实现WFS操作。

首先利用postgis建表camera，参照http://postgis.refractions.net/docs/ch04.html

接着在geoserver中创建相关图层camera，数据来源为刚建立的postgis表

修改geoserver的WFS service配置，将Service Level改为Transactional，实现事物级的操作。

此时我们已经完成了服务器端的配置，接着通过openlayer来实现对WFS服务的调用。

wfs-protocol-transactions.js

//定义DeleteFeature类

var DeleteFeature = OpenLayers.Class(OpenLayers.Control, {
    initialize: function(layer, options) {
        OpenLayers.Control.prototype.initialize.apply(this, [options]);
        this.layer = layer;
        this.handler = new OpenLayers.Handler.Feature(
            this, layer, {click: this.clickFeature}
        );
    },
    clickFeature: function(feature) {
        // if feature doesn't have a fid, destroy it
        if(feature.fid == undefined) {
            this.layer.destroyFeatures([feature]);
        } else {
            feature.state = OpenLayers.State.DELETE;
            this.layer.events.triggerEvent("afterfeaturemodified", 
                                           {feature: feature});
            feature.renderIntent = "select";
            this.layer.drawFeature(feature);
        }
    },
    setMap: function(map) {
        this.handler.setMap(map);
        OpenLayers.Control.prototype.setMap.apply(this, arguments);
    },
    CLASS_NAME: "OpenLayers.Control.DeleteFeature"
});

function init() { 

var mapOptions = { 
   resolutions: [],
   projection: new OpenLayers.Projection('EPSG:900913'),
   maxExtent: new OpenLayers.Bounds(1.2636720449E7,2510310.336,1.2787005936E7,2660595.8230000017),
   units: "meters",
   controls: []
   };

    map = new OpenLayers.Map('map', mapOptions );


 var wms = new OpenLayers.Layer.WMS(
  "szroad","http://yourgeoserver:8088/geoserver/gwc/service/wms",
  {layers: 'szroad', format: 'image/png' },
  { tileSize: new OpenLayers.Size(256,256) }
  );

    var saveStrategy = new OpenLayers.Strategy.Save();


    wfs = new OpenLayers.Layer.Vector("Editable Features", {
        strategies: [new OpenLayers.Strategy.BBOX(), saveStrategy],
        projection: new OpenLayers.Projection("EPSG:900913"),
        protocol: new OpenLayers.Protocol.WFS({
            version: "1.1.0",
            srsName: "EPSG:900913",
            url: "http://yourgeoserver:8088/geoserver/wfs",
            featureType: "camera",
            featureNS: "http://yourgeoserver:8088/szglj",
      featurePrefix:"szglj",
            geometryName: "the_geom"
        })
    }); 
   
    map.addLayers([wms, wfs]);

    var panel = new OpenLayers.Control.Panel(
        {'displayClass': 'customEditingToolbar'}
    );
    
    var navigate = new OpenLayers.Control.Navigation({
        title: "Pan Map"
    });
    
    var drawCamera = new OpenLayers.Control.DrawFeature(
        wfs, OpenLayers.Handler.Point,
        {
            title: "Draw Feature",
            displayClass: "olControlDrawFeaturePoint"
        }
    );

 drawCamera.featureAdded = function(feature) {
      feature.attributes ={"code":"100000001","name":"一号摄像头"}; 
 }

    
    var editCamera = new OpenLayers.Control.ModifyFeature(wfs, {
        title: "Modify Feature",
        displayClass: "olControlModifyFeature"
    });

    var delCamera = new DeleteFeature(wfs, {title: "Delete Feature"});
   
    var saveCamera = new OpenLayers.Control.Button({
        title: "Save Changes",
        trigger: function() {
            if(editCamera.feature) {
                editCamera.selectControl.unselectAll();
            }
            saveStrategy.save();
        },
        displayClass: "olControlSaveFeatures"
    });

    panel.addControls([navigate, saveCamera, delCamera, editCamera, drawCamera]);
    panel.defaultControl = navigate;
    map.addControl(panel);
    map.zoomTo(3);
}

wfs-protocol-transactions.html

<html>
  <head>
    <link rel="stylesheet" href="http://liushaobo2005.blog.163.com/blog/../theme/default/style.css" type="text/css" />
    <link rel="stylesheet" href="http://liushaobo2005.blog.163.com/blog/style.css" type="text/css" />
       <script. src="http://liushaobo2005.blog.163.com/blog/../lib/OpenLayers.js"></script>
    <style>
        .customEditingToolbar {
            float: right;
            right: 0px;
            height: 30px; 
            width: 200px;
        }
        .customEditingToolbar div {
            float: right;
            margin: 5px;
            width: 24px;
            height: 24px;
        }

        .olControlNavigationItemActive { 
            background-image: url("../theme/default/img/editing_tool_bar.png");
            background-repeat: no-repeat;
            background-position: -103px -23px; 
        }
        .olControlNavigationItemInactive { 
            background-image: url("../theme/default/img/editing_tool_bar.png");
            background-repeat: no-repeat;
            background-position: -103px -0px; 
        }
        .olControlDrawFeaturePointItemInactive { 
            background-image: url("../theme/default/img/editing_tool_bar.png");
            background-repeat: no-repeat;
            background-position: -77px -0px; 
        }
        .olControlDrawFeaturePointItemActive { 
            background-image: url("../theme/default/img/editing_tool_bar.png");
            background-repeat: no-repeat;
            background-position: -77px -23px ;                                                                   
        }
        .olControlModifyFeatureItemActive { 
            background-image: url(../theme/default/img/move_feature_on.png);
            background-repeat: no-repeat;
            background-position: 0px 1px;
        }
        .olControlModifyFeatureItemInactive { 
            background-image: url(../theme/default/img/move_feature_off.png);
            background-repeat: no-repeat;
            background-position: 0px 1px;
        }
        .olControlDeleteFeatureItemActive { 
            background-image: url(../theme/default/img/remove_point_on.png);
            background-repeat: no-repeat;
            background-position: 0px 1px;
        }
        .olControlDeleteFeatureItemInactive { 
            background-image: url(../theme/default/img/remove_point_off.png);
            background-repeat: no-repeat;
            background-position: 0px 1px;
        }

    </style>
    <script. src="http://liushaobo2005.blog.163.com/blog/wfs-protocol-transactions.js"></script>
    </head>
    <body nload="init()">    
        <div id="map" style="width:100%;height:100%"></div>       
    </body>
</html>

注意：

1.openlayer中WFS layer的featureNS为geoserver中编辑的矢量图层的workspace 的Namespace URI。

2.提交wfs服务时js存在跨域问题，所以必须保证地图web server和WFS服务器在同一域环境下。

转载于:https://www.cnblogs.com/boonya/p/3896220.html

weixin_30745553

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[转]openlayer+geoserver实现WFS操作

From：http://liushaobo2005.blog.163.com/blog/static/253056702011541462372/wfs是OGC的标准规范，主要用于提供对矢量地理数据的服务，我们以一个对摄像头图层进行操作为例了解如何通过openlayer+geoserver实现WFS操作。首先利用postgis建表camera，参照http://postgis.refracti...
复制链接

扫一扫