javascript - 如何从 geojson 设置传单标记的颜色

我有一个关于传单中样式标记的问题(出乎意料)。我有一张 map ，其中显示了来自 geojson ( http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson) 的一些地震列表。问题是我想根据 geojson 中的 mag 属性设置标记颜色。我自己尝试了一些代码，但似乎对我没有任何作用。您是否知道问题出在哪里或如何解决？谢谢你的帮助。下面是我的js代码:

<!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>

这是我的 leaflet-geojson-selector.js :https://jsfiddle.net/3tmre0pf/

最佳答案

通过将 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

关于javascript - 如何从 geojson 设置传单标记的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42415032/

javascript - 如何从 geojson 设置传单标记的颜色

上一篇：javascript - 从数组中的对象添加值

下一篇：javascript - 如何使用 SystemJS 加载命名导出