Как добавить текст для отображения на карту к объекту geojson в листовке

Итак, у меня есть слой geojson в листовке, и я могу добавить объекты geojson к этому слою для отображения на полученной карте.

Теперь я хотел бы добавить текстовую метку для отображения рядом с объектом.

В этом примере показано использование пользовательского объекта L.control() для отображения дополнительной информации на карте. Который кажется близким к тому, что я хочу делать.

В этом примере я хотел бы добавить начальные текстовые метки состояния (т.е. "TX", "FL" ), расположенные над каждым состоянием. Можно ли использовать L.control() для этого или есть другой способ?

http://leaflet.cloudmade.com/examples/choropleth.html

var info = L.control();

info.onAdd = function (map) {
    this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
    this.update();
    return this._div;
};

// method that we will use to update the control based on feature properties passed
info.update = function (props) {
    this._div.innerHTML = '<h4>US Population Density</h4>' +  (props ?
        '<b>' + props.name + '</b><br />' + props.density + ' people / mi<sup>2</sup>'
        : 'Hover over a state');
};

info.addTo(map);

Ответ 1

Я искал тот же самый вопрос недавно и только вчера его реализовал на основе публикации в группе google. https://groups.google.com/forum/#!topic/leaflet-js/sA2HnU5W9Fw

Благодаря Adrian для исходного кода.

Здесь решение:

Разверните следующий класс, как показано ниже:

<script>

    L.LabelOverlay = L.Class.extend({
        initialize: function(/*LatLng*/ latLng, /*String*/ label, options) {
            this._latlng = latLng;
            this._label = label;
            L.Util.setOptions(this, options);
        },
        options: {
            offset: new L.Point(0, 2)
        },
        onAdd: function(map) {
            this._map = map;
            if (!this._container) {
                this._initLayout();
            }
            map.getPanes().overlayPane.appendChild(this._container);
            this._container.innerHTML = this._label;
            map.on('viewreset', this._reset, this);
            this._reset();
        },
        onRemove: function(map) {
            map.getPanes().overlayPane.removeChild(this._container);
            map.off('viewreset', this._reset, this);
        },
        _reset: function() {
            var pos = this._map.latLngToLayerPoint(this._latlng);
            var op = new L.Point(pos.x + this.options.offset.x, pos.y - this.options.offset.y);
            L.DomUtil.setPosition(this._container, op);
        },
        _initLayout: function() {
            this._container = L.DomUtil.create('div', 'leaflet-label-overlay');
        }
    });   

</script>

Кроме того, добавьте этот css:

<style>
    .leaflet-popup-close-button {
        display:none;
    }

    .leaflet-label-overlay {
        line-height:0px;
        margin-top: 9px;
        position:absolute;
    }
</style>

И затем отобразите текстовые метки, как показано ниже:

<script>
    var map = L.map('map').setView([51.898712, 6.7307100000001], 4);

    // add markers
    // ...

    // add text labels:
    var labelLocation = new L.LatLng(51.329219337279405, 10.454119349999928);
    var labelTitle = new L.LabelOverlay(labelLocation, '<b>GERMANY</b>');
    map.addLayer(labelTitle);


    var labelLocation2 = new L.LatLng(47.71329162782909, 13.34573480000006);
    var labelTitle2 = new L.LabelOverlay(labelLocation2, '<b>AUSTRIA</b>');
    map.addLayer(labelTitle2);

    // In order to prevent the text labels to "jump" when zooming in and out,
    // in Google Chrome, I added this event handler:

    map.on('movestart', function () {
        map.removeLayer(labelTitle);
        map.removeLayer(labelTitle2);
    });
    map.on('moveend', function () {
        map.addLayer(labelTitle);
        map.addLayer(labelTitle2);
    });
</script>

Результат:

Ответ 2

Наложение меток в листовке с использованием класса маркера и класса DivIcon с свойством "html"

Лично я использую этот метод для реализации текстовых меток на карте. Таким образом, я не использую все существующие методы и события Marker Class без каких-либо дополнительных усилий. Это немного похоже на использование текстовой метки вместо значка, я думаю.

        var textLatLng = [35.1436, -111.5632];  
        var myTextLabel = L.marker(textLatLng, {
            icon: L.divIcon({
                className: 'text-labels',   // Set class for CSS styling
                html: 'A Text Label'
            }),
            draggable: true,       // Allow label dragging...?
            zIndexOffset: 1000     // Make appear above other map features
        });

Мой CSS выглядит так:

        .text-labels {
            font-size: 2em;
            font-weight: 700;
            /* Use color, background, set margins for offset, etc */
        }

Кроме того, я еще не изучил это, но, возможно, вы можете добавить png в CSS, а затем смещать текст, чтобы вы могли обернуть значок и метку в том же объекте Marker, используя класс Leiblet DivIcon? Это было бы легко с формой div (например, box, circle), но я не уверен в добавлении png к CSS для объекта Marker, потому что я не являюсь гуру CSS любыми способами.