Блог

Я хочу показать масштаб моей карты-листовки, используя L.control.scale() , однако, я хочу расположить масштаб так же, как предлагает Google Maps API. Мне нужно, чтобы масштаб соответствовал атрибуции карты. Я прикрепил изображение ниже.

Google Maps API (как я этого хочу)

Листовка (как она выглядит в настоящее время)

Я использую следующий код для создания масштаба и добавления его на свою карту.

 L.control.scale().addTo(map);
 

Чтобы просто поместить масштаб в тот же угол карты, что и атрибуция, вы можете просто установить параметр «Положение» при создании элемента управления масштабом:

 L.control.scale({position:'bottomright', metric: false}).addTo(map);
 

Чтобы масштаб действительно соответствовал атрибуции, вы можете создать пользовательский элемент управления, который включает как виджет масштаба, так и текст атрибуции. Листовка предназначена для расширения, поэтому вы можете расширить исходный код L.Control.Scale , чтобы просто добавить то, что вам нужно:

 L.Control.AttrScale = L.Control.Scale.extend({
  onAdd: function (map) {
    var className = 'leaflet-control-scale',
        wrapper = L.DomUtil.create('div', 'leaflet-control-attr-scale'),
        attribution = L.DomUtil.create('div', 'leaflet-control-attribution', wrapper),
        container = L.DomUtil.create('div', className, wrapper),
        options = this.options;
        
    wrapper.style.display = "flex";
    wrapper.style.alignItems = "center";

    attribution.innerHTML = "My attribution string";

    this._addScales(options, className   '-line', container);

    map.on(options.updateWhenIdle ? 'moveend' : 'move', this._update, this);
    map.whenReady(this._update, this);

    return wrapper;
  },
});

map.addControl(new L.Control.AttrScale({position:'bottomright', metric: false}))
 

В приведенном выше примере показана статическая строка атрибуции перед масштабом. Вы все еще можете использовать обычные параметры для размещения элемента управления и указать, следует ли отображать метрическую и/или имперскую шкалу. Вероятно, вы также захотите создать карту с этой attributionControl: false опцией, чтобы избежать отображения атрибуции по умолчанию.

Если вам нужно динамически настроить сообщение об атрибуции на основе выбора карты (как это делает обычный элемент управления атрибуцией), просмотрите исходный код L.Control.Attribution , чтобы узнать, какие дополнительные функции необходимо включить в пользовательский элемент управления.