javascript - 将 fontawesome 与传单标记和 geojson 结合使用

Question

发现这个问题很难解决。我想在我的传单 map 上使用 fontawesome 标记，它使用 GeoJson 数据来表示不同标记的经/纬度。

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 给出的所有单独点上添加 var Icon 信息作为标记。

我明白如何用一个点来做到这一点，但是用多个点会变得非常困惑......

Answer 1

我猜你的“myGeojsonData”对象是一个“多点”特征类型，所以我在你的“红圈”附近创建了几个点。我将您的 Icon 更改为 DivIcon 并通过在 L.geoJSON 调用上使用 pointToLayer 回调来连接标记逻辑。

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

结果:

使用如下所示的 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"
        }
    ]
};

这两点看起来非常接近:

对于弹出窗口，我不知道它最初是什么样子，因为我在您的原始代码中没有看到任何“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);

我没有添加任何样式，所以它们看起来很丑。有更多用于定位和样式化弹出窗口的设置。