[1]openlayers API之地图比例尺ScaleLine

最新推荐文章于 2024-12-17 10:35:29 发布

NancyHelloWorld

最新推荐文章于 2024-12-17 10:35:29 发布

阅读量3.7k

点赞数

分类专栏：地图可视化文章标签： openlayers3

本文链接：https://blog.csdn.net/NancyHelloWorld/article/details/53506796

版权

本文介绍了如何使用OpenLayers3的ScaleLine控件在地图中添加比例尺，参照《WebGIS之OpenLayers全面解析》一书，通过示例展示如何在加载OSM地图后，在左下角添加比例尺。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

参考书籍《WebGIS之OpenLayers全面解析》，研究OpenLayers的API，做一些exercise。

地图比例尺表示地图上距离按一定比例比实际缩小的程度，表示为地图的缩小程度，又称为缩尺，这里用到的OpenLayers3封装的比例尺控件ol.control.ScaleLine。

本例在加载OSM地图的基础上加载比例尺控件，显示在地图容器的左下角。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ScaleLine</title>
<script type="text/javascript" src="js/ol.js"></script>
<link href="css/ol.js" rel="stylesheet" type="text/css"/>
<style type="text/css">
#map{
    width:1000px;
    height:500px;
    margin-top:10px;
    margin-left:10px;
}
#scale-line{
    width:100px;
    height:20px;
    float:left;
    position:absolute;
    top:480px;
    z-index:2000;
}
.custom-scale-line{
    font-size:16px;
    background:black;
    color:white;
    font-family:"微软雅黑";
    
}
</style>