Question

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

Answer 1

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

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

现在我不确定我是否理解了你的最后一部分（＆＃34;当我在地图初始化期间添加新的L.TileLayer时，它不会被手动图层控制选择更改＆＃34;）覆盖。

如果您的意思是您有意外的行为，因为您添加的图块层未被图层控件更改，可能是因为您没有重新使用图层控件知道的图块层：不要使用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 2

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

1）您可以通过单击图层控件中的无线电输入来选择第二个基础层。这可以通过编程方式完成（不推荐）：

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

2）在初始化期间，只需更改传递给L.Control.Layers的baseLayers的顺序。

3）扩展L.Control.Layers，使其接受一些新选项{"selectedBaseLayerIndex": 1}

Answer 3

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

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

Answer 4

谢谢 ghybs 。您可以帮助我理解传单。

我在 FireBase 中保留了底图首选项，并通过 Redux 将其重新存储起来。
现在，我的Map组件使用 Redux 中的tileLayer重新渲染。
在我尝试将其传递给道具之前...但是，使用leaflet，如 ghybs 所说，即使您给了它类似的东西，您也必须再次将其添加到地图上： / p>

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>
);

Answer 5

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

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

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

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

5 个答案: