如何设置geojson中传单标记的颜色

我有一个关于传单中样式标记的问题（意外）。我有一个地图，列表中显示来自geojson的一些地震（http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson）。事情是我想设置标记颜色归因于geojson中的mag属性。我自己尝试了一些代码，但似乎没有任何工作适合我。请问您有什么想法可能是问题或如何做到这一点？谢谢你的帮助。下面是我的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的形式有所choosen价值的标志物拨打：

$.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中传单标记的颜色

回答

相关问题