Openlayers学习之地图比例尺控件

更新时间：2020年09月28日 11:51:27 作者：桃李不言_下自成蹊

这篇文章主要为大家详细介绍了Openlayers学习之地图比例尺控件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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、运行结果

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

如何通过Proxy实现JSBridge模块化封装
这篇文章主要介绍了如何通过Proxy实现JSBridge模块化封装,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2020-10-10
npm安装依赖时出现Peer Dependencies冲突报错解决分析
这篇文章主要为大家介绍了npm安装依赖时出现Peer Dependencies冲突报错解决分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-09-09
electron中获取mac地址的实现示例
在基于Electron的应用中,有一个业务需求是获取物理网卡的Mac地址以用于客户机唯一性识别,本文主要介绍了electron中获取mac地址的实现示例,具有一定的参考价值,感兴趣的可以了解一下
2023-12-12
JavaScript柯里化函数式编程面试详解
这篇文章主要介绍了JavaScript柯里化函数式编程，JS柯里化是前端面试中最常见的问题之一，它可以让你的代码更简洁，工作更高效，感兴趣想要详细了解可以参考下文
2023-05-05
深入理解JavaScript系列(12) 变量对象（Variable Object）
JavaScript编程的时候总避免不了声明函数和变量，以成功构建我们的系统，但是解释器是如何并且在什么地方去查找这些函数和变量呢
2012-01-01
详解可以用在VS Code中的正则表达式小技巧
这篇文章主要介绍了详解可以用在VS Code中的正则表达式小技巧，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-05-05
JavaScript数据结构之栈实例用法
在本篇文章里小编给大家分享了关于JavaScript数据结构之栈实例用法内容，有兴趣的朋友们学习下。
2019-01-01
新鲜出炉的js tips提示效果
提示不难做，那个三角号样式很难调兼容，死了好多脑细胞预览主窗口提示错位，保存本地测比较好。
2011-04-04
javascript 容错处理代码(屏蔽js错误)
有时候大家来浏览网页的时候发现IE浏览器左下角总有个黄色错误标志，有时候更是直接弹出错误无法继续浏览页面，这样对于网站的正规性与权威性发展不利。
2010-04-04
JS非行间样式获取函数的实例代码
这篇文章主要介绍了JS非行间样式获取函数的实现代码，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2018-06-06