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、运行结果
地图初始化的时候就能在左下角看见比例尺控件
随着地图的放大和缩小，比例尺的值也会发生相应的改变
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要给大家介绍了关于WPS的JS宏操作方法总结的相关资料,WPS是一款常用的办公软件,其中的JS宏功能可以帮助用户实现自动化操作和批量处理等需求,需要的朋友可以参考下2023-09-09
在开发微信小程序时,有需求需要使用到柱状图,饼图等图表,下面这篇文章主要给大家介绍了关于小程序中使用echarts的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
这篇文章主要介绍了js+html5实现可在手机上玩的拼图游戏,涉及javascript结合html5进行图形操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
这篇文章主要为大家详细介绍了原JS实现banner图的常用功能，，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-06-06
在写原生的Javascript的时候，因为IE的JS引擎与标准浏览器的JS引擎之间总有那么些差异，所以经常会去判断是否是IE浏览器2014-04-04
这篇文章主要为大家详细介绍了js+canvas实现验证码功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-07-07
javascript限制文本框只允许输入数字(曾经与现在的方法对比)
很多时候需要用到限制文本框的数字输入，试过许多方法，都不太理想，遂决定自己实现一个来玩玩,接下来介绍曾经使用过的方法与自定义方法的对比，感兴趣的朋友可以了解下啊2013-01-01
这篇文章主要介绍了js获取当前日期前七天的方法,涉及javascript中for语句及日期操作的技巧,需要的朋友可以参考下2015-02-02
这篇文章主要为大家详细介绍了JS实现拼图游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-12-12
javascript获取网页中指定节点的父节点、子节点的方法小结
如何获取要更新的这些元素呢?用JavaScript获取这些节点的方法有很多种，下面是总结的一些方法，感兴趣的朋友可以参考下哈2013-04-04
最新评论