如何将leaflet.extras::addSearchOSM()的搜索蓝圈置于leaflet/tmap地图上层？

由于addSearchOSM()没有内置的zIndex参数，我们可以通过直接修改DOM元素样式或调整Leaflet图层容器顺序的方式，将搜索圈前置。以下是两种可行的解决方案：

方法1：修改搜索圈DOM元素的z-index样式 #

addSearchOSM()生成的蓝色搜索圈对应DOM元素的类为.leaflet-control-search .search-tooltip，我们可以通过注入JavaScript代码，给这个元素设置更高的z-index值，确保它层级高于多边形图层。

修改后的完整代码：

library(leaflet)
library(leaflet.extras)
library(tmap)
library(spData)
library(htmlwidgets)

# 创建tmap分级着色地图
nz <- tm_shape(nz) + tm_polygons()

# 转换为leaflet并添加搜索组件，同时调整搜索圈层级
nz_leaflet <- tmap_leaflet(nz) %>% 
    leaflet.extras::addSearchOSM() %>%
    onRender("
        function(el, x) {
            // 为搜索提示框（蓝圈容器）设置更高层级
            document.querySelector('.leaflet-control-search .search-tooltip').style.zIndex = '1000';
        }
    ")

nz_leaflet

方法2：调整Leaflet图层容器的顺序 #

tmap转换为leaflet后，多边形图层默认放在leaflet-overlay-pane容器内，而搜索控件元素位于leaflet-control-container中。我们可以通过JavaScript将控件容器移到图层容器的后方，从整体上提升控件的显示层级。

代码示例：

library(leaflet)
library(leaflet.extras)
library(tmap)
library(spData)
library(htmlwidgets)

# 创建tmap分级着色地图
nz <- tm_shape(nz) + tm_polygons()

nz_leaflet <- tmap_leaflet(nz) %>% 
    leaflet.extras::addSearchOSM() %>%
    onRender("
        function(el, x) {
            var controlContainer = this._controlContainer;
            var overlayPane = this._panes.overlayPane;
            // 将控件容器移至覆盖图层容器之后
            overlayPane.parentNode.insertBefore(controlContainer, overlayPane.nextSibling);
        }
    ")

nz_leaflet

方案说明 #

• 方法1针对性更强，仅调整搜索圈的层级，不会影响其他控件的显示；
• 方法2适用于需要所有控件都前置的场景，调整的是整个控件容器的位置；
• 两种方法都能解决搜索圈被多边形遮挡的问题，可根据实际需求选择。

内容的提问来源于stack exchange，提问作者Gabriel Morrison