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 相关文章推荐
动态加载js的几种方法
Oct 23 Javascript
遍历jquery对象的代码分享
Nov 02 Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 Javascript
JS控制文本框textarea输入字数限制的方法
Jun 17 Javascript
java中String类型变量的赋值问题介绍
Mar 23 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
JavaScript开发Chrome浏览器扩展程序UI的教程
May 16 Javascript
基于Vuejs和Element的注册插件的编写方法
Jul 03 Javascript
利用Angular7开发一个Radio组件的全过程
Jul 11 Javascript
JavaScript变量基本使用方法实例分析
Nov 15 Javascript
使用Element的InfiniteScroll 无限滚动组件报错的解决
Jul 27 Javascript
vue首次渲染全过程
Apr 21 Vue.js
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
百度实时推送api接口应用示例
2014/10/21 PHP
在Laravel5中正确设置文件权限的方法
2019/05/22 PHP
IE6、IE7中setAttribute不支持class/for/rowspan/colspan等属性
2011/08/28 Javascript
使用GruntJS构建Web程序之安装篇
2014/06/04 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
jQuery表单元素选择器代码实例
2017/02/06 Javascript
npm全局模块卸载及默认安装目录修改方法
2018/05/15 Javascript
在Mac下彻底卸载node和npm的方法
2018/05/16 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
IE11下CKEditor在Bootstrap Modal中下拉问题的解决
2019/09/25 Javascript
vue实现Input输入框模糊查询方法
2021/01/29 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
2019/11/18 jQuery
如何利用 JS 脚本实现网页全自动秒杀抢购功能
2020/10/12 Javascript
如何构建一个Vue插件并生成npm包
2020/10/26 Javascript
Python下的subprocess模块的入门指引
2015/04/16 Python
python采集百度百科的方法
2015/06/05 Python
简单总结Python中序列与字典的相同和不同之处
2016/01/19 Python
Python利用递归和walk()遍历目录文件的方法示例
2017/07/14 Python
Python将DataFrame的某一列作为index的方法
2018/04/08 Python
解决pycharm下os.system执行命令返回有中文乱码的问题
2019/07/07 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
利用python计算时间差(返回天数)
2019/09/07 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
python爬取”顶点小说网“《纯阳剑尊》的示例代码
2020/10/16 Python
英语专业学生个人求职信范文
2014/01/06 职场文书
送餐员岗位职责范本
2014/02/21 职场文书
保证书范文大全
2014/04/28 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
班主任自我评价范文
2015/03/11 职场文书
采购内勤岗位职责
2015/04/13 职场文书
写给同事的离职感言
2015/08/04 职场文书
2016国庆节67周年寄语
2015/12/07 职场文书
初一英语教学反思
2016/02/15 职场文书
Python 读取千万级数据自动写入 MySQL 数据库
2022/06/28 Python
MyBatis在注解上使用动态SQL方式(@select使用if)
2022/07/07 Java/Android