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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
顶部缓冲下拉菜单导航特效的JS代码
Aug 27 Javascript
js实现的二分查找算法实例
Jan 21 Javascript
jQuery获得字体颜色16位码的方法
Feb 20 Javascript
基于JS实现EOS隐藏错误提示层代码
Apr 25 Javascript
原生态js,鼠标按下后,经过了那些单元格的简单实例
Aug 11 Javascript
AngularJS表单详解及示例代码
Aug 17 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
用JS实现简单的登录验证功能
Jul 28 Javascript
vue 2.0 购物车小球抛物线的示例代码
Feb 01 Javascript
react写一个select组件的实现代码
Apr 03 Javascript
javascript用defineProperty实现简单的双向绑定方法
Apr 03 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
用PHP函数解决SQL injection
2006/10/09 PHP
简单的过滤字符串中的HTML标记
2006/12/25 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
PHP面向对象程序设计实例分析
2016/01/26 PHP
PHP内核学习教程之php opcode内核实现
2016/01/27 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
PHP用函数嵌入网站访问量计数器
2017/10/27 PHP
PhpStorm 如何优雅的调试Hyperf的方法步骤
2019/11/24 PHP
javaScript Array(数组)相关方法简述
2009/07/25 Javascript
javascript实现可拖动变色并关闭层窗口实例
2015/05/15 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
js贪吃蛇网页版游戏特效代码分享(挑战十关)
2015/08/24 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
echarts饼图扇区添加点击事件的实例
2017/10/16 Javascript
解决Vue.js 2.0 有时双向绑定img src属性失败的问题
2018/03/14 Javascript
JS实现点击生成UUID的方法完整实例【基于jQuery】
2019/06/12 jQuery
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
Python面向对象编程基础解析(一)
2017/10/26 Python
利用 python 对目录下的文件进行过滤删除
2017/12/27 Python
matlab中实现矩阵删除一行或一列的方法
2018/04/04 Python
python计算波峰波谷值的方法(极值点)
2020/02/18 Python
Python reversed函数及使用方法解析
2020/03/17 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
Hotels.com爱尔兰:全球酒店预订
2017/02/24 全球购物
幼师岗位求职简历的自荐信格式
2013/09/21 职场文书
面试自我介绍演讲稿
2014/04/29 职场文书
地质工程专业毕业生求职信
2014/08/08 职场文书
2014年财政所工作总结
2014/11/22 职场文书
公务员个人年终总结
2015/02/12 职场文书
优化经济发展环境工作总结
2015/08/11 职场文书
MySQL root密码的重置方法
2021/04/21 MySQL
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技