ปุ่ม 'บ้าน' แผนที่แผ่นพับ

มีความเป็นไปได้ไหมที่จะมีปุ่ม Home บนแผนที่ Leaflet ซึ่งจะซูมไปที่มุมมองแผนที่เริ่มต้นหรือตำแหน่งที่กำหนดไว้ตามลำดับ?

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);

— ทอม
แหล่งที่มา

น่ากลัว! มันใช้งานได้เหมือน charme! ขอบคุณมาก!

— hoge6b01

+1 สำหรับตัวอย่างที่ยอดเยี่ยมแสดงให้เห็นถึงวิธีการที่จะขยายพื้นเมืองของแผ่นพับControl.Zoom

— elrobis

ฉันได้เปลี่ยนรหัสที่ดีนี้เป็นปลั๊กอินของ Leafletเพื่อให้ใช้งานง่ายยิ่งขึ้น ขอบคุณ toms!

— Florian Brucker

@toms แผ่นปลิวปลั๊กอินที่ผมสร้างขึ้นจากรหัสของคุณได้รับใบอนุญาตในปัจจุบันภายใต้ CC-BY-SA เช่นรหัสต้นฉบับของคุณ อย่างไรก็ตาม CC-BY-SA ไม่เหมาะจริงๆสำหรับซอฟแวร์ดังนั้นผมอยากให้เปลี่ยนใบอนุญาตปลั๊กอินที่จะMIT เพื่อที่ฉันจะต้องได้รับอนุญาตจากคุณในฐานะผู้เขียนรหัสต้นฉบับ คุณตกลงกับสิ่งนั้นเหรอ?

— Florian Brucker

ซอใหม่พร้อมลิงก์ปรับปรุงไปยังแผ่นพับ: jsfiddle.net/pqfche83/1

— Tikky

ด้วย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
แหล่งที่มา

วางสายที่ปุ่มเรียก map.setView

http://leafletjs.com/reference.html#map-setview

map.setView(lat, lng, zoom);

— Morgan Herlocker
แหล่งที่มา