<!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. 03(a)多元有约束优化问题(准备知识)

    转成Latex上传太麻烦,直接截图上传了,需要电子版的可以关注一下,微信公众号:“实干小海豹”,回复:”优化01a“,”优化01b“,”优化02a“,”优化02b“,”优化02c“,”优化02c“.. ...

  2. Flutter Widgets 之 FutureBuilder

    注意:无特殊说明,Flutter版本及Dart版本如下: Flutter版本: 1.12.13+hotfix.5 Dart版本: 2.7.0 展示异步任务状态 当有一个Future(异步)任务需要展示 ...

  3. Vue子组件和根组件的关系

    代码: <script type="text/javascript"> const Foo = Vue.extend({ template: `<div id=& ...

  4. APP图标在线生成

    在线生成安卓APP图标生成 图标在线 在线图标 安卓图标 生成图标 https://icon.wuruihong.com/ 在线png图片压缩  png压缩 https://compresspng.c ...

  5. C——简单计算器（HDU1237）

    题目: 读入一个只包含 +, -, *, / 的非负整数计算表达式,计算该表达式的值.  Input测试输入包含若干测试用例,每个测试用例占一行,每行不超过200个字符,整数和运算符之间用一个空格分隔 ...

  6. Nginx之常用基本配置

    上一篇博客我们大概介绍了一下nginx,nginx的架构,nginx编译安装和nginx命令的用法,回顾请参考https://www.cnblogs.com/qiuhom-1874/p/1236680 ...

  7. codewars--js--Number of trailing zeros of N!

    问题描述: Write a program that will calculate the number of trailing zeros in a factorial of a given num ...

  8. 分形的奥秘！分形着色器！shader 编程入门实战 ！ Cocos Creator！

    极致的数学之美! 什么是分形? "一个粗糙或零碎的几何形状,可以分成数个部分,且每一部分都(至少近似地)是整体缩小后的形状" 简单来说,分形(fractal)就像这个doge表情包 ...

  9. JavaScript 基础学习（一）JavaScript 简介

    定义 JavaScript是基于对象和事件驱动的语言,应用与客户端.其中: 基于对象:提供好了很多对象,可以直接拿过来使用 事件驱动:html做网站静态效果,javascript动态效果(网页能根据客 ...

  10. 同时安装了python和3，pycharm如何切换版本

    1.打开pycharm 2.进入  File->Setting->Project:你的项目名->Project Interpreter 3.通过Project Interpreten ...