带有图例上方弹出窗口的传单地图 [英] Leaflet map with popup above legend

问题描述

我遇到的情况是，我的地图带有自定义图例，格式为SVG或PNG.图例始终位于左下角，但可能会很大(用户可以将其关闭或打开).

I have a situation where I have a map with a custom legend formatted as either an SVG or a PNG. The legend is always placed in the bottom left corner but can be quite large (user can turn it off and on).

地图上也有许多标记.每个标记都会有一个工具提示，该提示也可能很大.工具提示显示鼠标何时悬停在标记上.当用户将鼠标悬停在图例附近的标记上时，就会出现问题-工具提示出现在图例的后面.我想做到这一点，使弹出窗口出现在图例上方.因此，从下至上:标记，图例，标记弹出窗口.

The map also has many markers. Each marker will have a tooltip, which can also be large-ish. Tooltips show when the mouse is hovering over the marker. The problem arises when a user hovers over a marker close to the legend - the tooltip appears behind the legends. I'd like to make it so the popups appear above the legend. So, from bottom to top: marker, legend, marker popup.

这是一个JSFiddle https://jsfiddle.net/e51mydwa/9/来描述我的意思是说.尽管<div id ="legend">标记包含<img>或<svg>实际上.

Here is a JSFiddle https://jsfiddle.net/e51mydwa/9/ to describe what I mean. I add the legends in the same way, although the < div id="legend"> tag contains a < img> or < svg> in reality.

<div id="map">
  <div id="legend">
    I am Legend
  </div>
</div>

我看过 http://leafletjs.com/examples/choropleth/，但是正如您通过检查DOM所看到的那样，这将遇到相同的问题，因为图例与小叶控件一起添加到同一div中，该控件始终位于地图图层上方(应如此，控件应始终位于在顶部).

I've had a look at http://leafletjs.com/examples/choropleth/ , but as you can see by inspecting the DOM, this will suffer the same problem, as the legend is added into the same div as the leaflet controls, which is always above the map layers (as it should be, controls should always be at the top).

我还尝试将图例插入div中，该div在包含弹出窗口的图层的同级图层中.这样可以解决z-index问题，但是这两者的父div都包含一个转换，该转换会随着用户拖动地图而改变-这意味着图例会更改位置并且不是静态的.

I've also tried inserting the legend into a div which is on a sibling layer to the popup containing layer. This fixes the z-index issue, however the parent div of both of these contains a transform which changes as the user drags the map around - meaning the legends change places and aren't static.

任何人和所有建议都值得赞赏.

Any and all suggestions appreciated.

推荐答案

由于Leaflet层和控件的体系结构，这需要大量的黑客工作.

This requires some heavy hacking, due to the architecture of the Leaflet layers and controls.

一种可能的方法是通过在地图视图的每次更改时重新定位其像素偏移，来使自定义图层类停留在静态位置.

One possible approach is to make a custom layer class which stays in a static position, by repositioning its pixel offset at every change of the map's view.

我衷心推荐阅读传单教程，尤其是有关地图窗格的指南和有关自定义图层，以了解其工作原理.

I heartily recommend reading the Leaflet tutorials, in particular the one about map panes and the one about custom layers, to understand how this works.

// Create a 'static' map pane
L.Map.addInitHook(function(){
  this.createPane('static');
  this.getPane('static').style.zIndex = 675;
});

// Define a custom layer class
L.Layer.StaticOverlay = L.Layer.extend({
  onAdd: function(map) {
    this._map = map;

    var pane = map.getPane('static');
    this._container = L.DomUtil.create('div');

    pane.appendChild(this._container);

    // styling, content, etc
    this._container.style.background = 'white';
    this._container.style.width = '100px';
    this._container.style.height = '50px';
    this._container.innerHTML = 'Hi!'


    map.on('move zoom viewreset zoomend moveend', this._update, this);

    this._update();
  },

  onRemove: function(map) {
    L.DomUtil.remove(this._container);
    map.off('move zoom viewreset zoomend moveend', this._update, this);
  },

  _update: function() {
    // Calculate the offset of the top-left corner of the map, relative to
    // the [0,0] coordinate of the DOM container for the map's main pane

    var offset = map.containerPointToLayerPoint([0, 0]);

    // Add some offset so our overlay appears more or less in the middle of the map
    offset = offset.add([340, 220]);

    L.DomUtil.setPosition(this._container, offset);

  }
});

定义后，您可以简单地

var static = new L.Layer.StaticOverlay().addTo(map);

显然缺少一些位，例如如何正确放置叠加层(使用 getSize()获取地图像素大小，进行适当的算术运算)，以及如何设置在图层构造函数中叠加一些自定义选项.

Obviously there are some bits missing, such as how to position the overlay properly (get the map pixel size with getSize(), do the proper arithmetic), and how to set the contents of the overlay with some custom options in the layer constructor.

这些留给读者练习:-)

These are left as an exercise to the reader :-)

在此处查看工作示例.

这篇关于带有图例上方弹出窗口的传单地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！