WebGIS开发基于Openlayers_地图添加与默认控件添加删除

本文介绍了一个使用OpenLayers库创建的可访问地图应用。该应用包括基本的地图操作功能,如缩放、旋转和复位,同时提供了鼠标定位和比例尺控件。通过自定义按钮进行地图操作,增强了地图的交互性和可访问性。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.代码与显示效果

显示效果

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>Accessible Map</title>
		<script src="js/ol/ol-debug.js"></script>
		<link rel="stylesheet" href="js/ol/ol.css"/>
	</head>

	<body>
		<div id="map" class="map" tabindex="0" style="width: 95%;height: 670px;"></div>
		<div style="position: fixed; top: 10px; right: 20px;">
			<button id="zoom-FD">放大</button></br>
			<button id="zoom-SX">缩小</button></br>
			<button id="zoom-XZ">旋转</button></br>
			<button id="zoom-FW">复位</button>
		</div>
		<div id="XYposition" style="position: fixed; bottom: 20px;left: 600px;"></div>

		<script>
			var map = new ol.Map({
				layers: [
					new ol.layer.Tile({
						source: new ol.source.OSM({
							wrapX: false
						})
					})
				],
				target: 'map',
				controls: ol.control.defaults({
					attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
						collapsible: false
					}),
					//清除地图上默认样式(放大、缩小、旋转按钮等)
					attribution: false,
					rotate: false,
					zoom: false
				}),
				view: new ol.View({
					center: [0, 0],
					zoom: 5
				})
			});
			
			//放大
			document.getElementById('zoom-FD').onclick = function() {
				var view = map.getView();
				var zoom = view.getZoom();
				view.setZoom(zoom + 1);
			};

			//缩小
			document.getElementById('zoom-SX').onclick = function() {
				var view = map.getView();
				var zoom = view.getZoom();
				view.setZoom(zoom - 1);
			};

			//复位
			document.getElementById('zoom-FW').onclick = function() {
				var view = map.getView();
				var zoom = view.getZoom();
				view.setZoom(5);
				var center = view.getCenter();
				view.setCenter([0, 0]);
				var  Rotation= view.getRotation();
				view.setRotation(0);

			};

			//旋转
			document.getElementById('zoom-XZ').onclick = function() {
				var view = map.getView();
				var  Rotation= view.getRotation();
				view.setRotation(Rotation+Math.PI/30);
			};

			//添加鼠标定位控件
			map.addControl(new ol.control.MousePosition({
				coordinateFormat: ol.coordinate.createStringXY(4), 
				
				className: 'custom-mouse-position',
				target: document.getElementById('XYposition'), 
			}));
			//添加比例尺控件
			map.addControl(new ol.control.ScaleLine());
			
		</script>
	</body>

</html>

在这里插入图片描述
JS 文件引用可在司马云点击下载,点击链接,下载以下文件并引用;
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值