基于leftlet的旅游地图相册

之前在一个专栏课里面看到一个旅游地图相册的 Demo，一直想把它总结下，放到博客里面。

一、底图切换和版权信息，此处调用了七种地图服务，其中前五个使用了插件调用地图底图，最后两个调用 Mapbox 地图底图。

//自定义版权信息
var mapAttr =
    'Map data &copy; <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"  onclick="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 图，太大无法上传）

四、本课程资源：

travel-map-ocean.rar