значок буклета geojson в соответствии со значением

Question

Я искал пример маркеров стиля Leafletjs geojson в соответствии со значениями данных (используя «случай»?). Я уже видел учебник по этому вопросу, но я не могу найти его ...

Я хотел бы знать, как назначить значок (PNG) в соответствии с данным из файла geojson.

Для примера, это мой 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 ] } }, 
] 
}; 

Я ожидал: - в соответствии с "размер" значение: S = iconS.PNG; L = iconL.PNG ... - согласно значению «CAT»: A = iconA.PNG; B = iconB.PNG ...

Вторые Analys (на «САТ» ценности»является новым базовых карт).

Спасибо заранее, если вы могли бы помочь найти его,

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