<!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. 编写SQL语句（快速回顾）

    注:源自于<Java程序员面试秘笈>! 1.创建数据库MYDB create database MYDB 2.创建学生表student (sno,sname,ssex,sage,sclas ...

  2. urllib 模块 - module urllib

    urllib 模块 - urllib module 获取 web 页面, html = urllib.request.urlopen("http://www.zzyzz.top/" ...

  3. [Effective Java 读书笔记] 第二章 创建和销毁对象 第一条

    第二章  创建和销毁对象 第一条 使用静态工厂方法替代构造器,原因: 静态工厂方法可以有不同的名字,也就是说,构造器只能通过参数的不同来区分不同的目的,静态工厂在名字上就能表达不同的目的 静态工厂方法 ...

  4. 网站windows可以访问mac和linux无法访问【MTU MSS问题】

    环境: 阿里云LB 内网地址类型,代理后面的k8s上的服务 公司和阿里云之间vpn打通 在windows上进行访问一切正常,在相同的办公局域网linux主机内访问不通,mac笔记本访问同样不通,tel ...

  5. Nexus 安装

    Windows下安装Nexus OSS 3.12.1 1. Nexus 下载 到sonatype官网下载开源免费的OSS版本.OSS即为Open Source Software. 下载地址:https ...

  6. JavaScript中，数组和对象的遍历方法总结

    循环遍历是写程序很频繁的操作,JavaScript 提供了很多方法来实现. 这篇文章将分别总结数组和对象的遍历方法,新手可以通过本文串联起学过的知识. 数组遍历 方法一:for 循环 for 循环是使 ...

  7. Angular 从入坑到挖坑 - 组件食用指南

    一.Overview angular 入坑记录的笔记第二篇,介绍组件中的相关概念,以及如何在 angular 中通过使用组件来完成系统功能的实现 对应官方文档地址: 显示数据 模板语法 用户输入 组件 ...

  8. REDTEAM 指南---第四章 外部侦察

    第四章 外部侦察 贡献者:Haythem Arfaoui 翻译BugMan 主动侦察 介绍 主动足迹涉及使用可以帮助您收集更多信息的工具和技术 有关目标的信息.与被动足迹不同的是,过程永远不会“触及” ...

  9. vs code支持 es6, node.js 语法提示

    npm install --save-dev @types/node 安装这个东西就可以了, 代码拷走, 回去愉快的敲代码吧

  10. session和cookie的最深刻理解

    先说session 对SESSION的争论好象一直没有停止过,不过幺麽能理解SESSION的人应该占90以上.但还是讲讲,别嫌老~ 有一些人赞成用SESSION,有一些人不赞成.但这个问题到底要怎么说 ...