[1]openlayers API之地图比例尺ScaleLine
参考书籍《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>
</head>
<body>
<div id="map">
<div id="scale-line"></div>
</div>
<script type="text/javascript">
//实例化比例尺控件
var scaleLineControl = new ol.control.ScaleLine({
units:"metric", //设置比例尺单位，有degrees、imperial、us、nautical或metric
className: 'custom-scale-line', //设置比例尺的样式
target: document.getElementById('scale-line') //显示比例尺的目标容器
});
//实例化map对象加载地图
var map = new ol.Map({
target:'map', //地图的目标容器
//加载地图图层
layers: [
new ol.layer.Tile({ //加载瓦片图层数据
source: new ol.source.OSM() //数据源，加载OSM瓦片
})
],
//地图视图设置
view: new ol.View({
center: [0, 0], //地图初始中心点
zoom:2 //地图初始显示级别
}),
//加载控件到地图容器
//加载比例尺控件
controls:ol.control.defaults().extend([scaleLineControl])
});
</script>
</body>
</html>转载自：https://blog.csdn.net/NancyHelloWorld/article/details/53506796
