2.使用OpenLayers6(ol6)加载Mapbox的TileJSON格式地图&&实现点击弹出经纬度信息

文末有源代码下载地址

2.1使用OpenLayers6加载Mapbox的TileJSON格式地图

首先写一下Tile格式和TileJSON格式的区别,Tiles 是传统的瓦片地图服务,Tiles 服务在 OpenLayers 6 中对应的数据源是ol.source.XYZ,如第一篇文章中使用ol6加载天地图和高德地图都属于这一种情况;而TileJSON 是在传统切片地图的基础上,通过 JSON 给出切片 URL,以及与图层紧密关联的约束信息,TileJSON服务在OpenLayers6中对应的数据源是ol.source.TileJSON,画成示意图如下:

这里是一张图片


这里补充一下关于EPSG代号和坐标系之间查询的一个网站:https://epsg.io/

这里是一张图片


下面是实现代码,基本上和前一篇文章的代码结构差不多,核心就是一个ol.Map,只不过注意修改ol.source.TileJSON的位置就可以了,对于使用的地图source的url每一部分的含义,代码中给出了注释。

<!DOCTYPE html>
<html lang="ch">
<head>
	<meta charset="UTF-8">
	<title>加载Mapbox的TileJSON格式地图</title>
	<link href="css/ol.css" rel="stylesheet" type="text/css">
	<script src="libs/ol6/ol.js" type="text/javascript"></script>
	<style>
		#map{
			width: 100%;
			height: 100%;
			position: absolute;
		}
	</style>
</head>
<body>
	<div id="map"></div>
	<script>
		var MapboxLayer=new ol.layer.Tile({
			source: new ol.source.TileJSON({
				//v4表示MapBox的API版本,satellite是地图样式,access_token后面是开发者key,可以在网站进行申请
				url: "https://api.tiles.mapbox.com/v4/mapbox.satellite.json?secure&access_token=这里是您的access_token,也就是所谓的开发者key",
				//对跨域类型属性的一个声明,其实我也不太明白声明这一下的意义,不过还是写上比较好,防止访问不到数据
				crossOrigin: "anonymous"
			})
		})
		var map = new ol.Map({
			layers: [MapboxLayer],
			target: 'map',
			view: new ol.View({
				center: [114.5, 38],
				zoom: 4,
				minZoom:2,
				maxZoom:18,
				projection:'EPSG:4326'
			})
		});
	</script>
</body>
</html>

2.2实现点击弹出经纬度popup的效果

有了上面加载TileJSON地图的基础后,就可以做下面的点击显示经纬度弹窗了,这里需要使用到ol.Layer类的对象,并且与弹出的窗体的DOM对象进行绑定,如下图

这里是一张图片

 详细代码如下图所示

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>实现一个简单的弹出式窗口</title>
	<link href="css/ol.css" rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css">
	<script src="libs/ol6/ol.js" type="text/javascript"></script>

	<style>
		#map{
			width: 100%;
			height: 100%;
			position: absolute;
		}
		.ol_popup {
			position: absolute;
			background-color: #FFFFCC;
			-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
			filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
			padding: 15px;
			border-radius: 10px;
			border: 1px solid #cccccc;
			bottom: 10px;
			left: -50px;
			min-width: 280px;
		}

		.ol_popup:after,
		.ol_popup:before {
			top: 100%;
			border: solid transparent;
			content: " ";
			height: 0;
			width: 0;
			position: absolute;
			pointer-events: none;
		}

		.ol_popup:after {
			border-top-color: white;
			border-width: 10px;
			left: 50px;
			margin-left: -10px;
		}

		.ol_popup:before {
			border-top-color: #cccccc;
			border-width: 10px;
			left: 50px;
			margin-left: -10px;
		}

		.ol_closePopup {
			text-decoration: none;
			position: absolute;
			top: 5px;
			right: 10px;
		}

		.ol_closePopup:after {
			content: "关闭";
		}
	</style>
</head>

<body>
<div id="map" class="map"></div>
<div id="popup" class="ol_popup">
	<a href="#" id="popupClose" class="ol_closePopup"></a>
	<div id="showLonLat"></div>
</div>
<script>

	//对popup需要的DOM对象进行缓存
	var popUpContent = document.getElementById("popup");
	var popUpCloser = document.getElementById("popupClose");
	var showLatLon = document.getElementById("showLonLat");

	//创建一个overlay叠加层
	var overlay = new ol.Overlay({

		//与popup对象进行绑定
		element: popUpContent,

		//当点击位置的弹窗超出显示范围时,会自动平移,且平移动画时常为0.25s
		autoPan: true,
		autoPanAnimation: {
			duration: 250
		}
	});

	//对于弹窗,为点击“关闭"事件添加一个关闭的处理函数
	popUpCloser.onclick = function () {
		overlay.setPosition(undefined);
		popUpCloser.blur();
		return false;
	};

	var map = new ol.Map({
		layers: [
			new ol.layer.Tile({
				source: new ol.source.TileJSON({
					url:
						"https://api.tiles.mapbox.com/v4/mapbox.satellite.json?secure&access_token=这里是您的access_token,也就是开发者key",
					crossOrigin: "anonymous"
				})
			})
		],
		//类似于layers,有几个layer就有几个数组元素,这里有几个overlays就有几个overlay的数组元素
		overlays: [overlay],
		target: "map",
		view: new ol.View({
			center: [0, 0],
			zoom: 2
		})
	});

	//对map对象添加一个单击则显示弹窗的事件响应函数
	map.on("singleclick", function (evt) {

		//获取点击时的位置坐标,此时是3857坐标系,是XY坐标
		var coordinate = evt.coordinate;

		//转换为经纬度坐标并格式化
		var LonLat = ol.coordinate.toStringHDMS(ol.proj.toLonLat(coordinate));
		showLatLon.innerHTML = "<p>此处的坐标是:</p><code>" + LonLat + "</code>";
		overlay.setPosition(coordinate);
	});

</script>
</body>

</html>

源码下载地址:

链接:https://pan.baidu.com/s/1cfDXtJVwMnCNwtuuI9fv9g 
提取码:7u61

相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页