Question

我有一种情况，我有一个地图，其中包含一个格式为SVG或PNG的自定义图例。图例始终位于左下角，但可能非常大（用户可以将其关闭和打开）。

地图也有很多标记。每个标记都有一个工具提示，也可能是大工具。当鼠标悬停在标记上时，工具提示会显示。当用户将鼠标悬停在靠近图例的标记上时会出现问题 - 工具提示出现在图例后面。我想制作它，以便弹出窗口出现在图例上方。所以，从下到上：标记，图例，标记弹出。

这是一个JSFiddle https://jsfiddle.net/e51mydwa/9/来描述我的意思。我以同样的方式添加了传说，尽管＆lt; div id =“legend”＆gt;标签包含＆lt; IMG＆GT;或者＆lt; SVG＆GT;实际上。

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

我看过http://leafletjs.com/examples/choropleth/，但正如你通过检查DOM看到的那样，这将遇到同样的问题，因为图例被添加到与传单控件相同的div中，这总是在地图图层上方（应该是，控件应始终位于顶部）。

我也尝试将图例插入到包含弹出图层的兄弟图层上的div中。这解决了z-index问题，但是这两个问题的父div包含一个变换，当用户拖动地图时它会发生变化 - 这意味着图例会改变位置并且不是静态的。

赞赏任何建议。

Answer 1

由于Leaflet图层和控件的架构，这需要一些严重的黑客攻击。

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

我衷心建议您阅读Leaflet tutorials，特别是有关地图窗格的图片和关于自定义图层的图片，以了解其工作原理。

// 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()获取地图像素大小，进行正确的算术运算），以及如何使用一些自定义选项设置叠加层的内容在图层构造函数中。

这些留给读者的练习： - ）

查看working example here。

传单

1 个答案: