OpenStreetMap Leafletjs 删除树层答案

【问题标题】：OpenStreetMap leafletjs remove tree layerOpenStreetMap Leafletjs 删除树层
【发布时间】：2018-02-16 00:07:33
【问题描述】：

如下图所示，我如何删除 openstreetmap 上的树层（可能是 tileLayer）。有没有办法把地图上的所有点和线也去掉？

var map = L.map('map', {
    scrollWheelZoom: false
}).fitBounds(
    [
        [driverLocation.latitude, driverLocation.longitude],
        [customerDeliveryLocation.latitude, customerDeliveryLocation.longitude]
    ],
    { padding: [80, 80] }
);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> bidragsgivare'
}).addTo(map);

var LeafIcon = L.Icon.extend({
    options: { iconSize: [34, 34] }
});

【问题讨论】：

标签： javascript leaflet openstreetmap

【解决方案1】：

正如@ghybs 所解释的，Leaflet 会加载已渲染的图像，因此您无法即时更改它们。

如果您想尝试不同的地图提供者，请查看此项目：https://leaflet-extras.github.io/leaflet-providers/preview/ 并选择最适合您需求的样式。

如果你想设计自己的风格，也可以试试Mapbox Studio。

【讨论】：

【解决方案2】：

当您使用 Leaflet Tile Layer 时，它会加载 raster 图块，即纯图像。例如：

_{©OpenStreetMap}

因此，您会明白在浏览器中动态修改这些图像很复杂。

但您可以尝试寻找其他提供不同风格的 Tile Source。例如。你可以浏览Leaflet-providers demo。

其他 Tile Source 的一些示例：

_{©OpenStreetMap}

_{© Openstreetmap 法国 | © OpenStreetMap}

_{瓷砖由瑞典 OpenStreetMap 提供 — 地图数据 © OpenStreetMap}

如果您想进一步自定义图块，您应该使用自己的图块服务器为它们提供服务，或使用可让您指定自己的样式的在线服务（例如 Mapbox）。

您也可以使用矢量图块，以便浏览器直接应用样式。

【讨论】：

【解决方案3】：

您必须像这样为地图定义 ID：

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    id: 'mapbox.streets',
    attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> 
bidragsgivare'
}).addTo(map);

所有有效的地图 ID（用于 mapbox）都可以在这里找到：https://www.mapbox.com/api-documentation/#maps

更多信息可以在链接中找到： http://leafletjs.com/examples/layers-control/

【讨论】：