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.25sautoPan: 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