Openlayers学习之地图比例尺控件
作者：桃李不言_下自成蹊 时间：2024-04-10 10:36:59
本文实例为大家分享了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、运行结果
地图初始化的时候就能在左下角看见比例尺控件
随着地图的放大和缩小，比例尺的值也会发生相应的改变
来源：https://blog.csdn.net/SmileCoffin/article/details/54963428
标签：Openlayers,地图,比例尺
0
投稿猜你喜欢
python抓取网页中的图片示例
2022-02-24 20:07:22
Ethnique公司logo设计过程和思路
2009-09-19 17:04:00
TensorFlow安装并在Pycharm搭建环境的详细图文教程
2023-09-12 16:34:00
JScript 的内存回收
2007-10-16 20:02:00
vue中的插槽详解
2024-05-03 15:08:50
MySQL启用慢查询日志记录方法
2024-01-25 11:42:16
CentOS7中使用shell脚本安装python3.8环境(推荐)
2022-08-24 17:04:24
YUI3设计中的激进和妥协
2010-01-17 09:59:00
python 3调用百度OCR API实现剪贴板文字识别
2022-12-13 19:01:14
mysql 中文乱码 解决方法集锦
2024-01-28 06:05:29
SQL SERVER 2012新增函数之逻辑函数CHOOSE详解
2024-01-15 10:04:06
IE6局部调用PNG32合并图片
2009-03-11 21:24:00
Python做图像处理及视频音频文件分离和合成功能
2022-07-31 14:58:05
Bootstrap实现登录校验表单(带验证码)
2024-05-10 14:08:37
一次性压缩Sqlserver2005中所有库日志的存储过程
2024-01-28 13:40:13
Python中for循环和while循环的基本使用方法
2021-02-21 01:29:48
python的pdb调试命令的命令整理及实例
2022-10-01 01:47:12
python实现监控阿里云账户余额功能
2022-08-19 23:43:32
python中执行smtplib失败的处理方法
2023-03-31 17:41:35
PyCharm-错误-找不到指定文件python.exe的解决方法
2022-04-20 00:48:10
