WebGis010-比例尺控件

最新推荐文章于 2022-04-30 11:58:44 发布

_NorthernFish

最新推荐文章于 2022-04-30 11:58:44 发布

阅读量307

点赞数

文章标签： gis

本文链接：https://blog.csdn.net/weixin_40625332/article/details/118177418

版权

WebGis 专栏收录该内容

16 篇文章 2 订阅

订阅专栏

WebGis010-比例尺控件

比例尺控件用来表示地图上距离相对于实际地图缩小/放大的程度。openLayers同样提供有比例尺控件ol.control.ScaleLine。

创建地图对象
创建比例尺控件对象并设置相关可变参数
将比例尺控件添加到地图对象中去（当然还是可以在地图构造方法中定义）
在mapControls文件夹下创建scaleLine.html文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="../../css/ol.css" />
		<script src="../../js/ol.js" type="text/javascript" charset="utf-8"></script>

		<style type="text/css">
			* {
				box-sizing: border-box;
			}

			body {
				margin: 0px;
				padding: 0px;
				height: 100vh;
			}

			#map {
				width: 100%;
				height: 100%;
			}
		</style>
	</head>
	<body>
		<h4>比例尺控件</h4>
		<div id="map"></div>
		<script type="text/javascript">
			// 创建比例尺
			var scaleLineControl = new ol.control.ScaleLine({
				/**
				 * 比例尺单位
				 * degress : 可表经纬度，经纬度和米的换算与投影相关
				 * us : 美制
				 * nautical : 海制
				 * metric : 米-该是公制才对
				 */
				units: "metric",
			});

			// 创建地图对象
			var map = new ol.Map({
				target: "map",
				layers: [
					// 为演示方便，仅添加一个基础图层
					new ol.layer.Tile({
						titlel: "天地图矢量地图",
						source: new ol.source.XYZ({
							url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=9b0042eb1f01265c357f96da559ae11c",
							wrapX: false
						})
					})
				],
				view: new ol.View({
					// ol默认使用EPSG:3587坐标系，但是用起来不方便
					// 直接采用EPSG:4326坐标系，会把地图压扁变形
					// 为了更好的展示效果，采用ol.proj.transform([待转坐标],"原始类型","目标类型")
					center: ol.proj.transform([112.3896, 34.6529], "EPSG:4326", "EPSG:3857"),
					zoom: 15
				}),
				// 配置控制器
				controls: ol.control.defaults().extend([scaleLineControl])
			});
		</script>
	</body>
</html>