Использование fontawesome с маркерами листовок и геойсоном - PullRequest
Новая
       15

Использование fontawesome с маркерами листовок и геойсоном

0 голосов
/ 05 марта 2019

Сложно решить эту проблему.Я хочу использовать fontawesome маркеры на моей листовой карте, которая использует данные GeoJson для lon / lat различных маркеров. 

var Icon = L.icon({
    html: '<i class="fas fa-map-pin"></i>',
    iconSize: [20, 20]
  });

    var mymap = L.map('mapid').setView([-37.735018, 144.894947], 13);

    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
            '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        id: 'mapbox.streets'
    }).addTo(mymap);

    L.geoJSON(myGeojsonData).addTo(mymap);

    var circle = L.circle([-37.735018, 144.894947], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 50
}).addTo(mymap);

Пример geoJson 

var myGeojsonData =
{
  "features": [
    {
      "geometry": {
        "coordinates": [
          144.829434,
          -37.825233
        ],
        "type": "Point"
      },
      "properties": {
        "Area": "Combined Entry MVT on Grieve Pde, West Gate Fwy North Ramps, Grieve Pde Byp Start EB between Grieve ",
        "IDnumber": "2541EL_P0"
      },
      "type": "Feature"
    },
    {
      "geometry": {
        "coordinates": [
          144.829502,
          -37.825234
        ],
        "type": "Point"
      },
      "properties": {
        "Area": "Combined Entry MVT on Grieve Pde, West Gate Fwy North Ramps, Grieve Pde Byp Start EB between Grieve ",
        "IDnumber": "2541EL_P1"
      },
      "type": "Feature"
    },
    {
      "geometry": {
        "coordinates": [
          144.881846,
          -37.732708
        ],
        "type": "Point"
      },

Я хочу добавить переменнуюИнформация значка в виде маркера на всех отдельных точках, заданных geoJson.

Я понимаю, как сделать это с одной точкой, но с несколькими точками это очень запутанно ...

1 Ответ

0 голосов
/ 05 марта 2019

Я предполагаю, что ваш объект "myGeojsonData" является "многоточечным" типом объектов, поэтому я создал пару точек рядом с вашим "красным кружком".Я изменил ваш Icon на DivIcon и подключил логику маркера с помощью обратного вызова pointToLayer при вызове L.geoJSON. 

var myGeojsonData = {
    "type": "Feature",
    "geometry": {
        "type": "MultiPoint",
        "coordinates": [
            [144.894947,-37.72],
            [144.894947,-37.70]
        ]
    }
};

var myIcon = L.divIcon({
    html: '<i class="fas fa-map-pin"></i>',
    iconSize: [20, 20],
    className: 'dummy' // We don't want to use the default class
});

var mymap = L.map('mapid').setView([-37.735018, 144.894947], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
        '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    id: 'mapbox.streets'
}).addTo(mymap);

L.geoJSON(myGeojsonData, {
    pointToLayer: function(getJsonPoint, latlng) {
        return L.marker(latlng, { icon: myIcon });
    }
}).addTo(mymap);

var circle = L.circle([-37.735018, 144.894947], {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 50
}).addTo(mymap);

Результат:

enter image description here

Использование данных GeoJSON, которые выглядят следующим образом: 

var myGeojsonData = {
    "features": [
        {
            "geometry": {
                "coordinates": [
                    144.829434,
                    -37.825233
                ],
                "type": "Point"
            },
            "properties": {
                "Area": "Combined Entry MVT on Grieve Pde, West Gate Fwy North Ramps, Grieve Pde Byp Start EB between Grieve ",
                "IDnumber": "2541EL_P0"
            },
            "type": "Feature"
        },
        {
            "geometry": {
                "coordinates": [
                    144.829502,
                    -37.825234
                ],
                "type": "Point"
            },
            "properties": {
                "Area": "Combined Entry MVT on Grieve Pde, West Gate Fwy North Ramps, Grieve Pde Byp Start EB between Grieve ",
                "IDnumber": "2541EL_P1"
            },
            "type": "Feature"
        }
    ]
};

Две точки кажутся очень близкими друг к другу:

enter image description here

Для всплывающих окон я не знаю, как это выглядело изначально, так как я не вижу вызовов типа «bindpopup» в исходном коде и тестирую исходный кодвы предоставили (без моих изменений) я не получаю никаких всплывающих окон.Вы можете добавить всплывающие окна следующим образом: 

L.geoJSON(myGeojsonData, {
    pointToLayer: function (getJsonPoint, latlng) {
        return L.marker(latlng, { icon: myIcon });
    }
}).bindPopup(function(layer) {
    return 'ID #: ' + layer.feature.properties.IDnumber + '<br />Area: ' + layer.feature.properties.Area;
}).addTo(mymap);

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

enter image description here

...