[转]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返回服务级元数据, ...
随机推荐
- scheme 宏macro写法
scheme里的宏不同的实现有不同的写法: 1.mzscheme的define-macro (mzscheme也就是pltschme,也就是drracket,没有define-macro这个关键字) ...
- maven添加oracle jdbc依赖
maven添加oracle jdbc依赖 由于Oracle授权问题,Maven不提供Oracle JDBC driver,为了在Maven项目中应用Oracle JDBC driver,必须手动添加到 ...
- ubuntu下集群设置静态ip
hadoop集群时,需要固定集群内计算机相互通信之间的ip地址,但是每次进行网络连接后,ip地址都是变换的,我们希望设置一个用于集群内通信的静态ip,即使重启电脑也不会变化,同样希望能够正常的访问互联 ...
- [置顶] 教你如何搭建RobotFramework环境
看到这篇文章的朋友,相信已经知道RobotFramework是干什么的了,我这里就不再赘述了. 搭建步骤: 1. 下载安装Python,下载地址http://www.python.org/getit/ ...
- php php打乱数组二维数组、多维数组
php中的shuffle函数只能打乱一维数组,有什么办法快速便捷的打乱多维数组?手册上提供了 <?php function shuffle_assoc($list) { if (!is ...
- popToViewController用法
[self.navigationController popToViewController:[self.navigationController.viewControllers objectAtIn ...
- Android项目实战-云词典
前段时间在网上看到滴答滴答的一个项目,字典文章,找到一个简单的字.整句翻译功能,词汇,但漫长的岁月项目,二手API数据不再可用,我决定使用其现有的框架来实现其功能,主要采用的技术GSON和Volley ...
- ubuntu如何开启SSH服务
ubuntu如何开启SSH服务 分类: Linux 运维与操作基础2013-02-24 13:33 2868人阅读 评论(0) 收藏 举报 sshd ubuntu ubuntu默认并没有安装ssh服务 ...
- MVCC图示
磨砺技术珠矶,践行数据之道,追求卓越价值 回到上一级页面:PostgreSQL内部结构与源代码研究索引页 回到顶级页面:PostgreSQL索引页 [作者:高健@博客园 luckyjackgao ...
- Android Audio System 之一：AudioTrack如何与AudioFlinger
Android Framework的音频子系统中,每一个音频流对应着一个AudioTrack类的一个实例,每个AudioTrack会在创建时注册到 AudioFlinger中,由AudioFlinge ...