[转]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返回服务级元数据, ...
随机推荐
- OpenCV图片类cv::Mat和QImage之间进行转换（好多相关文章）
在使用Qt和OpenCV混合编程时,我们有时需要在两种图片类cv::Mat和QImage之间进行转换,下面的代码参考了网上这个帖子: //##### cv::Mat ---> QImage ## ...
- 【HDU 5510 Bazinga】字符串
2015沈阳区域赛现场赛第2题 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5510 题意:给定一个由字符串组成的序列,一共n个元素,每个元素是一个不 ...
- JDBC官方用法
JDBC官方用法https://bitbucket.org/xerial/sqlite-jdbc/#markdown-header-usage 代码下载https://github.com/xeria ...
- IOS设计模式学习（8）适配器
1 前言 在面向对象软件设计中,有时候我们想把有用而经过精心测试的类,用于应用程序的其他新领域.但是,新功能需要新接口,而新接口与要复用的现有类不一致的情况非常普遍.我们不想为新的接口而重写可靠的类. ...
- 【技术文档】《算法设计与分析导论》R.C.T.Lee等·第5章 树搜索策略
计算机中许多问题的解空间可以用一棵树来表示,最优解就在树中的一个分支上,因此,我们在解这类问题时可以采用树搜索策略,最经典的问题包括0/1背包问题.旅行商问题.哈密顿回路问题,还有8数码问题(就是我们 ...
- 如何统一删除word中的超链接
[摘要] 我们从别处拷贝文字,或从网上复制的文字,里面有很多超级链接,如何可以批量删除这些链接呢?这里介绍两种批量删除链接的方法. [正文] 方法一:使用快捷键删除超链接 有个神奇的快捷键,可以帮我们 ...
- 判断Table表中是否含有某一列
if (row.Table.Columns.Contains("DealRecord_GiftCost")) { if (row["DealRecord_Gift ...
- 安卓开发之非常好用的AndroidOne框架DownloadManager
AndroidOne框架是采用MVC模式,集成了Android主流开源技术及组件,是一款极速且简单高效开发框架,整个项目包含两个部分AndroidOne,oneCore AndroidOne为演示项目 ...
- 获取设备的UUID
很多时候需要获取设备的UUID,比如在蓝牙交互时,需要获取服务和特征的UUID,那么如何获取设备的UUID呢?请见如下代码: // // ViewController.m // 获取UUID // / ...
- XMAL 中x名称控件的Auttribute
1 X:Class 作用告诉XAML编译器将XAML标签的编译结果与后台代码中指定的类合并,只能用于根节点,并且与之同名的类需要有Partial 例如窗口 2 X:ClassModifier 作用告诉 ...