Question

我正在根据数据值（使用＆＃34; case＆＃34;？）获取Leafletjs geojson样式标记的示例。我已经看过这个教程，但我找不到它......

我想知道如何根据geojson文件中的数据值分配图标（PNG）。

例如，这是我的geojson：

var DATA = {
  "type": "FeatureCollection",
  "crs": { "type": "name", "properties": { "name": "urn:ogc:def:crs:OGC:1.3:CRS84" } },

"features": [
    { "type": "Feature", "properties": 
    { "SIZE" : "S", "CAT" : "A", "COLUMN1": "CODE 1234", "COLUMN2": "London" }, "geometry": { "type": "Point", "coordinates": [ 55.1, -0.11 ] } },

    { "type": "Feature", "properties": 
    { "SIZE" : "S", "CAT" : "B", "COLUMN1": "CODE 121314", "COLUMN2": "Paris" }, "geometry": { "type": "Point", "coordinates": [ 48.8, 2.3 ] } },

    { "type": "Feature", "properties": 
    { "SIZE" : "L", , "CAT" : "B", "COLUMN1": "code 5678", "COLUMN2": "New-York" }, "geometry": { "type": "Point", "coordinates": [ 40.7, -73.99 ] } },

    { "type": "Feature", "properties": 
    { "SIZE" : "XL", , "CAT" : "C", "COLUMN1": "code 91011", "COLUMN3": "Tokyo" }, "geometry": { "type": "Point", "coordinates": [ 35.6, 139.7 ] } },
]
};

我期待： - 根据＆＃34; SIZE＆＃34;值：S = iconS.PNG; L = iconL.PNG ...... - 根据＆＃34; CAT＆＃34;值：A = iconA.PNG; B = iconB.PNG ......

第二个分析（在＆＃34; CAT＆＃34;值＆＃34;是一个新的baseMaps）。

如果你能帮忙找到它，请提前感谢，

Answer 1

您可以为每种类型的城市创建不同的图标，如下所示：

// create an icon object
var cityS = L.icon({
    iconUrl: 'cityIconS.png',
    iconSize:     [38, 38], // size of the icon
    iconAnchor:   [22, 22], // point of the icon which will correspond to marker's location
    popupAnchor:  [-3, -26] // point from which the popup should open relative to the iconAnchor
});
var cityL = L.icon({
    iconUrl: 'cityIconL.png',
    iconSize:     [58, 58],
    iconAnchor:   [22, 22],
    popupAnchor:  [-3, -26]
});
var cityXL = L.icon({
    iconUrl: 'cityIconXL.png',
    iconSize:     [78, 78],
    iconAnchor:   [22, 22],
    popupAnchor:  [-3, -26]
});

然后使用条件：

添加geojson数据

var cities = L.geoJson(DATA,{
    onEachFeature:onEachFeature
}).addTo(map)

function onEachFeature(feature, layer) {
    var lat = feature.geometry.coordinates[0];
    var lon = feature.geometry.coordinates[1];
    var popupContent; 
    var marker;
    switch(feature.properties.SIZE) {
        case "L":
            marker = L.marker([lat, lon], {icon: cityL}).addTo(map);
            popupContent = feature.properties.COLUMN2
            break;
        case "XL":
            marker = L.marker([lat, lon], {icon: cityXL}).addTo(map);
            popupContent = feature.properties.COLUMN2
            break;
        default:
            marker = L.marker([lat, lon], {icon: cityS}).addTo(map);
            popupContent = feature.properties.COLUMN2
    }

    marker.bindPopup(popupContent);
}

根据价值，传单geojson图标

1 个答案: