[转]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服务器在同一域环境下。
[转]Geoserver实现WFS操作的更多相关文章
- [转]openlayer+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返回服务级元数据, ...
随机推荐
- ffmpeg参数解释 <第三篇>
例子:ffmpeg -y -i "1.avi" -title "Test" -vcodec xvid -s 368x208 -r 29.97 -b 1500 - ...
- android sdk 如何重新生成debug.keystore
1)首先你要确定你安装的JDK位置,Windows->Preferences->Java->Installed JREs,你可以看到是Jre的location,再在dos cmd模式 ...
- Linux系统编程（24）——信号的生命周期
信号生命周期为从信号发送到信号处理函数的执行完毕. 对于一个完整的信号生命周期(从信号发送到相应的处理函数执行完毕)来说,可以分为三个重要的阶段,这三个阶段由四个重要事件来刻画:信号诞生:信号在进程中 ...
- LeeCode(Database)-Employees Earning More Than Their Managers
The Employee table holds all employees including their managers. Every employee has an Id, and there ...
- wireshark----教你如何抓包
wireshark----教你如何抓包 wireshark是一款强大的抓包工具,走过路过一定不要错过就是了,当你学习TCP/IP协议的时候,学习使用wireshark 抓包正是理论联系实际最好的方法, ...
- [转]ActiveMQ 即时通讯服务 浅析
一. 概述与介绍 ActiveMQ 是Apache出品,最流行的.功能强大的即时通讯和集成模式的开源服务器.ActiveMQ 是一个完全支持JMS1.1和J2EE 1.4规范的 JMS Provide ...
- sizeof用法
c语言详解sizeof 原文地址:http://blog.sina.com.cn/s/blog_5da08c340100bmwu.html 一.sizeof的概念 sizeof是C语言的一种单 ...
- |,&,<<,>>运算符
<< 位移运算符(>>相反了) /* * 题目: 2 << 3 = 10000 = 16 * 解答: 2向左移动三位,就变成了10000 * 十进制 二进制 * 2 ...
- Oracle游标动态赋值
1. oracle游标动态赋值的小例子 -- 实现1:动态给游标赋值 -- 实现2:游标用表的rowtype声明,但数据却只配置表一行的某些字段时,遍历游标时需fetch into到精确字段 CREA ...
- OpenCV2马拉松第14圈——边缘检測(Sobel,prewitt,roberts)
收入囊中 差分在边缘检測的角色 Sobel算子 OpenCV sobel函数 OpenCV Scharr函数 prewitt算子 Roberts算子 葵花宝典 差分在边缘检測究竟有什么用呢?先看以下的 ...