<!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. JDBCTemplate初学简介

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

  2. 动手学习Pytorch(7)--LeNet

    Convolutional Neural Networks 使用全连接层的局限性: 图像在同一列邻近的像素在这个向量中可能相距较远.它们构成的模式可能难以被模型识别. 对于大尺寸的输入图像,使用全连接 ...

  3. 云服务器InfluxDB & Chronograf配置

    环境: 阿里云服务器 Ubuntu 18.04.3 LTS InfluxDB 1.7.10 (截至2020.2.20最新版) chonograf 1.8.0 (2020.2.19推出) 配置建议: 不 ...

  4. 在CentOS8 上安装Python3

    从centos开始入手学习linux.感觉安装python很费劲,之前centos6因为python2和python3兼容的问题一直无法彻底解决,python3一旦安装影响到python2,cento ...

  5. Thread Based Parallelism - Thread Synchronization With Lock

    Thread Based Parallelism - Thread Synchronization With Lock import threading shared_resource_with_lo ...

  6. 搭建grafana+telegraf+influxdb服务器性能监控平台

    最近在学习性能测试,了解到一套系统资源使用率低的监控环境,也就是grafana+telegraf+influxdb. InfluxDB是一款优秀的时间序列数据库,适合存储设备性能.日志.物联网传感器等 ...

  7. 使用github--stanfordnlp--glove训练自己的数据词向量

    1.准备语料 准备好自己的语料,保存为txt,每行一个句子或一段话,注意要分好词.将分好词的语料保存为×××.txt 2.准备源码 下载地址:https://github.com/stanfordnl ...

  8. prometheus operator（Kubernetes 集群监控）

    一.Prometheus Operator 介绍 Prometheus Operator 是 CoreOS 开发的基于 Prometheus 的 Kubernetes 监控方案,也可能是目前功能最全面 ...

  9. comm diff 文件对比

    comm: 利用comm命令进行处理的文件必须首先通过sort命令进行排序处理并且是unix格式而非dos格式的文本文件 功能说明:比较两个已排过序的文件.(使用sort排序)语 法:comm [-1 ...

  10. Cacti 抓取数据方式 安装spine

    安装好cacti后首先要设置获取数据的方式 Cacti 获取数据的方式有两种,1.监控端的脚本(可以是php, shell, perl 或其他脚本)2.或者 snmp 协议获取. Cacti 会在固定 ...