Кнопка «Домой» Карта листовки

11

Есть ли возможность иметь своего рода домашнюю кнопку на моей карте Leaflet, которая будет увеличивать мой первоначальный вид карты или определенную определенную позицию соответственно?

hoge6b01
источник

Ответы:

17

Следующее добавит пользовательский элемент управления масштабированием с помощью кнопки «Домой» на карту Leaflet. Иконка дома из шрифта-удивительный , поэтому обязательно включите эту ссылку.

Рабочая скрипка здесь .

HTML:

<html>
<head>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
</head>
<body>
    <div id="map"></div>
    <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
    <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

CSS:

#map { height: 340px; }
.leaflet-bar a { background-color: #fff; border-bottom: 1px solid #ccc; color: #444; display: block; height: 26px; width: 26px; line-height: 1.45 !important; text-align: center; text-decoration: none; font: bold 18px 'Lucida Console', Monaco, monospace; }

JavaScript:

var lat = 51.505;
var lng = -0.09;
var zoom = 12;

// set up the map and remove the default zoomControl
var map = L.map('map', {
    zoomControl: false
});

map.setView([lat, lng], zoom);
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
}).addTo(map);

// custom zoom bar control that includes a Zoom Home function
L.Control.zoomHome = L.Control.extend({
    options: {
        position: 'topright',
        zoomInText: '+',
        zoomInTitle: 'Zoom in',
        zoomOutText: '-',
        zoomOutTitle: 'Zoom out',
        zoomHomeText: '<i class="fa fa-home" style="line-height:1.65;"></i>',
        zoomHomeTitle: 'Zoom home'
    },

    onAdd: function (map) {
        var controlName = 'gin-control-zoom',
            container = L.DomUtil.create('div', controlName + ' leaflet-bar'),
            options = this.options;

        this._zoomInButton = this._createButton(options.zoomInText, options.zoomInTitle,
        controlName + '-in', container, this._zoomIn);
        this._zoomHomeButton = this._createButton(options.zoomHomeText, options.zoomHomeTitle,
        controlName + '-home', container, this._zoomHome);
        this._zoomOutButton = this._createButton(options.zoomOutText, options.zoomOutTitle,
        controlName + '-out', container, this._zoomOut);

        this._updateDisabled();
        map.on('zoomend zoomlevelschange', this._updateDisabled, this);

        return container;
    },

    onRemove: function (map) {
        map.off('zoomend zoomlevelschange', this._updateDisabled, this);
    },

    _zoomIn: function (e) {
        this._map.zoomIn(e.shiftKey ? 3 : 1);
    },

    _zoomOut: function (e) {
        this._map.zoomOut(e.shiftKey ? 3 : 1);
    },

    _zoomHome: function (e) {
        map.setView([lat, lng], zoom);
    },

    _createButton: function (html, title, className, container, fn) {
        var link = L.DomUtil.create('a', className, container);
        link.innerHTML = html;
        link.href = '#';
        link.title = title;

        L.DomEvent.on(link, 'mousedown dblclick', L.DomEvent.stopPropagation)
            .on(link, 'click', L.DomEvent.stop)
            .on(link, 'click', fn, this)
            .on(link, 'click', this._refocusOnMap, this);

        return link;
    },

    _updateDisabled: function () {
        var map = this._map,
            className = 'leaflet-disabled';

        L.DomUtil.removeClass(this._zoomInButton, className);
        L.DomUtil.removeClass(this._zoomOutButton, className);

        if (map._zoom === map.getMinZoom()) {
            L.DomUtil.addClass(this._zoomOutButton, className);
        }
        if (map._zoom === map.getMaxZoom()) {
            L.DomUtil.addClass(this._zoomInButton, className);
        }
    }
});
// add the new control to the map
var zoomHome = new L.Control.zoomHome();
zoomHome.addTo(map);
томы
источник
КЛАССНО! Работает как шарм! Большое спасибо!
hoge6b01
+1 за классный пример, демонстрирующий, как расширить родную LeafletControl.Zoom
elrobis
4
Я превратил этот хороший кусок кода в плагин Leaflet, чтобы сделать его еще проще в использовании. Спасибо, Томс!
Флориан Брукер
@toms Плагин Leaflet, который я создал из вашего кода, в настоящее время лицензируется под CC-BY-SA, как и ваш оригинальный код . Однако CC-BY-SA на самом деле не подходит для программного обеспечения , поэтому я хотел бы изменить лицензию плагина на MIT . Для этого мне понадобится ваше разрешение как автора оригинального кода. Ты согласен с этим?
Флориан Брукер
Новая скрипка с обновленной ссылкой на буклет: jsfiddle.net/pqfche83/1
Tikky
7

С Leaflet.EasyButton все остается довольно чисто: назовите свой значок и функцию (наведите курсор на текст, если хотите):

var home = {
  lat: 70.3,
  lng: 50.5,
  zoom: 8
}; 

L.easyButton('fa-home',function(btn,map){
  map.setView([home.lat, home.lng], home.zoom);
},'Zoom To Home').addTo(map);

(в сторону) и пример увеличения масштаба изображения с помощью easyButton:

// make a bar with the buttons
var zoomBar = L.easyBar([
  L.easyButton( '<big>+</big>',  function(control, map){map.setZoom(map.getZoom()+1);}),
  L.easyButton( 'fa-home fa-lg', function(control, map){map.setView([home.lat, home.lng], home.zoom);})
  L.easyButton( '<big>-</big>',  function(control, map){map.setZoom(map.getZoom()-1);}),
]);

// add it to the map
zoomBar.addTo(map);
user3276552
источник