OpenLayers官方示例详解十五之比例尺控件（Scale Line）

一、示例简介

二、代码详解

一、示例简介

本示例展示了如何创建一个比例尺控件（ol.control.ScaleLine），同时让比例尺控件的单位根据用户的选择而改变。

OpenLayers中比例尺控件支持的单位有：

metric —— 通用的，以千米为单位
us —— 美国单位
nautical —— 航海单位
imperial —— 英制单位
degrees —— 以度、分、秒为单位

二、代码详解

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Scale Line</title><link href="ol_v5.0.0/css/ol.css" rel="stylesheet" type="text/css" /><script src="ol_v5.0.0/build/ol.js" type="text/javascript"></script>
</head>
<body><div id="map"></div><select id="units"><option value="degrees">degrees</option><option value="imperial">imperial inch</option><option value="us">us inch</option><option value="nautical">nautical mile</option><option value="metric" selected>metric</option></select><script>// 创建一个比例尺控件var scaleLineControl = new ol.control.ScaleLine({units: 'metric'             // 比例尺默认的单位});var map = new ol.Map({target: 'map',controls: ol.control.defaults().extend([scaleLineControl        // 将比例尺控件添加到地图中]),layers: [new ol.layer.Tile({source: new ol.source.OSM()})],view: new ol.View({center: [0, 0],zoom: 2})});var unitsSelect = document.getElementById('units');// 让地图的比例尺单位根据用户的选择而改变unitsSelect.addEventListener('change', function(){scaleLineControl.setUnits(unitsSelect.value);}, false);</script>
</body>
</html>

OpenLayers官方示例详解十五之比例尺控件（Scale Line）相关推荐

OpenLayers官方示例详解七之图层的最小、最大分辨率（Layer Min/Max Resolution）
目录一.示例简介二.代码详解一.示例简介这个示例加载了一个MapBox的瓦片图层和一个Open Street Map的瓦片图层,同时使用最小.最大分辨率限制图层加载的比例级别. 使用鼠标放大两 ...
OpenLayers官方示例详解六之线串箭头样式（LineString Arrows）
目录一.示例简介二.代码详解三.总结一.示例简介为每一个线串(LineString)的子线段绘制箭头. 二.代码详解 <!DOCTYPE html> <html lang= ...
viewstate 解码 php,.NET_asp.net中ViewState的用法详解，在web窗体控件设置为runat = serv - phpStudy...
asp.net中ViewState的用法详解在web窗体控件设置为runat = "server",这个控件会被附加一个隐藏的属性_ViewState,_ViewState存放了 ...
wpf 客户端【JDAgent桌面助手】开发详解（四） popup控件的win8.0的bug
目录区域: 业余开发的wpf 客户端终于完工了..晒晒截图 wpf 客户端[JDAgent桌面助手]开发详解-开篇 wpf 客户端[JDAgent桌面助手]详解(一)主窗口圆形菜单... wpf 客 ...
Unity之表皮着色器官方示例详解
下面是一些表面着色器(Surface Shaders)的示例.下面的示例都是使用的内置光照模式(lighting models),关于如何实现自定义光照模式可以参考表面着色器光照范例(Surface ...
IgH详解十五、igh线缆冗余
线缆冗余是为了应对EtherCAT通信线缆断开的补救措施.通常环形拓扑结构就要用到线缆冗余.如果环线在一些点中断,仍然可以达到两个分支. 如果一个线缆断开,则在断开的线缆两端的帧将分别被处理.因此这两 ...
delphi 窗体透明详解TransparentColorValue，窗体透明控件不透明
关于窗体透明的做法来自:http://blog.csdn.net/shuaihj/article/details/8610343 关于窗体透明的做法 1.在Delphi中,设置窗体的AlphaBle ...
图文详解asp.net自带控件
1 Button类控件三种button控件: <asp:Button ID="Button1" runat="server" OnClick=" ...
C#学习（十五）——窗体控件用法大全
C#控件及常用设计整理 1.窗体 1.1.常用属性** (1)Name属性:用来获取或设置窗体的名称,在应用程序中可通过Name属性来引用窗体. (2) WindowState属性: 用来获取或设置窗 ...
android include 控件详解,Android开发中include控件用法分析
本文实例讲述了Android开发中include控件用法.分享给大家供大家参考,具体如下: 我们知道,基于Android系统的应用程序的开发,界面设计是非常重要的,它关系着用户体验的好坏.一个好的界面 ...

OpenLayers官方示例详解十五之比例尺控件（Scale Line）

一、示例简介

二、代码详解

OpenLayers官方示例详解十五之比例尺控件（Scale Line）相关推荐

最新文章

热门文章