OpenStreetMap leafletjs删除树层

Question

如何在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] }
});

Answer 1

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

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

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

Answer 2

使用传单Tile Layer时，它会加载光栅图块，即普通图像。例如：

_{©OpenStreetMap}

因此，您将理解在浏览器中动态修改这些图像很复杂。

但是你可以尝试找到其他服务于不同风格的Tile Source。例如。你可以浏览Leaflet-providers demo。

其他Tile来源的一些示例：

_{©OpenStreetMap}

_{©Openstreetmap France | ©OpenStreetMap}

_{Tiles友情提供OpenStreetMap Sweden - 地图数据©OpenStreetMap}

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

您还可以使用矢量切片，以便浏览器直接应用该样式。

Answer 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（适用于地图框）：https://www.mapbox.com/api-documentation/#maps

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