如何将Leaflet（时间线）控件放置在归因控件下方的底部（如MerrySky）

Question

MerrySky 在其 Leaflet 地图的最底部有一个时间线控件。当地图扩展到全屏时，时间线也会包含在内。如何制作类似的Leaflet控件？ （相似的尺寸/位置/布局）

Leaflet

L.Control

类 只有 4 个可能的

position

值：

'topleft'

、

'topright'

、

'bottomleft'

或

'bottomright'

。大多数其他Leaflet插件似乎将自定义控件放置在地图“内部”或完全在地图外部。

检查 DOM 让我觉得 MerrySky 在 Leaflet API 之外手动注入了自定义控件：

• 所有三个自定义控件均位于

  leaflet-control-container

  div 之外。
• MererrySky 自定义

  replayer-control

  具有

  leaflet-left

  和

  leaflet-right

  类。

所以我认为 MerrySky 在 Leaflet 渲染

.map

div 后注入了这些自定义控件。然而，还有别的办法吗？使用 Leaflet API 和/或 Leaflet 包装器，如 React Leaflet？

Answer 1

有一个开放的 Leaflet 问题，将来可能会变得更容易：重构/扩展控件的定位

与此同时，我能够使用 Leaflet API（加上一些内部道具）完成所有事情：

具有完整（SvelteKit）来源的仓库：

• JS代码
• CSS

演示：https://zeus-leftium.vercel.app/

// Insert div.leaflet-footer element into leaflet map.
// Add to list of Leaflet control corners as 'footer'.
map._controlCorners.footer = DomUtil.create('div', 'leaflet-footer', map._container);

// Define a simple control class that positions itself into newly created footer control corner:
const RadarControl = Control.extend({
    options: {
        position: 'footer'
    },
    onAdd: function () {
        const container = DomUtil.create('div', 'description');
        DomEvent.disableClickPropagation(container);
        container.insertAdjacentHTML('beforeend', 'FOOTER');

        return container;
    }
});

// Add simple control defined above to map:
new RadarControl().addTo(map);

需要一些 CSS 来正确调整新/现有控件的大小/位置：

.leaflet-footer {
    /* Stick to bottom of map: */
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    /* Display above map layers: */
    z-index: 1000;

    pointer-events: none;

    background-color: whitesmoke;
    height: 41px;

    padding: 3px 10px;
}

/* Raise bottom control corners above footer: */
.leaflet-bottom {
    bottom: 42px;
}