0

我正在制作一个 rMarkdown flex 仪表板交互式 html 页面，我们将把它嵌入到另一个页面（一个 iFrame）中。有两张并排的小地图。地图本身、内容、比例尺、图例弹出窗口都为我们的目的正确格式化。

但是，当在地图左侧（图例所在的位置）激活弹出窗口时，它会在图例后面打开。我已经调整了一些图例的不透明度......但是当碰撞时它不足以使弹出窗口有用。降低它会使辨别刻度中的颜色变得困难，从而降低图例的可解释性。地图确实继续向右，只是没有意义的内容。

在此处输入图像描述

我希望找到解决这种情况的三种方法之一。

1. direct the popup to open in front of the legend
2. set the legend background to complete transparency, while leaving the legends values and bin colors at opacity of 1
3. creating a fixed location in the upper right corner where the popup opens when activated so that they never conflict.

但是，我完全愿意接受任何其他可能有用的建议。我不能做的一件事是更改它们所在的图形的整体宽度，因为它们需要装入预先确定的设定尺寸的“盒子”中。他们需要并排。 

map<-leaflet(width ="100%")%>%
  setView(lat=43.9625, lng = -72.5506, zoom = 7)%>%
  addProviderTiles("CartoDB.Positron")%>%
  addPolygons(data = plot2010,
              fillColor = ~pal(plot2010@data$per100K),
              smoothFactor = 0.2,
              fillOpacity = 0.8,
              weight = 0.2,
              popup=popContent,
              popupOptions= popupOptions(maxWidth ="100%", closeOnClick = TRUE))%>%

  addLegend(position="topleft",
            pal=pal,
            values= plot2010@data$per100K,
            title ='Age Adjusted Rates </br> per 100,000',
            na.label = "Not Available",
            opacity=.5,
            labFormat = labelFormat(digits=1))
map
4

1 回答 1

0

据我所知，这是 Leaflet 工作方式所固有的。下面是 DOM 结构的样子：

DOM 树的截图

不同的图层类型被隔离到它们自己的容器 div 中，这些 div 具有预设的顺序，然后将控件（这就是图例）放在与图层完全分开的 div 中。我不认为 z-index 可以跨越这些界限（尽管我不得不承认 z-index 行为之前让我感到惊讶）。

于 2017-06-02T17:44:07.737 回答