openlayers实现在线编辑

概述:

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

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

思路:

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

实现:

1、新建vector图层

            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对象

            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、添加编辑控件

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

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

        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("未发生变化");
            }
        }

实现完整代码如下:

<!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>

实现效果:

编辑状态

编辑完成

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏技术记录

前端插件——头像截图上传插件的使用(带后台)

效果图:实现上传头像,右边是预览,有三个大小,可以对头像进行裁剪 ? HTML: toParentData 和 img 返回的是图片裁剪后的base64编码。其...

1.1K50
来自专栏潇涧技术专栏

Pury Project Analysis

Pury的源码:https://github.com/NikitaKozlov/Pury

9620
来自专栏hotqin888的专栏

engineercms利用pdf.js制作连续看图功能

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

19910
来自专栏FreeBuf

scapy在wlan中的应用

Scapy 又是scapy,这是python的一个网络编程方面的库,它在wlan中也有很强大的应用。一般我们买块网卡,然后aircrack-ng套件爆破一下邻居...

374100
来自专栏码匠的流水账

httpclient参数配置

默认的话,是从response里头读timeout参数的,没有读到则设置为-1,这个代表无穷,这样设置是有点问题了,如果是https链接的话,则可能会经常报

67910
来自专栏dotnet & java

讲一下Asp.net core MVC2.1 里面的 ApiControllerAttribute

ASP.NET Core MVC 2.1 特意为构建 HTTP API 提供了一些小特性,今天主角就是 ApiControllerAttribute. (注:文...

14820
来自专栏ASP.NETCore

MVVM绑定多层级数据到TreeView并设置项目展开

昨天在做项目的时候碰到了这个问题,发现通常我们定义的数据不法绑定到控件上,接下来我将讲一下我是怎么解决这个问题的。

15320
来自专栏雪胖纸的玩蛇日常

Uncaught SyntaxError: Unexpected token ' in JSON at position 1

1.5K30
来自专栏西二旗一哥

iOS - autoreleasepool and @autoreleasepool

+ 在一个自动引用计数的环境中(并不是垃圾回收机制),一个包含了多个对象的 NSAutoreleasePool 对象能够接收 autorelease 消息并且...

19240
来自专栏刘望舒

Android资源动态加载以及相关原理分析

思考 一般情况下,我们在设计一个插件化框架的时候,要解决的无非是下面几个问题: 四大组件的动态注册 组件相关的类的加载 资源的动态加载 实际上从目前的主流插件...

37980

扫码关注云+社区

领取腾讯云代金券