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图层

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

2、添加wkt对象

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

3、添加编辑控件

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

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

  1. vectors.events.on({
  2. "afterfeaturemodified":editEnd
  3. });
  4. function editEnd(evt){
  5. if(evt.modified){
  6. console.log("发生变化");
  7. var geom = evt.feature.geometry;
  8. var wkt = new OpenLayers.Format.WKT(geom);
  9. console.log(wkt.toString());
  10. }
  11. else{
  12. console.log("未发生变化");
  13. }
  14. }

实现完整代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4. <meta charset="UTF-8">
  5. <title>openlayers map</title>
  6. <link rel="stylesheet" href="http://localhost/olapi/theme/default/style.css" type="text/css">
  7. <style>
  8. html, body{
  9. padding:0;
  10. margin:0;
  11. height:100%;
  12. width:100%;
  13. overflow: hidden;
  14. font-size: 12px;
  15. }
  16. #map1{
  17. width: 100%;
  18. height: 100%;
  19. float: left;
  20. border-right: 1px solid #000000;
  21. }
  22. </style>
  23. <script src="http://localhost/olapi/OpenLayers.js"></script>
  24. <script src="http://localhost/olapi/lib/OpenLayers/Lang/zh-CN.js"></script>
  25. <script src="http://localhost/jquery/jquery-1.8.3.js"></script>
  26. <script>
  27. var map1, vectors;
  28. OpenLayers.Feature.Vector.style['default']['strokeWidth'] = '2';
  29. $(function(){
  30. var bounds = new OpenLayers.Bounds(
  31. 73.45100463562233, 18.16324718764174,
  32. 134.97679764650596, 53.531943152223576
  33. );
  34. var options = {
  35. controls: [],
  36. maxExtent: bounds,
  37. maxResolution: 0.2403351289487642,
  38. projection: "EPSG:4326",
  39. units: 'degrees'
  40. };
  41. map1 = new OpenLayers.Map('map1', options);
  42. map1.addLayer(getWms("china"));
  43. map1.addControl(new OpenLayers.Control.Zoom());
  44. map1.addControl(new OpenLayers.Control.Navigation());
  45. map1.zoomToExtent(bounds);
  46. addVectors();
  47. addEditor();
  48. });
  49. function getWms(layer){
  50. return new OpenLayers.Layer.WMS(
  51. "Geoserver layers - Tiled",
  52. "http://localhost:8081/geoserver/lzugis/wms",
  53. {
  54. "LAYERS": layer,
  55. "STYLES": '',
  56. format: 'image/png'
  57. },
  58. {
  59. buffer: 0,
  60. displayOutsideMaxExtent: true,
  61. isBaseLayer: true,
  62. yx : {'EPSG:4326' : true}
  63. }
  64. );
  65. }
  66. function addVectors(){
  67. var renderer = OpenLayers.Util.getParameters(window.location.href).renderer;
  68. renderer = (renderer) ? [renderer] : OpenLayers.Layer.Vector.prototype.renderers;
  69. vectors = new OpenLayers.Layer.Vector("Vector Layer", {
  70. renderers: renderer
  71. });
  72. map1.addLayer(vectors);
  73. vectors.events.on({
  74. "afterfeaturemodified":editEnd
  75. });
  76. var wkts = [
  77. "POINT(107.5758285931443 29.7822116459692)",
  78. "LINESTRING(120.18304604073 30.3305841465568,108.805692477062 32.0850224203499)",
  79. "POLYGON((102.797302689433 36.5936423859273,105.519115206186 29.4789248520356,100.346180647351 19.9699202912212))"
  80. ];
  81. var wktFormat = new OpenLayers.Format.WKT();
  82. for(var i= 0,dl=wkts.length;i<dl;i++){
  83. var geometry = wktFormat.read(wkts[i]);
  84. vectors.addFeatures(geometry);
  85. }
  86. }
  87. function addEditor(){
  88. var editor = new OpenLayers.Control.ModifyFeature(vectors);
  89. map1.addControl(editor);
  90. editor.activate();
  91. }
  92. function editEnd(evt){
  93. if(evt.modified){
  94. console.log("发生变化");
  95. var geom = evt.feature.geometry;
  96. var wkt = new OpenLayers.Format.WKT(geom);
  97. console.log(wkt.toString());
  98. }
  99. else{
  100. console.log("未发生变化");
  101. }
  102. }
  103. </script>
  104. </head>
  105. <body>
  106. <div id="map1"></div>
  107. </body>
  108. </html>

实现效果：

编辑状态
编辑完成

（转）openlayers实现在线编辑的更多相关文章

  1. Microsoft Azure Web Sites应用与实践【3】—— 通过Visual Studio Online在线编辑Microsoft Azure 网站

    Microsoft Azure Web Sites应用与实践 系列: [1]—— 打造你的第一个Microsoft Azure Website [2]—— 通过本地IIS 远程管理Microsoft ...

  2. 小讲堂：在线编辑在Mobox文档管理软件中的意义

    今天我们来讨论一下,mobox文档管理软件中的在线编辑的这个功能,相信这个功能是用户在日常的文档维护中非常需要的. 文档管理软件的诸多功能中,在线编辑是一块很重要的功能点,因为在线编辑可以说是提高工作 ...

  3. Office word excel电子表格在线编辑的实现方法

    Office xp之后的版本支持通过webdav协议(http的扩展)直接编辑服务器上的文件. IIS(6.0)支持webdav,这在IIS管理器的web服务扩展中可以看到.利用IIS作为webdav ...

  4. RunJS - 在线编辑、展示、分享、交流你的 JavaScript 代码

    发现一个很好玩,很强大的网站 RunJS - 在线编辑.展示.分享.交流你的 JavaScript 代码   http://runjs.cn/ 比如: http://runjs.cn/detail/l ...

  5. [前端插件]Bootstrap Table服务器分页与在线编辑应用总结

    先看Bootstrap Table应用效果: 表格用来显示数据库中的数据,数据通过AJAX从服务器加载,同时分页功能有服务器实现,避免客户端分页,在加载大量数据时造成的用户体验不好.还可以设置查询数据 ...

  6. icon在线编辑和查找工具

    1.www.iconpng.com 2.在线编辑http://www.ico.la/ 3.小图标查找 http://icomoon.io/app/ 4.20个免费的psd http://www.osc ...

  7. word在线编辑\生成图片（包含截图与合并）

    1.业务原因 word编辑后的文章复制到html编辑器(fck等)会发生排版错乱的情况,于是混沌了.需要有一个新的方法来终结,于是产生了word能不能在线编辑,后台保存,前台显示灯一系列问题. 2.首 ...

  8. Office文档在线编辑的实现之二

    讲述了如何通过iis的webdav支持实现客户端的office直接编辑服务器上的文件,本篇将讲解如何实现客户端的office直接编辑数据库中的二进制形式保存的office文件. 实现的关键:模拟IIS ...

  9. Office文档在线编辑的实现之一

    因为项目的关系,研究了一下Office的在线编辑功能,写出来共享一下. Office xp之后的版本支持通过webdav协议(http的扩展)直接编辑服务器上的文件. IIS(6.0)支持webdav ...

随机推荐

  1. noip模拟赛 解谜游戏

    题目描述LYK进了一家古董店,它很想买其中的一幅画.但它带的钱不够买这幅画.幸运的是,老板正在研究一个问题,他表示如果LYK能帮他解出这个问题的话,就把这幅画送给它.老板有一个n*m的矩阵,他想找一个 ...

  2. noip模拟赛 SAC E#1 - 一道中档题 Factorial

    题目背景 数据已修改 SOL君(炉石主播)和SOL菌(完美信息教室讲师)是好朋友. 题目描述 SOL君很喜欢阶乘.而SOL菌很喜欢研究进制. 这一天,SOL君跟SOL菌炫技,随口算出了n的阶乘. SO ...

  3. [Bzoj4196] [NOI2015] 软件包管理器 [树链剖分，线段树]

    题解摘要:树链剖分后用线段树区间查询修改,对于安装软件,将改点到根的路径全部变为1,对于卸载软件,将子树清空.注意边界,编号是从0开始的,容易漏掉树根. 第一次写树剖- #include <io ...

  4. [bzoj1103][POI2007]大都市meg_dfs序_树状数组

    大都市meg bzoj-1103 POI-2007 题目大意:给定一颗n个点的树,m次操作.将一条路的边权更改成0:查询一个点到根节点的点权和.开始的时候所有边的边权都是1. 注释:$1\le n,m ...

  5. SharePoint 2013：解决爬网出错的问题

    现象: 以前一直正常的爬网突然无法顺利完成,总是在进行到某个部分就停滞不前. 调查: 在查看了log文件后,发现了这条错误 06/24/2014 11:14:51.86   NodeRunnerQue ...

  6. PHP array_fill()

    定义和用法 array_fill() 函数用给定的值填充数组,返回的数组有 number 个元素,值为 value.返回的数组使用数字索引,从 start 位置开始并递增.如果 number 为 0 ...

  7. JCE, Java Cryptography Extension

    JCE, Java Cryptography Extension Java 8 JCE下载地址: http://www.oracle.com/technetwork/java/javase/downl ...

  8. gradle配置国内的镜像

    gradle配置国内的镜像 学习了:http://blog.csdn.net/stdupanda/article/details/72724181 http://blog.csdn.net/lj402 ...

  9. OllyDbg 使用笔记 （七）

    OllyDbg 使用笔记 (七) 參考 书:<加密与解密> 视频:小甲鱼 解密系列 视频 演示样例程序下载:http://pan.baidu.com/s/1gvwlS 暴力破解 观察这个程 ...

  10. 在CentOS 6 中安装 Apache,Mysql, PHP

    1.安装Apache 在终端中输入以下的命令就能够安装Apache了: sudo yum install httpd sudo的意思是用root用户做什么操作.要点击y就确认下载安装了,非常方便. 然 ...