Openlayers学习之地图比例尺控件


Posted in Javascript onSeptember 28, 2020

本文实例为大家分享了Openlayers地图比例尺控件的具体代码,供大家参考,具体内容如下

1、新建一个html页面,引入ol.js和ol.css文件,然后在body中创建两个div标签,分别用来作为地图和比例尺控件的容器;

2、代码实现

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title></title>
 <script src="../lib/ol/ol.js"></script>
 <link href="../css/ol.css" rel="stylesheet" />
 <style type="text/css">
 #scalebar
 {
  float:left;
  margin-bottom:10px;
  z-index:2000;
 }
 </style>
 <script type="text/javascript">
 window.onload = function () {
  //实例化比例尺控件
  var scaleLineControl = new ol.control.ScaleLine({
  //设置度量单位为米
  units: 'metric',
  target: 'scalebar',
  className: 'ol-scale-line'
  });
  //实例化地图控件
  var map = new ol.Map({
  target: 'map',
  layers: [
   new ol.layer.Tile({
   source:new ol.source.OSM()
   }),
  ],
  view: new ol.View({
   center: [0, 0],
   zoom:2
  }),
  });
  //将比例尺控件加入到map中
  map.addControl(scaleLineControl);
 };
 </script>
</head>
<body>
 <div id="map"></div>
 <div id="scalebar"></div>
</body>
</html>

3、运行结果

地图初始化的时候就能在左下角看见比例尺控件

Openlayers学习之地图比例尺控件

随着地图的放大和缩小,比例尺的值也会发生相应的改变

Openlayers学习之地图比例尺控件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
文档对象模型DOM通俗讲解
Nov 01 Javascript
jquery链式操作的正确使用方法
Jan 06 Javascript
jQuery使用removeClass方法删除元素指定Class的方法
Mar 26 Javascript
使用AngularJS创建单页应用的编程指引
Jun 19 Javascript
jquery zTree异步加载、模糊搜索简单实例分享
Mar 24 Javascript
详解vue中引入stylus及报错解决方法
Sep 22 Javascript
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
Apr 03 Javascript
Jquery的Ajax技术使用方法
Jan 21 jQuery
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 Javascript
JS实现水平移动与垂直移动动画
Dec 19 Javascript
vue实现一个6个输入框的验证码输入组件功能的实例代码
Jun 29 Javascript
js基于canvas实现时钟组件
Feb 07 Javascript
Openlayers实现地图的基本操作
Sep 28 #Javascript
TypeScript 运行时类型检查补充工具
Sep 28 #Javascript
基于openlayers实现角度测量功能
Sep 28 #Javascript
OpenLayer学习之自定义测量控件
Sep 28 #Javascript
Vue中父子组件的值传递与方法传递
Sep 28 #Javascript
JSONObject与JSONArray使用方法解析
Sep 28 #Javascript
OpenLayer3自定义测量控件MeasureTool
Sep 28 #Javascript
You might like
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
PHP5新特性: 更加面向对象化的PHP
2006/11/18 PHP
php实现简单洗牌算法
2013/06/18 PHP
深入file_get_contents与curl函数的详解
2013/06/25 PHP
解析php session_set_save_handler 函数的用法(mysql)
2013/06/29 PHP
使用PHP静态变量当缓存的方法
2013/11/13 PHP
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
PHP安装BCMath扩展的方法
2019/02/13 PHP
Laravel中validation验证 返回中文提示 全局设置的方法
2019/09/29 PHP
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
js生成随机颜色方法代码分享(三种)
2016/12/29 Javascript
javascript  删除select中的所有option的实例
2017/09/17 Javascript
浅谈JS函数节流防抖
2017/10/18 Javascript
vue 路由嵌套高亮问题的解决方法
2018/05/17 Javascript
使用javascript做在线算法编程
2018/05/25 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
jQuery 选择方法及$(this)用法实例分析
2020/05/19 jQuery
使用typescript快速开发一个cli的实现示例
2020/12/09 Javascript
[54:06]OG vs TNC 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
Python中多线程thread与threading的实现方法
2014/08/18 Python
浅谈Python黑帽子取代netcat
2018/02/10 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
python 利用Pyinstaller打包Web项目
2020/10/23 Python
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
运动会稿件300字
2014/02/14 职场文书
保护环境倡议书500字
2014/05/19 职场文书
文员岗位职责
2015/02/04 职场文书
家属联谊会致辞
2015/07/31 职场文书
病假条格式范文
2015/08/17 职场文书
Pandas||过滤缺失数据||pd.dropna()函数的用法说明
2021/05/14 Python