使用Leaflet,如果我有两个在同一位置,我如何订购控件?

时间:2016-05-20 15:04:51

标签: leaflet

我的地图上有一个自定义控件,它具有以下属性:

position: "topright"

这使它与默认的图层控件处于相同的位置。但是,我的自定义控件位于上面图层控件。如何指定哪个应该在顶部? control positions上的文档没有提及如果不止一个占据相同位置该怎么做。

我的地图初始化如下:

var map = L.map('map', {
    center: [0.0, 0.0],
    zoom: 2
});

map.addControl(new L.Control.Cluster())

按钮本身在`onA

中设置如下

这样就设置了我的右上角:

L.Control.Cluster = L.Control.extend({
  options: {
    position: "topright",
  },

  onAdd: function (map) {
    var clusterName = "leaflet-control-cluster"
      , container = L.DomUtil.create("div", clusterName + " leaflet-bar")
      , options = this.options

    this._map = map

    var container = L.DomUtil.create('div', 'leaflet-bar leaflet-control leaflet-control-custom');
    container.style.backgroundColor = 'white';
    container.style.backgroundImage = "url(image.png)";
    container.style.backgroundRepeat = "no-repeat";
    container.style.backgroundPosition = "center";
    container.style.backgroundSize = "25px 25px";
    container.style.width = '36px';
    container.style.height = '36px';

    return container
  }
})

这样就设置了我的右上角:

Top Right example

如何在图层控件下面指出我想要自定义控件?

1 个答案:

答案 0 :(得分:2)

它只与创建控件的顺序有关。 这将在图层控件之后添加自定义控件:

L.control.layers(baseLayers, overlays).addTo(map);

map.addControl(new L.Control.Cluster());

http://plnkr.co/edit/3VipBSvsQWsiQa5hfBCD?p=preview