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

        }

        .ol-scale-line {

            /* 比例尺背景颜色 */

            background: rgba(0, 60, 136, .7);

        }

        .ol-scale-line-inner {

            /* 比例尺边框样式 */

            border: 1px solid #eee;

            border-top: none;

            /* 比例尺文字大小 */

            font-size: 10px;

            /* 比例尺文字颜色 */

            color: #eee;

            /* 比例尺宽高为动态计算，若需要固定宽度，将最大最小宽度设置为相同即可 */

            min-width: 100px;

            max-width: 100px;

        }

    </style>

</head>

<body>

    <div id="map" class="map" data-id="11"></div>

    <script type="text/javascript">

        var map;

        $(function () {

            InitMap();

            AddScaleLint();

        })

        var layer;

        //地图初始化

        function InitMap() {

            //初始化地图

            layer = new ol.layer.Vector({

                source: new ol.source.Vector(),

                    overlaps: false,

                    wrapX: false

                }),

                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;

                    }

                }

            });

            map = new ol.Map({

                layers: [layer],

                target: 'map',

                view: new ol.View({

                    center: ol.proj.fromLonLat([120.277, 36.330]),

                    minZoom: 1,

                    zoom: 16

                })

            });

        }

        /*增加比例尺**********************************************************************************/

        //添加比例尺

        function AddScaleLint() {

            var scaleLineControl = new ol.control.ScaleLine({

                Units: 'metric',//单位有5种：degrees imperial us nautical metric

            });

            map.addControl(scaleLineControl);

        }

    </script>

</body>

</html>

　　

openlayers显示比例尺的更多相关文章

  1. JavaWeb和WebGIS学习笔记（五）——使用OpenLayers显示地图

    系列链接: Java web与web gis学习笔记(一)--Tomcat环境搭建 Java web与web gis学习笔记(二)--百度地图API调用 JavaWeb和WebGIS学习笔记(三)-- ...

  2. openlayers显示区域

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

  3. OpenLayers 3 入门教程

    OpenLayers 3 入门教程摘要OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计.版本2虽然被广泛使用,但从JavaScript开发的早期发展阶段开始,已日益现实出它 ...

  4. openlayers API实现鹰眼图OverviewMap时地图不断闪烁等问题的解决思路

    前言:我吐了,OpenLayers的巨坑之一--鹰眼图OverviewMap创建之必备注意事项. 许久没有更新博客的我,在今天饱受折磨之后一定要分享一下(这么过分一定要说出来.jpg) 相信大家如果使 ...

  5. OpenLayers入门（一）

    OpenLayers简介 OpenLayers(https://openlayers.org/)是一个用来帮助开发Web地图应用的高性能的.功能丰富的JavaScript类库,可以满足几乎所有的地图开 ...

  6. android菜鸟学习笔记30----Android使用百度地图API(一)准备工作及在应用中显示地图

    1.准备工作: 百度地图API是免费开放的,但是需要申请API Key: 1)先注册一个百度开发者帐号 2)进入百度开放服务平台http://developer.baidu.com/ 3)进入LBS云 ...

  7. PIE SDK 基于Dot net bar实现比例尺控件

    最近在搭建主界面的过程中,为了界面美观大方,使用了Dot net bar.但是,在Dot net bar的状态栏中放置PIE SDK自带的比例尺控件,运行主界面程序后,比例尺控件始终不显示比例尺信息, ...

  8. ArcGIS Server开发教程系列（8）ArcGIS API for Javascript-控件（小部件）

    1.     鹰眼 OverviewMap小部件用于在其关联的主地图内较清楚的当前鸟瞰图的范围.当主地图范围变化时,鹰眼图会自动在其空间内更新范围以保持和地图的当前范围保持一致,当鹰眼图空间的地图范围 ...

  9. iOS开发——高级篇——地图 MapKit

    一.简介 1.在移动互联网时代,移动app能解决用户的很多生活琐事,比如周边:找餐馆.找KTV.找电影院等等导航:根据用户设定的起点和终点,进行路线规划,并指引用户如何到达 在上述应用中,都用到了定位 ...

随机推荐

  1. JFrame的BorderLayout

    JFrame的默认布局就是BorderLayout,即将一个窗体划分为东西南北中五个板块. 如果往其中添加组件,中间面板大小随窗体大小变化,其余部分根据添加的组件的大小自适应. 容器变高,则North ...

  2. SQLYOG导入数据时报错，出现找不到Microsoft office 元驱动程式，并且无法安装64位office Access驱动

    当我们使用mysql导入外部数据时(如Excel表),有时会出现如下的错误问题,即找不到64位access驱动.为了解决这个问题,我们需要下载相应的驱动,通过下图中的点击此链接即可进入下载页面(htt ...

  3. vue子向父传值

    要弄懂子组件如何向父组件传值,需要理清步骤 子组件向父组件传值的步骤 一:子组件在组件标签上通过绑定事件的方式向父组件发射数据 <!--html--><template id=&qu ...

  4. CentOS 7 GNOME桌面系统 网络配置

    问题概述:在学习Linux系统的过程中,在WORKSTATION 14 PRO上安装了CentOS 7 Linux虚拟机,安装过程一切正常,但在应用过程中无法连接网络: 具体问题:1. 通过 ip a ...

  5. 03(a)多元有约束优化问题(准备知识)

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

  6. python中调用函数时，参数顺序与参数赋值问题

    设置类和函数如下:class MM(): def ff(self,url(1),method(2),data=None(3),cookie=None(4)): if method.lower()==& ...

  7. Python 模拟登录几种常见方法

    方法一:直接使用已知的cookie访问 优点: 简单,但需要先在浏览器登录 原理: 简单地说,cookie保存在发起请求的客户端中,服务器利用cookie来区分不同的客户端.因为http是一种无状态的 ...

  8. js+css页面横屏

    <!DOCTYPE html> <html lang='zh'> <head> <meta charset="utf-8" /> & ...

  9. Docker Compose 模板文件 V2

    模板文件是使用Compose的核心,默认模板文件名称为docker-compose.yml ,格式为YAML格式. 目录结构 [root@localhost ~]# tree /opt/compose ...

  10. vue 的点击事件怎么获取当前点击的元素

    手机赚钱怎么赚,给大家推荐一个手机赚钱APP汇总平台:手指乐(http://www.szhile.com/),辛苦搬砖之余用闲余时间动动手指,就可以日赚数百元   首先 vue的点击事件 是用 @cl ...