如何使用 JS 和传单层控件更改基础层 [英] How to change base layer using JS and leaflet layers control

问题描述

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

I have to modify existing application, where leaflet layers control is used - I need to display one of the base layers when the map is initiated. Is there a way, how to call some function from the layers control from JS script - something like control.select(1) ....? If not, how can add a tile layer in the same way as it is done by the control - when I add new L.TileLayer during map init, it's not overwritten by manual layers control selection change?

推荐答案

您可以尝试模拟用户单击 Leaflet Layers Control，但有一种更简单的方法可以实现您最初描述的内容.

You could try to emulate a user click on the Leaflet Layers Control, but there is a much more simple way to achieve what you initially describe.

通常只需向地图添加一个图层(例如 myTileLayer.addTo(map))，如果该图层是 图层控件的基础图层或叠加层，后者将自动更新其状态(如果您添加了基础图层，则会相应地选择单选按钮；对于覆盖，相应的复选框将被勾选).

Normally by simply adding a layer to the map (e.g. myTileLayer.addTo(map)), if that layer is part of the base layers or overlays of the Layers Control, the latter will automatically update its status (if you added a base layer, the radio buttons will be selected accordingly; for an overlay, the corresponding checkbox will be ticked).

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

Now I am not sure I understood properly your last part ("when I add new L.TileLayer during map init, it's not overwritten by manual layers control selection change").

如果你的意思是你有一个意外的行为，因为你添加的平铺层没有被层控制改变，这可能是因为你没有重新使用层控制知道的平铺层:不要使用new L.TileLayer，但重新使用基础层或覆盖层之一.

If you mean you have an unexpected behaviour because the Tile Layer you added is not changed by the Layers Control, it may be due to the fact that you are not re-using a Tile Layer that the Layers Control knows: do not use new L.TileLayer, but re-use one of the base layers or overlays.

例如:

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

这篇关于如何使用 JS 和传单层控件更改基础层的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！