WebGis012-全屏地图控件

最新推荐文章于 2024-04-16 18:18:21 发布

_NorthernFish

最新推荐文章于 2024-04-16 18:18:21 发布

阅读量270

点赞数

文章标签： gis

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

版权

WebGis 专栏收录该内容

16 篇文章 2 订阅

订阅专栏

WebGis012-全屏地图控件

很多时候在查阅地图时需要放大到全屏显示，可以扩大视野范围，便于更好的操作地图。ol5.x提供了ol.control.FullScreen控件，该控件仅支持非IE内核的浏览器，不过现在IE也用chroinum内核了。

在mapControls文件夹下创建fullScreen.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 map = new ol.Map({
				target: 'map',
				layers: [
					new ol.layer.Tile({
						title: "天地图矢量地图",
						source: new ol.source.XYZ({
							url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=9b0042eb1f01265c357f96da559ae11c"
						})
					})
				],
				view: new ol.View({
					center: ol.proj.transform([112, 34.8], "EPSG:4326", "EPSG:3857"),
					zoom: 15
				})
			});

			// 创建全屏空间
			var fullScreenControl = new ol.control.FullScreen({

			})

			// 地图和控件进行绑定
			map.addControl(fullScreenControl)
		</script>

	</body>
</html>

效果如下图

_NorthernFish

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebGis012-全屏地图控件

WebGis012-全屏地图控件很多时候在查阅地图时需要放大到全屏显示，可以扩大视野范围，便于更好的操作地图。ol5.x提供了ol.control.FullScreen控件，该控件仅支持非IE内核的浏览器，不过现在IE也用chroinum内核了。在mapControls文件夹下创建fullScreen.html文件创建地图创建全屏控件地图和控件绑定<!DOCTYPE html><html> <head> <meta chars
复制链接

扫一扫