Mapbox 笔记2（Web应用——构建商店定位器）

Web应用

使用 Mapbox GL JS 构建商店定位器

实现思路

1. 初始化地图
2. 加载商店geojson数据
3. 创建商店列表
4. 添加事件监听（商店列表点击事件和地图点击事件）
5. 添加交互（flyToStore方法和createPopUp方法）

第一种 加载内置标签

初始化地图

mapboxgl.accessToken = ' YOUR_ACCESS_TOKEN';
// 在页面中添加一个地图
var map = new mapboxgl.Map({
  // HTML中所包含的容器ID
  container: 'map',
  // 风格URL
  style: 'mapbox://styles/mapbox/light-v9',
  // 初始化的位置用[x, y]格式标记
  center: [-77.034084, 38.909671],
  // 初始的缩放层级
  zoom: 14
});

加载商店geojson数据

map.on('load', function(e) {
  // 向地图中添加数据图层
  map.addLayer({
    id: 'locations',
    type: 'symbol',
    // 添加包含有坐标和附加信息的GeoJSON数据源
    source: {
      type: 'geojson',
      data: stores
    },
    layout: {
      'icon-image': 'restaurant-15',
      'icon-allow-overlap': true
    }
  });
});

• stores：geojson格式的点数据
• 定义type为symbol（表示图表或文本）图层来渲染点数据，
• 在addLayer方法中设置layout的icon-image属性，使用内置标签渲染点的样式

创建商店列表

遍历点数据的属性，将相应的描述以列表的形式展示出来

添加事件监听（商店列表点击事件和地图点击事件）

1. 商店列表点击事件
   将当前点击的商店位置显示到地图中心
   关闭其他所有的弹出窗口并显示新的弹出窗口
   移除所有的高亮显示并高亮显示新的链接
2. 地图点击事件
   将当前点击的商店位置显示到地图中心
   关闭其他所有的弹出窗口并显示新的弹出窗口
   移除所有的高亮显示并高亮显示新的链接

两个事件监听的前两个的步骤都是相同的，可以封装成交互方法，分别调用。

添加交互（flyToStore方法和createPopUp方法）

function flyToStore(currentFeature) {
  map.flyTo({
    center: currentFeature.geometry.coordinates,
    zoom: 15
  });
}
 
function createPopUp(currentFeature) {
  var popUps = document.getElementsByClassName('mapboxgl-popup');
  // 我们需要检查并移除已经存在的弹出窗口
  if (popUps[0]) popUps[0].remove();
 
  var popup = new mapboxgl.Popup({ closeOnClick: false })
    .setLngLat(currentFeature.geometry.coordinates)
    .setHTML(
      '<h3>Sweetgreen</h3>' +
        '<h4>' +
        currentFeature.properties.address +
        '</h4>'
    )
    .addTo(map);
}

• flyTo：地图的跳跃方法，可配置多种动画、位置等参数
• Popup弹框是自定义的HTML DOM元素，可自定义它的css样式
• 以上两个方法的具体配置参数，可见各自的API

第二种 加载自定义标签

添加商店geojson数据

map.addSource('places', {
  type: 'geojson',
  data: stores
});

• 此处只添加addSource方法，删去第一种方法中的addLayer方法，Layer和Source并不是从属关系，Source可以单独添加，这点与openlayers不同

创建商店列表（略）

添加自定义Marker

stores.features.forEach(function(marker) {
  // 给标签创建一个div
  var el = document.createElement('div');
  // Add a class called 'marker' to each div
  el.className = 'marker';
  // 图片默认为中心显示。您可以调整显示的中心。
  // 创建自定义标签，调整中心位置，然后添加到地图中
  new mapboxgl.Marker(el, { offset: [0, -23] })
    .setLngLat(marker.geometry.coordinates)
    .addTo(map);
});

• 通过mapboxgl.Marker，创建自定义标签，mapboxgl.Marker() 仅仅是 HTML DOM 元素，它可以进一步通过 CSS 来定义样式。

添加事件监听（商店列表点击事件和Marker点击事件）

1. 商店列表点击事件（略）
2. Marker点击事件
   通过addEventListener将事件绑定到每个Marker的HTML DOM 元素即可

el.addEventListener('click', function(e) {
  var activeItem = document.getElementsByClassName('active');
  // 1. 地图重定位
  flyToStore(marker);
  // 2. 关闭其他所有的弹出窗口并显示新的弹出窗口
  createPopUp(marker);
  // 3. 移除所有的高亮显示并高亮显示新的链接
  e.stopPropagation();
  if (activeItem[0]) {
    activeItem[0].classList.remove('active');
  }
  var listing = document.getElementById('listing-' + i);
  console.log(listing);
  listing.classList.add('active');
});