<!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. Go语言实现：【剑指offer】左旋转字符串

    该题目来源于牛客网<剑指offer>专题. 汇编语言中有一种移位指令叫做循环左移(ROL),现在有个简单的任务,就是用字符串模拟这个指令的运算结果.对于一个给定的字符序列S,请你把其循环左 ...

  2. 基于 Serverless Component 全栈解决方案 Ⅱ

    虽然之前的文章 基于 Serverless Component 的全栈解决方案 介绍了如何借助 Serverless Component 快速搭建 Restful API 后端服务 和 Vue.js ...

  3. Python3 (五）函数应用

    一.认识函数 在命令行中查看内置函数的方法: 1.先在命令行里输入python 2.help(函数) 二.函数的定义及运行特点 1.函数基本定义: def funcname(parameter_lis ...

  4. SpringBoot嵌入式Servlet配置原理

    SpringBoot嵌入式Servlet配置原理 SpringBoot修改服务器配置 配置文件方式方式修改,实际修改的是ServerProperties文件中的值 server.servlet.con ...

  5. docker集合

    docker集合 docker(1):容器技术简介 docker(2):docker的“前身”—lxc docker(3):docker简介 docker(4):docker的安装(centos7)和 ...

  6. 还是端口回流问题 TCP协议解析

    还是上一篇的问题 在一内部局域网中, client  内网地址为 10.0.0.2     web  服务器内网地址为 10.0.0.1    外网地址为  211.6.15.1    域名为  xx ...

  7. 实验一  GIT 代码版本管理

    实验一  GIT 代码版本管理 实验目的: 1)了解分布式分布式版本控制系统的核心机理: 2)熟练掌握git的基本指令和分支管理指令: 实验内容: 1)安装git 2)初始配置git ,git ini ...

  8. 目前最全的Python的就业方向

    Python是一门面向对象的编程语言,编译速度超快,从诞生到现在已经25个年头了.它具有丰富和强大的库,常被称为“胶水语言”,能够把用其他语言编写的各种模块(尤其是C/C++)很轻松地联结在一起.其特 ...

  9. JS中this的几种情况

    1.给元素的某个事件行为绑定方法,事件触发,方法执行,此时方法中的this一般都是当前元素本身: <div id="div"></div> div.oncl ...

  10. Javascript 基础学习（四）js 的语句

    由于程序都是自上向下的顺序执行的,所以通过流程控制语句可以改变程序执行的顺序,或者反复的执行某一段的程序. 语句的分类 条件判断语句 条件分支语句 循环语句 条件判断语句 条件判断语句也称为if语句 ...