如何使用 JS 和传单层控件更改基础层

Question

我必须修改现有的应用程序，其中使用了传单图层控件 - 我需要在启动地图时显示其中一个基础图层。有没有办法，如何从 JS 脚本的图层控件中调用某些函数 - 类似于 control.select(1) ....?如果没有，如何以与控件相同的方式添加图块层 - 当我在地图初始化期间添加新的 L.TileLayer 时，它不会被手动图层控件选择更改覆盖？

Answer 1

我在挖掘传单代码后发现了这个：

1) 在控件的结构_layers中找到要显示的层 2) 调用 map.addLayer(_layers[[=15=]].layer) 3）在控件的结构_form中找到你的层 4) 将它的 checked 属性设置为 true

Answer 2

您可以尝试模拟用户点击 Leaflet 图层控件，但有一种更简单的方法可以实现您最初描述的内容。

通常只需向地图添加一个图层（例如 myTileLayer.addTo(map)），如果该图层是 base layers or overlays of the Layers Control 的一部分，后者将自动更新其状态（如果您添加了基础图层，将相应地选择单选按钮；对于叠加层，将勾选相应的复选框。

现在我不确定我是否正确理解了你的最后一部分("when I add new L.TileLayer during map init, it's not overwritten by manual layers control selection change")。

如果你的意思是你有一个意想不到的行为，因为你添加的 Tile Layer 没有被 Layers Control 改变，这可能是因为你没有重新使用 Layers Control 知道的 Tile Layer：不使用 new L.TileLayer，但 重新使用 基础层或覆盖层之一。

例如：

var baselayers = {
    "Tile Layer 1": L.tileLayer(/* ... */),
    "Tile Layer 2": L.tileLayer(/* ... */),
    "Tile Layer 3": L.tileLayer(/* ... */)
};

var overlays = {};

L.control.layers(baselayers, overlays).addTo(map);

baseLayers["Tile Layer 1"].addTo(map);

Answer 3

有几种方法可以解决这个问题。

1) 您可以 select 通过单击层控件中的无线电输入来创建第二个 baselayer。这可以像这样以编程方式完成（不推荐）：

var layerControlElement = document.getElementsByClassName('leaflet-control-layers')[0];
layerControlElement.getElementsByTagName('input')[1].click();

2) 初始化时把baseLayers传给L.Control.Layers的顺序改一下就可以了

3) 扩展 L.Control.Layers 以便它接受一些新选项 {"selectedBaseLayerIndex": 1}

Answer 4

如果您使用的是 jQuery，您可以模拟单击 Layers 控件来更改基础层：

$('.leaflet-control-layers-selector')[0].click()

如果要切换到第二个地图图层，请使用下一个索引[1]

Answer 5

谢谢 ghybs。你帮我看懂leaflet.

我在 FireBase 中保留 base-map 首选项，并通过 Redux.[=29= 将其重新连接到存储] 现在我的 Map 组件 re-render 和来自 Redux 的 tileLayer。
在我尝试将它传递给 props 之前......但是对于 leaflet，就像 ghybs 说的那样，你必须再次将它添加到地图中，即使你给了它一些东西喜欢 :

const mapRef = useRef(); //Useful to reach Map leaflet element

layerRef.current = L.control
    .layers(baseMaps, null, { position: "topleft", sortLayers: true})
    .addTo(map);

然后，我勾上我的 tileLayer :

useEffect(() => {
    const { leafletElement: map } = mapRef.current; //Don't forget the current...
    baseMaps[tileLayer].addTo(map);
}, [tileLayer]);

return (
    <Map
        onbaselayerchange={(ev) => handleBaseLayerChange(ev.name)}
        layers={defaultLayer(tileLayer)}
        ref={mapRef}
        {...fieldProps}>
        <CustomersMarkers layer={layerRef} customers={customers} />
    </Map>
);

如何使用 JS 和传单层控件更改基础层

How to change base layer using JS and leaflet layers control

controls

leaflet

layer

tile