时间戳

首页 > 解决方案 > 如何在 Leaflet 上使用 L.geoJSN 函数时向地图添加图标？

leaflet - 如何在 Leaflet 上使用 L.geoJSN 函数时向地图添加图标？

问题描述

我知道我可以使用以下逻辑在 Leaflet 上添加图标：

const geojson = {
      "name": "interseccao_circulo",
      "type": "FeatureCollection",
      "features": [
        {
          "type": "Feature",
          "properties": {
          },
          "geometry": {
            "type": "MultiPoint",
            "coordinates": [
              [
                -46.62831244066412,
                -23.551014464955063
              ]
            ]
          }
        },
        {
          "type": "Feature",
          "properties": {
          },
          "geometry": {
            "type": "MultiPoint",
            "coordinates": [
              [
                -46.63242614612176,
                -23.55277865770234
              ]
            ]
          }
        }
      ]
    }

var mymap = L.map('mapdiv', {
center:[-23.552778, -46.632426],
    zoom:16,
    maxZoom:20,
    zoomControl:false,
    attributionControl:false
});
var lyrOSRHOT = L.tileLayer.provider('OpenStreetMap.HOT');
mymap.addLayer(lyrOSRHOT);

var icons = new L.Icon({
iconUrl: "https://i.imgur.com/ZcGeIVz.png",
iconSize: [40, 40],
});
let lat = geojson.features[0].geometry.coordinates[0][1]
let lng = geojson.features[0].geometry.coordinates[0][0]

let lat2 = geojson.features[1].geometry.coordinates[0][1]
let lng2 = geojson.features[1].geometry.coordinates[0][0]

L.marker([lat, lng], {icon: icons}).addTo(mymap);
L.marker([lat2, lng2], {icon: icons}).addTo(mymap);
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet-src.min.js" integrity="sha512-XQr+/1RXvYozXiwrumwtu3lqQmVwZ8nkLUrC/mc3HBHw4Imh++RXjwtLQFuOz3i65j9CSfKt50x6w/uUY2ovOQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-providers/1.12.0/leaflet-providers.min.js" integrity="sha512-LixflAm9c0/qONbz9F1Ept+QJ6QBpb7wUlPuyv1EHloTVgwSK8j3yMV3elnElGQcv7Y5QTFlF/FqyeE/N4LnKQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="anonymous" />

<div id="mapdiv" style="height:100vh; width: 100vw"></div>

L.geoJSON但是，当我使用该函数绘制点时，我想让它工作。类似于以下内容：

const geojson = { 
    "name": "interseccao_circulo",
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
            },
            "geometry": {
                "type": "MultiPoint",
                "coordinates": [
                    [
                        -46.62831244066412,
                        -23.551014464955063
                    ]
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
            },
            "geometry": {
                "type": "MultiPoint",
                "coordinates": [
                    [
                        -46.63242614612176,
                        -23.55277865770234
                    ]
                ]
            }
        }
    ]   
}   
var mymap = L.map('mapdiv', {
  center:[-23.552778, -46.632426],
    zoom:16,
    maxZoom:20,
    zoomControl:false,
    attributionControl:false
}); 
var lyrOSRHOT = L.tileLayer.provider('OpenStreetMap.HOT');
mymap.addLayer(lyrOSRHOT);
var icons = new L.Icon({
    iconUrl: "https://i.imgur.com/ZcGeIVz.png",
    iconSize: [40, 40],
});

L.geoJSON(geojson, {icon: icons} ).addTo(mymap);
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet-src.min.js" integrity="sha512-XQr+/1RXvYozXiwrumwtu3lqQmVwZ8nkLUrC/mc3HBHw4Imh++RXjwtLQFuOz3i65j9CSfKt50x6w/uUY2ovOQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-providers/1.12.0/leaflet-providers.min.js" integrity="sha512-LixflAm9c0/qONbz9F1Ept+QJ6QBpb7wUlPuyv1EHloTVgwSK8j3yMV3elnElGQcv7Y5QTFlF/FqyeE/N4LnKQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="anonymous" />

<div id="mapdiv" style="height:100vh; width: 100vw"></div>

我试过用 运行它L.geoJSON(geojson, {icon: icons} ).addTo(mymap)，但它似乎无法识别{icon: icons}为函数L.marker（它正在绘制默认的 Leaflet 标记）......L.geoJSON当我使用 LeafLet 时，有什么方法可以用函数绘制图标吗？

标签： leaflet

解决方案

I ended up finding the solution to this problem using the pointToLayer object instead of trying to use the icon object inside L.geoJSON. As it's written on the Leaflet geoJSON documentation, the accepted options inside it are only: style, pointToLayer, onEachFeature and filter. The icon option is not accepted inside the Leaflet geoJSON function and it should be used inside the pointToLayer object instead... The solution is the following:

const geojson = {
    "name": "interseccao_circulo",
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "properties": {
            },
            "geometry": {
                "type": "MultiPoint",
                "coordinates": [
                    [
                        -46.62831244066412,
                        -23.551014464955063
                    ]
                ]
            }
        },
        {
            "type": "Feature",
            "properties": {
            },
            "geometry": {
                "type": "MultiPoint",
                "coordinates": [
                    [
                        -46.63242614612176,
                        -23.55277865770234
                    ]
                ]
            }
        }
    ]
}

var mymap = L.map('mapdiv', {
  center:[-23.552778, -46.632426],
    zoom:16,
    maxZoom:20,
    zoomControl:false,
    attributionControl:false
});
var lyrOSRHOT = L.tileLayer.provider('OpenStreetMap.HOT');
mymap.addLayer(lyrOSRHOT);


L.geoJSON(geojson, {
    pointToLayer: function (feature, latlng) {
        const icons = new L.Icon({
            iconUrl: "https://i.imgur.com/ZcGeIVz.png",
            iconSize: [40, 40],
        });
        return L.marker(latlng, {icon: icons});
    }
}).addTo(mymap);
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet-src.min.js" integrity="sha512-XQr+/1RXvYozXiwrumwtu3lqQmVwZ8nkLUrC/mc3HBHw4Imh++RXjwtLQFuOz3i65j9CSfKt50x6w/uUY2ovOQ==" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-providers/1.12.0/leaflet-providers.min.js" integrity="sha512-LixflAm9c0/qONbz9F1Ept+QJ6QBpb7wUlPuyv1EHloTVgwSK8j3yMV3elnElGQcv7Y5QTFlF/FqyeE/N4LnKQ==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="anonymous" />


<div id="mapdiv" style="height:100vh; width: 100vw"></div>

推荐阅读