Wechat: yu389741| Email: gisdqy@163.com

Shop:https://www.giserdqy.com/shop

[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