<!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. Nginx：Nginx limit_req limit_conn限速

    简介 Nginx是一个异步框架的Web服务器,也可以用作反向代理,负载均衡器和HTTP缓存,最常用的便是Web服务器.nginx对于预防一些攻击也是很有效的,例如CC攻击,爬虫,本文将介绍限制这些攻击 ...

  2. 阿里云服务器ECS Ubuntu18.04 安装mysql

    ubuntu系统好了,这下我应该安装MySQL数据库了.在安装过程中,遇到好多坑,下面是我的安装过程. 1.在阿里云控制台,用vnc登录到服务器. 用新的用户登录到Ubuntu用户系统. 打开终端: ...

  3. Redis中RDB和AOF持久化区别和联系

    RDB和AOF持久化   ​RDB持久化 RDB是什么? 原理是redis会单独创建(fork) 一个与当前进程一模一 样的子进程来进行持久化,这个子进程的所有数据(变量.环境变量,程序程序计数器等) ...

  4. php 安装扩展插件实例-ftp.so

    工作记录一下   1.首先进入原始php包安装文件(不是安装后的文件,是下载php安装压缩包,解压后的那个文件)安装包里有个扩展文件夹ext,进入 #cd /home/php-5.3.3/ext/#l ...

  5. apache 访问状态 分析

    状态查看: 1.查看apache 各状态连接数 [root]#netstat -n | awk '/^tcp/ {++S[$NF]} END {for(a in S) print a, S[a]}' ...

  6. iptables之路由网关共享上网/端口映射

    linux-A 主机配置eth0即可: [root@linux-A ~]# ifconfig eth0|sed -n '2p' inet addr:192.168.20.3 Bcast:192.168 ...

  7. matplotlib如何显示中文

    问题:matplotlib不能渲染中文 想设定为中文字体,网上搜索的方法几乎都是下面这样,已经把字体拷贝到了程序目录下了,然而并没有生效 plt.rcParams [ font.sans-serif' ...

  8. No mapping found for HTTP request with URI [/SLSaleSystem/js/jquery.dataTables.min.js] in DispatcherServlet with name 'spring' 静态资源文件访问不到，无解！！！！！！！

    报错信息:   网上三种修改 web.xml 文件方法尝试未果 尝试未果:<mvc:default-servlet-handler/> 尝试未果:方法2:直接告诉spring,这个你就得这 ...

  9. Orleans[NET Core 3.1] 学习笔记（四）（ 2 ）获取Grain的方式

    简介 在这一节,我们将介绍如何在Silo和Client中获取Grain及调用Grain Grain获取方式 从Grain内部获取: //根据特定的Key值创建或获取指定的Grain IStudent ...

  10. 02-flink时间语义 与 Window 基础概念与实现原理

    Flink 多种时间语义对比 Flink 在流应用程序中支持不同的 Time 概念,就比如有 Processing Time.Event Time 和 Ingestion Time.下面我们一起来看看 ...