（转）openlayers实现在线编辑

http://blog.csdn.net/gisshixisheng/article/details/46054949

概述：

在前面有篇博文讲述了基于Arcgis for js和wkt实现在线数据的采集和编辑功能，在本文讲述如何在openlayers实现类似的功能。上一篇博文的地址为：

http://blog.csdn.net/gisshixisheng/article/details/44310765

思路：

前后台的数据交互以wkt的形式，加载已完成对象用wkt，对象更新完成之后将geometry转换为wkt传给后台，将信息保存到数据库中。实现在线编辑主要为OpenLayers.Control.ModifyFeature。

实现：

1、新建vector图层

[javascript] view plaincopy print?

var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
vectors = new OpenLayers.Layer.Vector("Vector Layer", {
renderers: renderer
});
map1.addLayer(vectors);

2、添加wkt对象

[javascript] view plaincopy print?

var wkts = [
"POINT(107.5758285931443 29.7822116459692)",
"LINESTRING(120.18304604073 30.3305841465568,108.805692477062 32.0850224203499)",
"POLYGON((102.797302689433 36.5936423859273,105.519115206186 29.4789248520356,100.346180647351 19.9699202912212))"
];
var wktFormat = new OpenLayers.Format.WKT();
for(var i= 0,dl=wkts.length;i<dl;i++){
var geometry = wktFormat.read(wkts[i]);
vectors.addFeatures(geometry);
}
}

3、添加编辑控件

[javascript] view plaincopy print?

var editor = new OpenLayers.Control.ModifyFeature(vectors);
map1.addControl(editor);
editor.activate();

4、给vector添加编辑完成事件

[javascript] view plaincopy print?

vectors.events.on({
"afterfeaturemodified":editEnd
});
function editEnd(evt){
if(evt.modified){
console.log("发生变化");
var geom = evt.feature.geometry;
var wkt = new OpenLayers.Format.WKT(geom);
console.log(wkt.toString());
}
else{
console.log("未发生变化");
}
}

实现完整代码如下：

[html] view plaincopy print?

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>openlayers map</title>
<link rel="stylesheet" href="http://localhost/olapi/theme/default/style.css" type="text/css">
<style>
html, body{
padding:0;
margin:0;
height:100%;
width:100%;
overflow: hidden;
font-size: 12px;
}
#map1{
width: 100%;
height: 100%;
float: left;
border-right: 1px solid #000000;
}
</style>
<script src="http://localhost/olapi/OpenLayers.js"></script>
<script src="http://localhost/olapi/lib/OpenLayers/Lang/zh-CN.js"></script>
<script src="http://localhost/jquery/jquery-1.8.3.js"></script>
<script>
var map1, vectors;
OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
$(function(){
var bounds = new OpenLayers.Bounds(
73.45100463562233, 18.16324718764174,
134.97679764650596, 53.531943152223576
);
var options = {
controls: [],
maxExtent: bounds,
maxResolution: 0.2403351289487642,
projection: "EPSG:4326",
units: 'degrees'
};
map1 = new OpenLayers.Map('map1', options);
map1.addLayer(getWms("china"));
map1.addControl(new OpenLayers.Control.Zoom());
map1.addControl(new OpenLayers.Control.Navigation());
map1.zoomToExtent(bounds);
addVectors();
addEditor();
});
function getWms(layer){
return new OpenLayers.Layer.WMS(
"Geoserver layers - Tiled",
"http://localhost:8081/geoserver/lzugis/wms",
{
"LAYERS": layer,
"STYLES": '',
format: 'image/png'
},
{
buffer: 0,
displayOutsideMaxExtent: true,
isBaseLayer: true,
yx : {'EPSG:4326' : true}
}
);
}
function addVectors(){
var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
vectors = new OpenLayers.Layer.Vector("Vector Layer", {
renderers: renderer
});
map1.addLayer(vectors);
vectors.events.on({
"afterfeaturemodified":editEnd
});
var wkts = [
"POINT(107.5758285931443 29.7822116459692)",
"LINESTRING(120.18304604073 30.3305841465568,108.805692477062 32.0850224203499)",
"POLYGON((102.797302689433 36.5936423859273,105.519115206186 29.4789248520356,100.346180647351 19.9699202912212))"
];
var wktFormat = new OpenLayers.Format.WKT();
for(var i= 0,dl=wkts.length;i<dl;i++){
var geometry = wktFormat.read(wkts[i]);
vectors.addFeatures(geometry);
}
}
function addEditor(){
var editor = new OpenLayers.Control.ModifyFeature(vectors);
map1.addControl(editor);
editor.activate();
}
function editEnd(evt){
if(evt.modified){
console.log("发生变化");
var geom = evt.feature.geometry;
var wkt = new OpenLayers.Format.WKT(geom);
console.log(wkt.toString());
}
else{
console.log("未发生变化");
}
}
</script>
</head>
<body>
<div id="map1"></div>
</body>
</html>

实现效果：

编辑状态

编辑完成

转载于:https://www.cnblogs.com/telwanggs/p/6972787.html

（转）openlayers实现在线编辑相关推荐

java 流转文件_java 实现 word 文档的在线编辑以及流转
用 pageoffice 实现文档的在线编辑以及文档流转 1: 流程用修改无痕迹模式起草文件,各个领导批注自己意见的时候使用强制留痕模式打开,文员清稿的时候用核稿模式打开,还有最后只读模式打开发布的 ...
project 模板_施工进度计划表不会做？18个横道图自动生成模板，直接在线编辑...
施工进度计划表不会做?18个横道图自动生成模板,直接在线编辑对于工程建设来说,施工进度横道图在工程进度计划制定.项目管理等方面被广泛的应用,也是管理人员必须要掌握的技能,在编制的时候还是很繁琐的,需 ...
java 网站源码四套模版兼容手机平板PC 在线编辑模版 freemaker 静态引擎
前台: 支持四套模版, 可以在后台切换点击:获取地址 QQ 313596790 官网 http://www.fhadmin.org/ 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JST ...
工具左侧服务列表_协作办公时代，在线编辑文档工具，安排！
小组合作的工作,如果能够在线编辑就方便多了,小伙伴们有没有这样想过呢?今天叔白就给大家介绍一款能够在线编辑文档的工具,帮助大家提高工作效率,还想说一句,阿里出品的工具,真香! 语雀「语雀」是一个文档 ...
在线html差错,易查分在线编辑功能:发现错误随时修改，不用再重新上传表格!
原标题:易查分在线编辑功能:发现错误随时修改,不用再重新上传表格!
wordweb在线编辑_使用WordWeb享受按需词典和词库功能
wordweb在线编辑 Run across an unusual word or need a synonym for a word quickly? Usually that means ope ...
java office在线编辑_国外10个最受欢迎的 Java 开发的 CMS 系统
CMS是Content Management System的缩写,意为"内容管理系统",它具有许多基于模板的优秀设计,可以加快网站开发的速度和减少开发的成本.CMS的功能并不只限于 ...
借助office web apps实现在线预览和在线编辑
我所有的代码都是用go语言编写,你可以直接编译后使用,不用再有其他的操作. 最近项目实在太忙,这几天才有时间,这次是重头戏,要好好琢磨一下怎么写,才能更简洁的说清楚一切. 上一节,我们已经安装完毕,安 ...
Office文档在线预览/在线编辑解决方案 - 毕升OfficeAPI说明
毕升OfficeAPI说明毕升OfficeAPI集成.onlyoffice api集成使用毕升Office编辑,预览文件的过程 Api 具体说明 HMAC-MD5签名 callURL返回值如何检 ...

（转）openlayers实现在线编辑

（转）openlayers实现在线编辑相关推荐

最新文章

热门文章