<!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. 微信小程序开发技巧总结 （一）-- 数据传递和存储

    结合自己在平时的开发中遇到的各种问题,和浏览各种问题的解决方案总结出一些自己在日常开发中常用的技巧和知点,希望各位不吝斧正. 1.短生命周期数据存储 以小程序启动到彻底关闭为周期的的数据建议存储在ap ...

  2. layui父子页面方法互调

    父级页面调用子页面方法 layer.open({ type: 2, content: 'test/iframe.html', success: function(layero, index){ var ...

  3. sublime 快捷键 【转】

    Sublime Text 3 快捷键精华版   备用,方便查询 Ctrl+Shift+P:打开命令面板Ctrl+P:搜索项目中的文件Ctrl+G:跳转到第几行Ctrl+W:关闭当前打开文件Ctrl+S ...

  4. python基础之字符串基本功能

    终于还是踏上了Python的不归路,不知道能不能走的完. 先总结一下今天学习的字符串的各个功能吧:只写了部分用的比较多的. 1.capitalize: 字符串首字母大写 >>> na ...

  5. 04-Spring01-IOC

    今日知识 1. Spring IOC控制反转(Inverse of control) 2. Spring DI依赖注入(Dependency Injection ) Spring 1. 概念:简单来说 ...

  6. VFP的数据策略：基础篇

    VFP的数据策略:基础篇 概述 在VFP应用程序中,有很多方法可以访问非VFP数据(如SQL Server):远程视图.SQ LPassthrough.ADO.XML……本文件将审查不同机制的利弊,并 ...

  7. 解决Python2.7的UnicodeEncodeError: 'ascii' codec can't encode异常错误

    UnicodeEncodeError: 'ascii' codec can't encode characters in position 0-2: ordinal not in range(128) ...

  8. 维基逃离MySQL 力挺开源数据库 MariaDB

    近日全球著名百科类网站维基百科宣布,将不会再用MySQL数据库,据国外媒体报道,很多年,MySQL一直是热门的开源数据库,不过在被甲骨文收购后,面临闭源的风险.因此维基百科将切换到另外一款开源数据库M ...

  9. iptables服务器主机防火墙

    iptables参数说明: Commands: Either long or short options are allowed. --append -A chain 链尾部追加一条规则 --dele ...

  10. Unity 编辑器开发SceneView GUI控制

    前几天项目需要就做了个类似于Collider EditCollider的功能 下面是我做的效果 基础代码如下: public class ExportCFGInputWindow : EditorWi ...