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

最新推荐文章于 2024-02-28 11:43:46 发布

NancyHelloWorld

最新推荐文章于 2024-02-28 11:43:46 发布

阅读量3.6k

点赞数

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

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

版权

参考书籍《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>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

NancyHelloWorld

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[1]openlayers API之地图比例尺ScaleLine

参考书籍《WebGIS之OpenLayers全面解析》，研究OpenLayers的API，做一些exercise。地图比例尺表示地图上距离按一定比例比实际缩小的程度，表示为地图的缩小程度，又称为缩尺，这里用到的OpenLayers3封装的比例尺控件ol.control.ScaleLine。本例在加载OSM地图的基础上加载比例尺控件，显示在地图容器的左下角。S
复制链接

扫一扫