Как установить цвет маркера листовки от geojson

У меня есть вопрос (неожиданно) о маркерах стилей в листовке. У меня есть карта со списком, отображающим некоторые землетрясения из геойсона (http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson). Дело в том, что я хочу установить цвета маркеров из-за свойства mag в geojson. Я попробовал какой-то код самостоятельно, но ничего не работает для меня. Есть ли у вас какая-то идея, где может быть проблема или как это сделать? Спасибо за твою помощь. Ниже мой JS код:Как установить цвет маркера листовки от geojson

<!DOCTYPE html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<link rel="stylesheet" href="leaflet.css" /> 
<link rel="stylesheet" href="leaflet-geojson-selector.css" /> 
<link rel="stylesheet" href="style.css" /> 
</head> 
<body> 
<div class="top"></div> 
<div id="map"></div> 
<script src="moment.min.js"> </script> 
<script src="jquery.min.js"></script> 
<script src="leaflet.js"></script> 
<script src="leaflet-geojson-selector.js"></script> 
<script> 

var geoLayer, geoList, 
    map = new L.Map('map', { 
    zoomControl:false, 
    center: [30.9000, 31.2400], 
    zoom: 2, 
    maxBounds: [[-90,-180],[90,180]], 

layers: [ 
L.tileLayer(
     'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png', { 
attribution: '&copy;  
<a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; 
<a href="http://cartodb.com/attributions">CartoDB</a>', 
subdomains: 'abcd', 
minZoom: 2, 
maxZoom: 3, 
     }), 
L.tileLayer('http://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}', { 
maxZoom: 20, 
minZoom: 4, 
attribution: 'Imagery from <a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' 

}), 
]   
}); 

map.addControl(L.control.zoom({position:'topright'})); 

$.getJSON('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson', function(json) { 

    geoLayer = L.geoJson(json, { 
    onEachFeature: function(feature,layer) { 

var popupText = "<b>Magnitude:</b> " + feature.properties.mag 
      + "<br><b>Location:</b> " + feature.properties.place 
      + "<br><a href='" + feature.properties.url + "'>More info</a>"; 


      layer.bindPopup(popupText, {closeButton: false, offset: L.point(0, -20)}); 
      layer.on('mouseover', function() { layer.openPopup(); }); 
      layer.on('mouseout', function() { layer.closePopup(); });  
}, 

pointToLayer: function (feature, latlng) { 
return L.circleMarker(latlng, { 
radius: Math.round(feature.properties.mag)*3,    
}); 
}, 
}).addTo(map); 

    geoList = new L.Control.GeoJSONSelector(geoLayer, { 
     zoomToLayer: true, 
     listOnlyVisibleLayers: true 
    }); 

    map.addControl(geoList); 

    }); 
</script> 
</body> 
</html>

Вот мои листовки-GeoJSON-selector.js: https://jsfiddle.net/3tmre0pf/

источник

2017-02-23 peter

Вы читали http://leafletjs.com/examples/geojson/? – IvanSanchez

Да, приятель, но я как-то застрял на этом. – peter

Вы можете стилизовать свои маркера в зависимости от выбраного значения путем добавления функцииstyle к вашему GeoJSON звоните:

$.getJSON('http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson', function(json) { geoLayer = L.geoJson(json, { style: function(feature) { var mag = feature.properties.mag; if (mag >= 4.0) { return { color: "red" }; } else if (mag >= 3.0) { return { color: "orange" }; } else if (mag >= 2.0) { return { color: "yellow" }; } else { return { color: "green" }; } }, onEachFeature: ... }

упрощенный пример на codepen: http://codepen.io/dagmara223/pen/LWYNJO

источник

2017-02-23 14:09:33 d324223

Как установить цвет маркера листовки от geojson

ответ

Смежные вопросы