白色背景的 Mapbox 地图

在某些情况下,我们需要在显示地图内容的时候,不显示地图背景

比如:只需要白色背景


首先,使用 mapbox 初始化地图

1
2
3
4
5
6
// 配置 token
L.mapbox.accessToken = 'xxx';

// 根据 地图容器元素、地图类型 生成地图实例
mapInstance = L.mapbox.map('map_container', 'mapbox.streets')
.setView([0, 0], 3);

接下来,在生成的地图上画线

为了实现渐变色,我引入了 leaflet.hotliine.js 这个插件

1
2
3
4
5
6
7
8
9
10
11
L.hotline(segments, {
min: 150,
max: 350,
palette: {
0.0: '#3588EA',
1.0: '#AFD53C'
},
weight: 5,
outlineColor: '#000000',
outlineWidth: 0
}).addTo(mapInstance);

开始的时候尝试找到一个「白色底」的地图类型

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var mapTypes = {
streets: 'mapbox.streets',
satellite: 'mapbox.satellite',
outdoors: 'mapbox.outdoors',
dark: 'mapbox.dark',
'light': 'mapbox.light',
'streets-satellite': 'mapbox.streets-satellite',
'wheatpaste': 'mapbox.wheatpaste',
'streets-basic': 'mapbox.streets-basic',
'comic': 'mapbox.comic',
'run-bike-hike': 'mapbox.run-bike-hike',
'pencil': 'mapbox.pencil',
'pirates': 'mapbox.pirates',
'emerald': 'mapbox.emerald',
'high-contrast': 'mapbox.high-contrast',
}

但并没有

在审查元素的时候,发现地图在实现的时候,是把 tiles 单独放到一个元素上的

所以,直接把这个元素隐藏掉就好了

1
$('.leaflet-pane.leaflet-tile-pane').hide()

这样一来就不会显示地图了,现在的背景就是 #map_container 这个容器的背景

你甚至可以为 #map_container 设置一个 background-image 显示一个特定的图片

原文作者: dgb8901,yinxing

原文链接: https://www.itwork.club/2020/03/06/mapbox-with-white-background/

版权声明: 转载请注明出处

为您推荐

体验小程序「跟我记账」

关注公众号「特想学英语」

在 Chart.js 里实现渐变背景色