Question

我对传单中的样式标记有一个问题（意外）。我有一张地图，上面列出了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>

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

Answer 1

您可以通过在 geojson调用中添加 style函数，根据选择的值设置标记的样式：

$.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

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

1 个答案: