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

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

javascript leaflet

Javascript 如何从geojson设置传单标记的颜色,javascript,leaflet,geojson,Javascript,Leaflet,Geojson,我（出乎意料地）对传单中的样式标记有一个问题。我有一张地图，上面的列表显示了geojson（）中的一些地震。问题是我想根据geojson中的mag属性设置标记颜色。我自己尝试了一些代码，但似乎什么都不适合我。您是否知道问题出在哪里或如何解决？谢谢你的帮助。下面是我的js代码： <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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


var geoLayer，geoList，
map=新的L.map（'map'{
动物控制：错误，
中心：[30.9000,31.2400]，
缩放：2，
maxBounds:[-90，-180]，[90180]]，
图层：[
蒂莱耶(
'http://{s}.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png'{
属性：'&复制；
&抄袭；
',
子域：“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，
属性：“来自&mdash；地图数据&mdash；的图像”
}),
]           
});
map.addControl（L.control.zoom（{position:'topright'}））；
$.getJSON（'http://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/all_day.geojson，函数（json）{
geoLayer=L.geoJson（json{
onEachFeature：功能（功能，图层）{
var popupText=“幅值：”+feature.properties.mag
+“
位置：”+feature.properties.place
+“
”；
layer.bindPopup（popupText，{closeButton:false，偏移量：L.point（0，-20）}）；
on（'mouseover'，function（）{layer.openPopup（）；}）；
on（'mouseout'，function（）{layer.closePopup（）；}）；
},
pointToLayer：功能（特性、latlng）{
返回L.circleMarker（车床{
半径：数学圆（feature.properties.mag）*3，
});
},
}).addTo（地图）；
geoList=新的L.Control.GeoJSONSelector（geoLayer{
没错，
listOnlyVisibleLayers:真
});
map.addControl（地理列表）；
});

这是我的传单-geojson-selector.js:

您可以根据选择的值设置标记的样式，方法是将样式
函数添加到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上的简化示例：

你读过吗？是的，伙计，但不知怎么的，我被困在这一点上了。。