WebGis007-基本操作控件

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

_NorthernFish

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

阅读量167

点赞数

文章标签： gis

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

版权

WebGis 专栏收录该内容

16 篇文章 2 订阅

订阅专栏

WebGis007-基本操作控件

创建 operation.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>
		<script src="../../js/jquery-1.11.2.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/jquery-ui.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../../css/jquery-ui.css" />
		<style type="text/css">
			* {
				box-sizing: border-box;
			}

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

			#map {
				height: 100%;
			}
		</style>
	</head>
	<body>
		<h4>基本操作控件</h4>
		<div class="btg">
			<button id="in">放大</button>
			<button id="out">缩小</button>
			<button id="panto">平移到中国</button>
			<button id="restore">复位</button>
		</div>
		<div id="map"></div>
		<script type="text/javascript">
			console.dir(jQuery);

			var map = new ol.Map({
				target: "map",
				layers: [
					new ol.layer.Tile({
						title: "天地图矢量图层",
						source: new ol.source.XYZ({
							url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=9b0042eb1f01265c357f96da559ae11c",
							wrap: false
						})
					}),
					new ol.layer.Tile({
						title: "天地图矢量注记图层",
						source: new ol.source.XYZ({
							url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=9b0042eb1f01265c357f96da559ae11c",
							wrap: false
						})
					})
				],
				view: new ol.View({
					center: [0, 0],
					zoom: 3,
					minZoom: 1,
					maxZoom: 18,
					rotation: Math.PI / 6
				})
			})


			// 获取地图的初始参数
			var view = map.getView();
			var zoom = view.getZoom();
			var center = view.getCenter();
			var rotation = view.getRotation();

			console.log(view);
			console.log(zoom);
			console.log(center);
			console.log(rotation);

			document.querySelector("#in").addEventListener("click", () => {
				let view = map.getView();
				let zoom = view.getZoom();
				view.setZoom(zoom + 1);
			})
			document.querySelector("#out").addEventListener("click", () => {
				let view = map.getView();
				let zoom = view.getZoom();
				view.setZoom(zoom - 1);
			})
			document.querySelector("#panto").addEventListener("click", () => {
				let view = map.getView();
				// 下面代码想是返回一个openLayers默认的EPSG:3857的坐标对象
				let wh = ol.proj.fromLonLat([105, 35])
				view.setCenter(wh)
				view.setZoom(5)
			})
			document.querySelector("#restore").addEventListener("click", () => {
				view.setCenter(center);
				view.setZoom(zoom);
				view.setRotation(rotation);
			})


			// 为内置的缩放控件和旋转空间添加tooltip提示信息
			$(".ol-zoom-in,.ol-zoom-out").tooltip({
				placement: "left"
			});
			$(".ol-rotate-reset,.ol-attribution button[title]").tooltip({
				placement: "right"
			})
		</script>
	</body>
</html>