文章目录
Web应用
使用 Mapbox GL JS 构建商店定位器
实现思路
- 初始化地图
- 加载商店geojson数据
- 创建商店列表
- 添加事件监听(商店列表点击事件和地图点击事件)
- 添加交互(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属性,使用内置标签渲染点的样式
创建商店列表
遍历点数据的属性,将相应的描述以列表的形式展示出来
添加事件监听(商店列表点击事件和地图点击事件)
- 商店列表点击事件
将当前点击的商店位置显示到地图中心
关闭其他所有的弹出窗口并显示新的弹出窗口
移除所有的高亮显示并高亮显示新的链接 - 地图点击事件
将当前点击的商店位置显示到地图中心
关闭其他所有的弹出窗口并显示新的弹出窗口
移除所有的高亮显示并高亮显示新的链接
两个事件监听的前两个的步骤都是相同的,可以封装成交互方法,分别调用。
添加交互(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点击事件)
- 商店列表点击事件(略)
- 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');
});