[转]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返回服务级元数据, ...
随机推荐
- g++ error: extra qualification on member [-fpermissive]
以下这段代码是在头文件里面的,DmaOpen DmaClose函数也是直接在class pcie_chip{}里面的.加了个额外的pcie_chip::才会报错. //delete pcie_chip ...
- 经典递归算法研究：hanoi塔的理解与实现
关于hanoi塔的原理以及概念,请Google,访问不了去百度. 主要设计到C中程序设计中递归的实现: 主代码实现如下: void hanoi(int src, int dest, int tmp, ...
- wget命令1（转载）
Linux系统中的wget是一个下载文件的工具,它用在命令行下.对于Linux用户是必不可少的工具,我们经常要下载一些软件或从远程服务器恢复备份到本地服务器.wget支持HTTP,HTTPS和FTP协 ...
- Java 获取Linux 的IP地址
import java.io.BufferedReader; import java.io.IOException; import java.io.InputStreamReader; import ...
- HBase 5、Phoenix使用
1.建表 执行建表语句 $ . ../examples/stock_symbol.sql 其中../examples/stock_symbol.sql是建表的sql语句 CREATE TABLE IF ...
- PHP Database ODBC 之 ODBC
ODBC 是一种应用程序编程接口(Application Programming Interface,API),使我们有能力连接到某个数据源(比如一个 MS Access 数据库). 创建 ODBC ...
- 也谈---基于 HTTP 长连接的“服务(转载)
这里指讨论基于HTTP的推技术, 诸如flash,applet之类的东西不作分析, 他们就不能说是"纯粹"的浏览器应用了. 首先是一点背景知识, 大家都知道长连接避免了tcp连接的 ...
- GCD 和延时调用
因为 Playground 不进行特别配置的话是无法在线程中进行调度的,因此本节中的示例代码需要在 Xcode 项目环境中运行.在 Playground 中可能无法得到正确的结果. GCD 是一种非常 ...
- Unity Layout碰撞检测
第一次看到LayerMask根本不知道是什么东东,后来问问度娘,看了几篇文章,终于看明白一点点,在网上看到各路大神的解释,终于明白了,LayerMask实际上是一个位码操作,在Unity3d中Laye ...
- CSS清除浮动的方法
CSS清除浮动的方法有哪些呢?经常性地会使用到float,很多邪门的事儿都有可能是浮动在作怪,清除浮动是必须要做的,而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一.下面看今天的 ...