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 相关文章推荐
Javascript的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
prototype Element学习笔记(篇一)
Oct 26 Javascript
表单类各种类型(文本框)失去焦点效果jquery代码
Apr 26 Javascript
原生Js实现元素渐隐/渐现(原理为修改元素的css透明度)
Jun 24 Javascript
jquery中get,post和ajax方法的使用小结
Feb 04 Javascript
Javascript字符串浏览器兼容问题分析
Dec 01 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
最丑的时钟效果!js canvas时钟制作方法
Aug 15 Javascript
详解vue.js的devtools安装
May 26 Javascript
vue高德地图之玩转周边
Jun 16 Javascript
JavaScript实现为事件句柄绑定监听函数的方法分析
Nov 14 Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 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 strstr 函数判断字符串是否否存在的实例代码
2013/09/28 PHP
javascript判断chrome浏览器的方法
2014/03/26 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
js禁止页面刷新与后退的方法
2015/06/08 Javascript
javascript数组去重的六种方法汇总
2015/08/16 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
jQuery基于函数重载实现自定义Alert函数样式的方法
2016/07/27 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
实例分析js事件循环机制
2017/12/13 Javascript
微信小程序错误this.setData报错及解决过程
2019/09/18 Javascript
在layui框架中select下拉框监听更改事件的例子
2019/09/20 Javascript
jQuery实现放大镜案例
2020/10/19 jQuery
vue制作toast组件npm包示例代码
2020/10/29 Javascript
解决antd datepicker 获取时间默认少8个小时的问题
2020/10/29 Javascript
[02:17]DOTA2亚洲邀请赛 RAVE战队出场宣传片
2015/02/07 DOTA
Python兔子毒药问题实例分析
2015/03/05 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
用python打印1~20的整数实例讲解
2019/07/01 Python
python实现比对美团接口返回数据和本地mongo数据是否一致示例
2019/08/09 Python
Python 类的私有属性和私有方法实例分析
2019/09/29 Python
Python3标准库之threading进程中管理并发操作方法
2020/03/30 Python
浅谈在django中使用filter()(即对QuerySet操作)时踩的坑
2020/03/31 Python
pytorch随机采样操作SubsetRandomSampler()
2020/07/07 Python
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
校班主任推荐信范文
2013/12/03 职场文书
2014道德模范事迹材料
2014/02/16 职场文书
工程类专业自荐信范文
2014/03/09 职场文书
团日活动总结
2014/04/28 职场文书
委托证明模板
2014/09/16 职场文书
2014年村委会工作总结
2014/11/24 职场文书
2015年社区综治宣传月活动总结
2015/03/25 职场文书
2016年教师政治思想表现评语
2015/12/02 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL