我需要修改现有的应用程序,其中使用了leaflet图层控制 - 我需要在地图初始化时显示其中一个基本图层。是否有一种方式可以从JS脚本中调用图层控件中的某个函数 - 类似于control.select(1)....?如果没有,如何以与控件相同的方式添加瓷砖图层 - 当我在地图初始化期间添加新的L.TileLayer时,它不会被手动图层控件选择更改覆盖?
myTileLayer.addTo(map)
),如果该图层是 基础图层或覆盖图层 的一部分,则后者会自动更新其状态(如果添加了基础图层,则单选按钮将相应选择;对于覆盖图层,则相应复选框将被选中)。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);
有几种方法可以解决这个问题。
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}
$('.leaflet-control-layers input').get(i).click()
将会执行这个答案的第一个步骤。 - yolenoyer我在研究leaflet代码后找到了以下内容:
1)在控件结构_layers中找到您想要显示的图层 2)调用map.addLayer(_layers[your_layer_index].layer) 3)在控件结构_form中找到您的图层 4)将其选中属性设置为true
Map
组件能够重新渲染,使用来自Redux的tileLayer
。leaflet
,即使你已经给了它,你仍然需要再次添加它到地图中,比如:const mapRef = useRef(); //Useful to reach Map leaflet element
layerRef.current = L.control
.layers(baseMaps, null, { position: "topleft", sortLayers: true})
.addTo(map);
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>
);
$('.leaflet-control-layers-selector')[0].click()
[1]
。