<!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();

        })

        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(0, 0, 0, 0.3)'

                }),

                stroke: new ol.style.Stroke({

                    color: 'blue',

                    width: 2

                }),

                image: new ol.style.Circle({

                    radius: 10,

                    fill: new ol.style.Fill({

                        color: '#ffcc33'

                    })

                })

            })

        });

        //地图初始化

        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() {

            var coordinates = [[

                ol.proj.fromLonLat([120.26829957962033, 36.32791869064661]),

                ol.proj.fromLonLat([120.27445793151853, 36.330650012922234]),

                ol.proj.fromLonLat([120.2671408653259, 36.33063272637348]),

                ol.proj.fromLonLat([120.26829957962033, 36.32791869064661])

            ]]

            var plygon = new ol.geom.Polygon(coordinates)

            //多边形要素类

            var feature = new ol.Feature({

                geometry: plygon

            });

            layer.getSource().addFeature(feature);

            //清除

            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 plygon2 = new ol.geom.Polygon(points)

            //多边形要素类

            var feature2 = new ol.Feature({

                geometry: plygon2

            });

            layer.getSource().addFeature(feature2);

        }

    </script>

</body>

</html>

　　

openlayers显示区域的更多相关文章

  1. openlayers画区域

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

  2. Selenium2学习-024-WebUI自动化实战实例-022-网站不同分辨率下页面样式展示兼容性问题解决方案 -- 设置浏览器显示区域大小（无人值守，节约测试成本的福音，BOSS 最爱）

    在 Web UI 自动化测试的过程中,通常会测试页面在不同分辨率下的显示效果,即在不同大小的显示器上全屏浏览器后的页面展示,此种测试方法需要购置不同大小的显示器,或者频繁的设置屏幕分辨率,不仅浪费了大 ...

  3. Selenium2学习-023-WebUI自动化实战实例-021-获取浏览器显示区域大小，通过 WebDriver 截图功能

    之前的博文 020-JavaScript 在 Selenium 自动化中的应用实例之二(获取浏览器显示区域大小) 简述了通过 JavaScript 获取浏览器显示区域大小,此文将简述另一种获取浏览器显 ...

  4. Selenium2学习-022-WebUI自动化实战实例-020-JavaScript 在 Selenium 自动化中的应用实例之二（获取浏览器显示区域大小）

    前几篇文章中简略概述了,如何获取.设置浏览器窗口大小,那么我们该如何获取浏览器显示区域的大小呢?此文讲对此进行简略概述,敬请各位小主参阅.若有不足之处,敬请各位大神指正,不胜感激! 获取浏览器显示区域 ...

  5. JS-009-屏幕分辨率、浏览器显示区域、元素位置获取

    此文简略讲述有关屏幕大小.元素位置及大小获取. 执行文中脚本时,请先打开 Chrome 浏览器,并切换至开发者工具的控制台,并打开网址:http://www.yixun.com/,文中元素事例为页面元 ...

  6. tableView 显示区域偏移

    在SB拖了一个tableView , 在显示的时候显示区域和tableView的区域不一致, (UITableViewWrapperView 和 UITableView frame不一致) 在SB上看 ...

  7. 滚动到指定元素的id处+当元素出现在浏览器显示区域就会自动加载

    //滚动到指定元素的id处 如:$("#Exam82") function Jump() { var scroll_offset = $("#Exam82"). ...

  8. css 图片 圆形显示区域

    css 图片 圆形显示区域 css 和 div 实现 方形图片 圆形显示 点击下载

  9. CCNode作为容器实现显示区域剪裁

    一直把ccnode当做ui元素的容器使用,比如一段带下划线的文字,我会在一个ccnode中加入一个label和一个sprite,然后作为一个整体传出. 在主界面聊天的时候遇到一个问题,一段聊天信息需要 ...

随机推荐

  1. 创建一个JavaWeb工程

    1.用到的工具:eclipse编译器+Tomcat9,在自己电脑上已配置好jdk和tomcat的环境变量 2.新建一个project 2.选择web文件中的Dynamic Web project,进入 ...

  2. 【Debian】 Debian 安装源配置

    Debian 安装源配置 所有的Linux安装完后第一件事,就是要更新安装源 安装源是什么呢,安装源又称软件源,是指把软件的安装源地址放在一个pool里面,用一条命令(比如apt-get instal ...

  3. Python - os.walk()详细使用

    os.walk() 方法简单介绍 主要用来遍历一个目录内各个子目录和子文件 是一个简单易用的文件.目录遍历器,可以帮助我们高效的处理文件.目录方面的事情. 方法参数介绍 os.walk(top[, t ...

  4. django后台处理前端上传和显示图片

      1:项目根目录存放图片的目录 2:settings.py  添加 MEDIA_ROOT = os.path.join(BASE_DIR, "media") 3:url.py 添 ...

  5. Android 6.0（棉花糖）新特性

    1.支持4K显示 Android 6.0本身已经支持4K显示,会通过一定优化形式使4K内容更加清晰. 2. 启动验证 (更完整的应用权限管理) Android 6.0在开机时会自动运行验证代码,检测设 ...

  6. 关于Java/Kotlin下载图片，图片打开不能显示问题探究

    图片下载其实是个很简单的功能,通过IO流从在线地址获取流,之后将流输出到文件即可完成下载功能,但是,最近我发现某个网站中的图片下载成功,但是打开却是无法打开,这让我迷惑,百度上根本就没有人说清楚 今天 ...

  7. CNN目标检测系列算法发展脉络——学习笔记（一）：AlexNet

    在咨询了老师的建议后,最近开始着手深入的学习一下目标检测算法,结合这两天所查到的资料和个人的理解,准备大致将CNN目标检测的发展脉络理一理(暂时只讲CNN系列部分,YOLO和SSD,后面会抽空整理). ...

  8. 【爬虫】 爬虫请求json数据，返回乱码问题的解决

    from django.http import JsonResponse from rest_framework.utils import json from utils import request ...

  9. SAP 序列号与库存关联起来？

    SAP 序列号与库存关联起来? SAP系统标准功能可以实现序列号管理.其系统配置也不复杂,但是不少企业却使用不起来.笔者参与的诸多项目里,只有现在所在的项目里有启用序列号管理.基于项目客户所在行业,以 ...

  10. Maven 多模块开发

    多模块开发在大项目中用得比较多,把一个项目拆分为多个模块,一个小组开发一个模块. 比如微服务,一个服务一个模块:比如ssm,持久层(dao)一个模块,业务层一个模块(service).视图层(mvc. ...