<!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. NFA和DFA的区别

      NFA DFA 初始状态 不唯一 唯一 弧上的标记 字(单字符字/ε) 字符(串) 转换关系 非确定 确定 对于每个NFA M都存在一个DFA M' 使得 L(M) = L(M')

  2. 编辑crontab添加Linux计划任务

    在做实验楼的比赛时的题目 用到了crontable 1. 为用户shiyanlou添加一个计划任务 2. 每天凌晨2点定时执行 3. 将/var/log/dpkg.log /var/log/mysql ...

  3. Python3 (五）函数应用

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

  4. javascript A*算法 寻路算法 获取最短路径算法

    //A算法 自动寻路 路径 class GetAutoPath{ constructor(id, map, sPos, ePos, mapArr){ //this.type = id.type; th ...

  5. css 纯css轮播图 示例

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

  6. JDK1.8_HashMap源码__构造函数

    HashMap的底层实现是一个Node类型的数组,也就是说使用put(key, value)方法的时候就把key和value根据hashcode值存在table数组相应的下标中,源码如下: /** * ...

  7. 并发编程之线程池ThreadPoolExecutor

    前言 在我们平时自己写线程的测试demo时,一般都是用new Thread的方式来创建线程.但是,我们知道创建线程对象,就会在内存中开辟空间,而线程中的任务执行完毕之后,就会销毁. 单个线程的话还好, ...

  8. 15.Android-实现TCP客户端,支持读写

    在上章14.Android-使用sendMessage线程之间通信我们学习了如何在线程之间发送数据. 接下来我们便来学习如何通过socket读写TCP. 需要注意的是socket必须写在子线程中,不能 ...

  9. redis 5.0.7 源码阅读——跳跃表skiplist

    redis中并没有专门给跳跃表两个文件.在5.0.7的版本中,结构体的声明与定义.接口的声明在server.h中,接口的定义在t_zset.c中,所有开头为zsl的函数. 一.数据结构 单个节点: t ...

  10. IDEA 代码量统计（Statistic）

    IDEA 代码量统计(Statistic) 1.1 前言 项目到了一定阶段,都会想要看看项目的代码量情况,这里主要使用插件Statistic进行代码统计查看. 1.2 安装插件步骤 找到插件市场入口并 ...