[转]openlayer+geoserver实现WFS操作

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服务器在同一域环境下。

[转]openlayer+geoserver实现WFS操作的更多相关文章

[转]Geoserver实现WFS操作
From:http://liushaobo2005.blog.163.com/blog/static/253056702011541462372/ wfs是OGC的标准规范,主要用于提供对矢量地理数据 ...
cesium结合geoserver利用WFS服务实现图层新增(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
openlayers6结合geoserver利用WFS服务实现图层新增功能(附源码下载)
内容概览 1.openlayers6结合geoserver利用WFS服务实现图层新增功能2.源代码demo下载效果图如下: 本篇主要是openlayers6通过调用geoserver发布的地图服务W ...
leaflet结合geoserver利用WFS服务实现图层新增功能(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
cesium结合geoserver利用WFS服务实现图层编辑(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
leaflet结合geoserver利用WFS服务实现图层删除功能(附源码下载)
前言 leaflet 入门开发系列环境知识点了解: leaflet api文档介绍,详细介绍 leaflet 每个类的函数以及属性等等 leaflet 在线例子 leaflet 插件,leaflet ...
cesium结合geoserver利用WFS服务实现图层删除(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
GeoServer中WMS、WFS的请求规范
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景 1.1WMS简介 Web地图服务(WMS)利用具有地理空间位置 ...
GeoServer中WMS、WFS的请求规范（转载）
1.背景 1.1WMS简介 Web地图服务(WMS)利用具有地理空间位置信息的数据制作地图.其中将地图定义为地理数据可视的表现.这个规范定义了三个操作:GetCapabitities返回服务级元数据, ...

随机推荐

【ASP.NET MVC路由测试+性能调试工具】
http://getglimpse.com https://github.com/Glimpse/Glimpse 百度网盘: http://pan.baidu.com/s/1jHuTtKa
LeeCode-Remove Linked List Elements
Remove all elements from a linked list of integers that have value val. ExampleGiven: 1 --> 2 --& ...
poj1724
ROADS Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 10804 Accepted: 3976 Descriptio ...
【刷题 Python Tip】题目6~10
[题目6]输出100以内的所有素数,素数之间以一个空格区分 from math import sqrt print ' '.join(str(key) for key in [x for x in x ...
Unity屏幕射线碰撞
Layers层: 从Layers设置看来,最多支持32层. 图层的值开始依次 0^2,1^2, 2^2, 3^3 依次增加. 当摄像机Culling Mask属性 Nothing= –1 Eveni ...
Word Amalgamation
Problem Description In millions of newspapers across the United States there is a word game called J ...
随机函数（Pascal入门）
随机函数是最主要的,在比赛的时候我们能够用随机函数来測试自己的程序是否会超时. 随机函数也能够做出一些大数据.用于两个程序之间对拍(一个是爆搜.一个是正解). 当然平时我们也能够用随机函数測自己的程序 ...
android——字体颜色跟随状态改变
TextView的字体颜色也可以和ImageView的background一样,跟随状态发生改变.只需要自定义一下字体颜色.在color文件夹下面,新建一个颜色文件的xml. OK ,这就完成了. ...
AutoFac初探
.net 4.0使用的DLL #region RegisterType注册 var builder = new ContainerBuilder(); builder.RegisterType< ...
Python－windows服务－重启自动化
一. 前言有了上一篇的“python初学”的基础,咱们就有了python的开发包,有了开发环境IDE,那我们就可以干活了.我的第一个选题就是让我们的windows服务可以按照我们的意愿进行自动重启. ...

[转]openlayer+geoserver实现WFS操作

[转]openlayer+geoserver实现WFS操作的更多相关文章

随机推荐

热门专题