<!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. 《C# 爬虫 破境之道》：第二境 爬虫应用 — 第四节：小说网站采集

    之前的章节,我们陆续的介绍了使用C#制作爬虫的基础知识,而且现在也应该比较了解如何制作一只简单的Web爬虫了. 本节,我们来做一个完整的爬虫系统,将之前的零散的东西串联起来,可以作为一个爬虫项目运作流 ...

  2. JDBCTemplate初学简介

    JDBCTemplate JdbcTemplate是Spring的一部分,是对数据库的操作在jdbc的封装,处理了资源的建立和释放(不需要我们管理连接了),我们只需要提供SQL语句(不需要我们设置参数 ...

  3. Spring事务中的隔离级别

    TransactionDefinition接口中定义了五个表示隔离级别的常量: TransactionDefinition.ISOLATION_DEFAULT:使用后端数据库默认的隔离界别,MySQL ...

  4. Go语言实现：【剑指offer】求1+2+3+...+n

    该题目来源于牛客网<剑指offer>专题. 求1+2+3+-+n,要求不能使用乘除法.for.while.if.else.switch.case等关键字及条件判断语句(A?B:C). Go ...

  5. 全网一定不是最好懂的C++线性筛素数

    Part 0:概念 先给几个概念(很重要): 合数:如果\(xy=z\text{且}x,y\text{为正整数}\),我们就说\(x,y\text{是}z\text{的合数}\) 素数:如果数\(a\ ...

  6. 如何在 Linux 中找出 CPU 占用高的进程

    1) 怎样使用 top 命令找出 Linux 中 CPU 占用高的进程 在所有监控 Linux 系统性能的工具中,Linux 的 top 命令是最好的也是最知名的一个.top 命令提供了 Linux ...

  7. 兄弟连 企业shell笔试题 1-15

    这些题目收集自网络,对比原来的答案,又根据实际情况重新编写了自己的答案 企业实践题1: (生产实战案例):监控MySQL主从同步是否异常,如果异常,则发送短信或者邮件给管理员.提示:如果没主从同步环境 ...

  8. vsphere 客户机 使用光驱引导启动

    vsphere上的虚拟服务器 需要用光盘引导启动,用pe系统做维护.   第一部:光盘ios文件 存放的位置 可以直接放光盘 或者将ios文件放到数据存储中 或者将ios文件放到实体主机的存储内   ...

  9. C#中HashSet的重复性与判等运算重载

    目录 一个故事-- 一个繁荣的遥远国度:泛型容器 但是我也不确定容器里能放些什么东西啊 一个英勇的皇家骑士:HashSet 值类型的HashSet 引用类型的HashSet 另外一个--故--事?? ...

  10. 部署LAMP环境搭建一个网站论坛平台

    修改主机名 Hostname openstack-001 Hostname Login 修改本地域名解析 Vi /etc/hosts 最后一行添加 192.168.1.56 openstack-001 ...