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模拟弹出效果代码修正版
Aug 07 Javascript
js判断FCKeditor内容是否为空的两种形式
May 14 Javascript
js window.print实现打印特定控件或内容
Sep 16 Javascript
使用Node.js处理前端代码文件的编码问题
Feb 16 Javascript
Bootstrap所支持的表单控件实例详解
May 16 Javascript
浅谈ajax在jquery中的请求和servlet中的响应
Jan 22 jQuery
关于js对textarea换行符的处理方法浅析
Aug 03 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
Aug 09 jQuery
开发用到的js封装方法(20种)
Oct 12 Javascript
前端天气插件tpwidget使用方法详解
Jun 24 Javascript
vue实现图片预览组件封装与使用
Jul 13 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 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
dedecms系统常用术语汇总
2007/04/03 PHP
php 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
PHP基于GD库的缩略图生成代码(支持jpg,gif,png格式)
2014/06/19 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
JQuery 选择和过滤方法代码总结
2010/11/19 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
2011/09/26 Javascript
捕获键盘事件(且兼容各浏览器)
2013/07/03 Javascript
js 文本滚动效果的实例代码
2013/08/17 Javascript
javascript使用定时函数实现跳转到某个页面
2013/12/25 Javascript
Js与下拉列表处理问题解决
2014/02/13 Javascript
jQuery照片伸缩效果不影响其他元素的布局
2014/05/09 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
玩转NODE.JS(四)-搭建简单的聊天室的代码
2016/11/11 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
深入理解vue-loader如何使用
2017/06/06 Javascript
微信小程序支付及退款流程详解
2017/11/30 Javascript
Vue基本使用之对象提供的属性功能
2019/04/30 Javascript
详解ES6新增字符串扩张方法includes()、startsWith()、endsWith()
2020/05/12 Javascript
vue如何搭建多页面多系统应用
2020/06/17 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
Diango + uwsgi + nginx项目部署的全过程(可外网访问)
2018/04/22 Python
python实现人工蜂群算法
2020/09/18 Python
HTML5的postMessage的使用手册
2018/12/19 HTML / CSS
澳大利亚墨尔本的在线时装店:LORETA
2018/09/14 全球购物
本科生求职简历的自我评价
2013/10/21 职场文书
幼儿园教师国培感言
2014/02/02 职场文书
幼儿园元旦家长感言
2014/02/27 职场文书
职工代表大会主持词
2014/04/01 职场文书
市场总经理岗位职责
2014/04/11 职场文书
考博专家推荐信
2014/05/10 职场文书
物理分数没达标检讨书
2014/09/13 职场文书
党员思想汇报材料
2014/12/19 职场文书
保姆聘用合同
2015/09/21 职场文书
vue 自定义组件添加原生事件
2022/04/21 Vue.js