<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <link rel="stylesheet" href="lib/OpenLayers/ol.css" type="text/css">

    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <script src="lib/OpenLayers/ol.js"></script>

    <script src="olStyle/Light.js"></script>

    <style>

        html,

        body {

            width: 100%;

            height: 100%;

            margin: 0;

        }

        .map {

            width: 100%;

            height: 100%;

            background: #f6f6f4;

        }

    </style>

</head>

<body>

    <div id="map" class="map" data-id="11"></div>

    <script type="text/javascript">  

        $(function () {

            InitMap();

            AddPolygon();

            //编辑

            EditArea();

        })

        var map;

        var layer = new ol.layer.Vector({

            source: new ol.source.Vector(),

            style: new ol.style.Style({

                fill: new ol.style.Fill({

                    color: 'rgba(255, 0, 0, 0.5)'

                }),

                stroke: new ol.style.Stroke({

                    color: 'red',

                    width: 2

                }),

                image: new ol.style.Circle({

                        //半径大小

                        radius: 7,

                        //填充

                        fill: new ol.style.Fill({

                            //填充颜色

                            color: '#e81818'

                        })

                    })

            })

        });

        //地图初始化

        function InitMap() {

            map = new ol.Map({

                layers: [new ol.layer.Vector({

                    source: new ol.source.Vector()

                    }),

                    style: function (feature, resolution) {

                        switch (feature.get('layer')) {

                            case 'poi':

                                poiStyle.getText().setText(feature.get('name'));

                                return poiStyle;

                            case 'boundary': return boundaryStyle;

                            case 'lawn': return lawnStyle;

                            case 'road':

                                roadStyle.getText().setText(feature.get('name'));

                                return (resolution < 2) ? roadStyle : null;

                            case 'building':

                                return buildingStyle(feature, resolution);

                            case 'other':

                                otherStyle.getText().setText(feature.get('name'));

                                return otherStyle;

                            default: return null;

                        }

                    }

                }), layer],

                target: 'map',

                view: new ol.View({

                    center: ol.proj.fromLonLat([120.277, 36.330]),

                    minZoom: 1,

                    zoom: 16

                })

            });

        }

        /*显示并编辑区域**********************************************************************************/

        function AddPolygon() {

            layer.getSource().clear();

            // var points = [[

            //     ol.proj.fromLonLat([120.27681827545163, 36.33236136226455]),

            //     ol.proj.fromLonLat([120.28038024902342, 36.33141061727086]),

            //     ol.proj.fromLonLat([120.27681827545163, 36.33001040806349]),

            //     ol.proj.fromLonLat([120.27681827545163, 36.33236136226455])

            // ]]

            // var plygon = new ol.geom.Polygon(points)

            // //多边形要素类

            // var feature = new ol.Feature({

            //     geometry: plygon

            // });

            //var points = ol.proj.fromLonLat([120.27611017227173,36.331306898933306]);

            var points = [13389075.33897296,4346304.97458048]

            var plygon = new ol.geom.Circle(points,294)

            var feature = new ol.Feature({

                geometry: plygon

            });

            layer.getSource().addFeature(feature);

        }

        function EditArea() {

            modify = new ol.interaction.Modify({

                source: layer.getSource(),

            });

            //modify.setActive(true);

            modify.on("modifyend", function () {

                // 编辑结束时获取坐标点

                // var features = layer.getSource().getFeatures();

                // var geometry = features[0].getGeometry();

                // var points;

                // var lnglat = [];

                // points = geometry.getCoordinates()[0];

                // for (var i = 0; i < points.length; i++) {

                //     lnglat.push(ol.proj.transform(points[i], 'EPSG:3857', 'EPSG:4326'));

                // }

                // console.log(lnglat);

            })

            map.addInteraction(modify);

        }

    </script>

</body>

</html>

　　

openlayers编辑区域的更多相关文章

  1. openlayers显示区域

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  2. eclipse/myeclipse选中编辑区域文件，Package Explorer定位文件所在项目及目录

    eclipse/myeclipse选中编辑区域文件,Package Explorer定位文件所在项目及目录 1. 打开Package Explorer(若没有,可以按照如下路径点击: Window菜单 ...

  3. ECSHOP 模版文件里的编辑区域

    Ecshop 中的模板能够有可编辑区域,在模板中是通过 <!-- TemplateBeginEditable name="左边区域" --> <!-- Templ ...

  4. Selenium IDE编辑区域修改操作学习

    1.修改command.target.value,选择需要修改的步骤,然后点击下方,既可以直接进行修改. 2.添加新的操作步骤:直接在下方编辑区域的下方点击,然后输入或者选择操作类型,然后点击Targ ...

  5. word2010文档如何隐藏右侧灰色空白不可编辑区域

    word2010文档如何隐藏右侧灰色空白不可编辑区域, (word2007也是差不多的操作) 两种方法: 1.点击图中的“最终状态”按钮: 2.点击图中的”以嵌入方式显示所有修订“的按钮:

  6. openlayers画区域

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  7. Android获取状态栏高度、标题栏高度、编辑区域高度

    一.Activity界面的划分 简单说明一下(上图Activity采用默认Style,状态栏和标题栏都会显示):最大的草绿色区域是屏幕界面,红色次大区域我们称之为"应用程序界面区域" ...

  8. UEditor 之查询当前编辑区域的状态是源码模式还是可视化模式

    在使用百度的编辑器的时候,遇到了这样的一个问题: 解决方法是 使用了两个命令:

  9. vs2012修改代码编辑区域的背景色

随机推荐

  1. Scala函数式编程（五） 函数式的错误处理

    前情提要 Scala函数式编程指南(一) 函数式思想介绍 scala函数式编程(二) scala基础语法介绍 Scala函数式编程(三) scala集合和函数 Scala函数式编程(四)函数式的数据结 ...

  2. CP - OFDM

  3. JavaScript 构造函数的继承

    JavaScript 构造函数的继承 在上一篇文章中讲述了 JS 对象.构造函数以及原型模式,这篇文章来讨论下 JavaScript 的继承 继承是 OO 语言中的一个最为人津津乐道的概念.许多 OO ...

  4. VFP中OCX控件注册检测及自动注册

    这是原来从网上搜集.整理后编制用于自己的小程序使用的OCX是否注册及未注册控件的自动注册函数. CheckCtrlFileRegist("ctToolBar.ctToolBarCtrl.4& ...

  5. 基于python的密码字典生成器

    最近在网上看到一些作品,然后对其进行了一些完善.只是用于学习,不要去干坏事哦.程序来源于网络,我只是做了一些优化. #!/usr/bin/python# -*- coding:utf-8 -*-# @ ...

  6. nginx-tengine集合

    nginx-tengine集合 nginx获取客户端真实ip Nginx/tengine realserver健康检测

  7. Xcode如何集成Pod教程

    一般开发都会用到很多第三方的框架,利用好他们可以加快开发进度,为了更方便将第三方的框架集成到我们的项目中,Pod是个很好的选择,现在说一下该怎么将Pod集成到我们的Xcode中 第一种方法 命令行的方 ...

  8. 手把手教你快速使用数据可视化BI软件创建互联网用户数据分析大屏

    灯果数据可视化BI软件是新一代人工智能数据可视化大屏软件,内置丰富的大屏模板,可视化编辑操作,无需任何经验就可以创建属于你自己的大屏.大家可以在他们的官网下载软件.   本文以互联网用户数据分析大屏为 ...

  9. markdown语法链接新页面打开

    我们在写markdown语法的文章时,经常会写超链接,默认markdown的写法超链接打开页面都是在当前页面,对自己页面的访问不是很好,所以我们一般都希望在新页面打开.但是据我对markdwon的语法 ...

  10. C# 调用WCF服务的两种方法

    项目简介 之前领导布置一个做单点登录的功能给我,实际上就是医院想做一个统一的平台来实现在这个统一的平台登录后不需要在His.Emr.Lis等系统一个个登录,直接可以登录到对应的系统,然后进行相应的操作 ...