之前在一个专栏课里面看到一个旅游地图相册的 Demo，一直想把它总结下，放到博客里面。
一、底图切换和版权信息，此处调用了七种地图服务，其中前五个使用了插件调用地图底图，最后两个调用 Mapbox 地图底图。
//自定义版权信息
var mapAttr =
'Map data © <a href="https://xiaozhuanlan.com/webgis/">《ocean工作室》</a> contributors, ' +
'<a href="http://ocean.com/">ocean</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>';
//mapbox 地图服务URL
var mapboxUrl =
'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=自己申请的PK值';
// 地图中心点，武汉
var centerPoint = [30.59276, 114.30525];
// 定义两个图层，影像图层和街道图层（这里是用了mapbox地图服务）
//定义图层时把版权信息直接传入
var satellite = L.tileLayer(mapboxUrl, {
id: 'mapbox.satellite',
attribution: mapAttr
});
var streets = L.tileLayer(mapboxUrl, {
id: 'mapbox.streets',
attribution: mapAttr
});
//插件把 定义了多个国内的瓦片图层，我们只需要通过提供的方法访问到相应的图层即可
//从插件代码可以看出 需要传入 providerName.mapName.mapType 从插件代码中查找所需要的值
var geoq = L.tileLayer.chinaProvider('Geoq.Normal.Gray', {
maxZoom: 18,
minZoom: 5
});
var gaode = L.tileLayer.chinaProvider('GaoDe.Normal.Map', {
maxZoom: 18,
minZoom: 5
});
var tianditu = L.tileLayer.chinaProvider('TianDiTu.Terrain.Map', {
maxZoom: 18,
minZoom: 5
});
var google = L.tileLayer.chinaProvider('Google.Satellite.Map', {
maxZoom: 18,
minZoom: 5
});
var osm = L.tileLayer.chinaProvider('OSM.Normal.Map', {
maxZoom: 18,
minZoom: 5
});
// 创建地图
var map = L.map('map', {
center: centerPoint,
zoom: 5,
minZoom: 1,
maxZoom: 16,
attribution: mapAttr,
layers: [satellite, streets,geoq,gaode,tianditu,google,osm]
});
// 通过layer control来实现图层切换UI
// https://leafletjs.com/examples/layers-control/
var baseLayers = {
智图Geoq:geoq,
高德地图:gaode,
天地图:tianditu,
Google地图:google,
OSM地图:osm,
Mapbox影像图: satellite,
Mapbox街道图: streets
};
L.control.layers(baseLayers).addTo(map);
二、图片预览和切换，使用 viewer.js 进行预览大图，如下所示：
**
* veiwerjs预览大图
*/
function viewPic() {
var galley = document.getElementById('galley');
var viewer = new Viewer(galley, {
url: 'data-original',
hidden: function() {
viewer.destroy();
}
});
viewer.show();
}
/**
* 动态拼接html字符串
* @param {string} cityName 城市名称
* @param {*} imgs 足迹点数据中的imgs数组
*/
function generatePicHtml(imgs) {
imgs = imgs || [];
// 动态拼接html字符串
var _html = '<div id="galley"><ul class="pictures" οnclick="viewPic()">';
// 循环图片数组，动态拼接项目的相对地址url
for (var i = 0; i < imgs.length; i++) {
var url = './data/pictures/' + imgs[i];
var display = 'style="display:inline-block"';
// 这里
if (i > 5) {
display = 'style="display:none"';
}
_html +=
'<li ' +
display +
'><img data-original="' +
url +
'" src="' +
url +
'" alt="图片预览"></li>';
}
_html += '</ul></div></div>';
三、结果如下所示（本来录了 GIF 图，太大无法上传）
四、本课程资源：