白色背景的 Mapbox 地图

Mar 06, 2020Mapbox点击

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

比如：只需要白色背景

首先，使用 mapbox 初始化地图

// 配置 token
L.mapbox.accessToken = 'xxx';

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

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

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

L.hotline(segments, {
  min: 150,
  max: 350,
  palette: {
    0.0: '#3588EA',
    1.0: '#AFD53C'
  },
  weight: 5,
  outlineColor: '#000000',
  outlineWidth: 0
}).addTo(mapInstance);

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

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 显示一个特定的图片

体验小程序「简易记账」

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

白色背景的 Mapbox 地图

白色背景的 Mapbox 地图

为您推荐