<!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. Go语言实现：【剑指offer】二叉树的下一个结点

    该题目来源于牛客网<剑指offer>专题. 给定一个二叉树和其中的一个结点,请找出中序遍历顺序的下一个结点并且返回. 注意,树中的结点不仅包含左右子结点,同时包含指向父结点的指针. Go语 ...

  2. linux命令之---ping

    1)命令简介 ping命令用来测试主机之间网络的连通性.执行ping指令会使用ICMP传输协议,发出要求回应的信息,若远端主机的网络功能没有问题,就会回应该信息,因而得知该主机运作正常. 2)命令参数 ...

  3. Python3(十一) 原生爬虫

    一.爬虫实例 1.原理:文本分析并提取信息——正则表达式. 2.实例目的:爬取熊猫TV某个分类下面主播的人气排行 分析网站结构 操作:F12查看HTML信息,Ctrl+Shift+C鼠标选取后找到对应 ...

  4. javascript 完全正确的数据库indexedDB

    //indexedDB var dbName = 'whx', version = '1', dbTableName = 'bbg', request, db, conCls, updateKey, ...

  5. 学习MVC框架，处理分页和删除分页转跳的问题

    第一次写博客,文采不好请多见谅,这里主要是写一下,自己是如何处理分页问题,我想初学者也遇到过这个问题. 分页的情况下,编辑信息有返回和编辑2个按钮,操作后都是应该返回原分页界面,使用TempData把 ...

  6. 计算机网络 From Mr.Liu

    引言 本博客摘自Mr.Liu,原帖请点击这里. 感谢Mr.Liu,这个文章很充分的描述了计算机网络的核心知识点. 我还在学习中,所以没有进行自己的转述.图片因为是copy代码而没有获得,想看更详尽的, ...

  7. 远程连接Linux下mysql报10061

    最近接到一个新活,四台Linux服务器配置MySQL热机双备+IP隧道LVS集群服务,尽管好想使个眼神杀死老大,但特么心里是感激的.不多说一口气装了n个Ubuntu-server. 每次在虚拟机装完M ...

  8. LINQ标准查询运算符的执行方式-延时之流式处理

    linq的延时执行是指枚举时才去一个个生成结果元素. 流式处理是linq延时执行的一种,在生成元素前不需要获取所有源元素,只要获取到的源元素足够计算时,便生成结果元素. 流式处理的标准查询运算符返回值 ...

  9. JAVA架构之单点登录 任务调度 权限管理 性能优化大型项目实战

    单点登录SSO(Single Sign On)说得简单点就是在一个多系统共存的环境下,用户在一处登录后,就不用在其他系统中登录,也就是用户的一次登录能得到其他所有系统的信任.单点登录在大型网站里使用得 ...

  10. GO的方法值和方法表达式用法

    手册上关于这块的解释感觉不是很详细清晰,经过几个示例自己总结了下这块的用法. 方法表达式:说简单点,其实就是方法对象赋值给变量. 这里有两种使用方式: 1)方法值:隐式调用, struct实例获取方法 ...