如何使用JS和leaflet图层控制更改基础图层

Question

我需要修改现有的应用程序，其中使用了leaflet图层控制 - 我需要在地图初始化时显示其中一个基本图层。是否有一种方式可以从JS脚本中调用图层控件中的某个函数 - 类似于control.select（1）....？如果没有，如何以与控件相同的方式添加瓷砖图层 - 当我在地图初始化期间添加新的L.TileLayer时，它不会被手动图层控件选择更改覆盖？

- user3523426

Answer 1

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

通常情况下，只需将图层添加到地图上（例如 myTileLayer.addTo(map)），如果该图层是 基础图层或覆盖图层 的一部分，则后者会自动更新其状态（如果添加了基础图层，则单选按钮将相应选择；对于覆盖图层，则相应复选框将被选中）。

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

如果您的意思是由于图层控制未更改您添加的 Tile Layer 而导致意外行为，那么可能是因为您没有重用图层控制已知的 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);

- ghybs

---

谢谢，这正是我在上面回答中发现并试图描述的内容——但你用更好的方式表达了它 ;) - user3523426

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}

- mattesCZ

---

谢谢，我尝试了这种“点击”方法，但是我找不到适合点击事件的对象。这是个好主意。 - user3523426

对于 jQuery 爱好者：$('.leaflet-control-layers input').get(i).click() 将会执行这个答案的第一个步骤。 - yolenoyer

Answer 3

我在研究leaflet代码后找到了以下内容：

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

- user3523426

Answer 4

感谢你，ghybs。你帮助我理解了leaflet。

我在FireBase中保留了基础地图偏好，并在连接到存储时获取它。Redux使得我的Map组件能够重新渲染，使用来自Redux的tileLayer。
之前我尝试通过props传递它...但是像ghybs所说的那样，对于leaflet，即使你已经给了它，你仍然需要再次添加它到地图中，比如：

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

- MickGe

Answer 5

如果您正在使用jQuery，您可以模拟单击“图层”控件以更改基础图层：

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

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

- linqu