openlayers 4中如何获取json参数？答案

【问题标题】：How to get the geojson parameter in the openlayers4?openlayers 4中如何获取json参数？
【发布时间】：2019-01-18 09:53:24
【问题描述】：

我从 USGS 获取 geojson 数据，使用 openlayer4.6.5 绘制震中图。但我无法根据“mag”和“time”绘制不同的圆圈和颜色。

如何从 [geojson][1] 中获取 '''mag''' 参数或特征，以便我可以使用不同颜色和半径的圆。谢谢！

一些代码如下： '''

var styleFunction = function(feature) { 
   return styles[feature.getGeometry().getType()];
  };

  var vectorSource = new ol.source.Vector({
     url: 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_week.geojson',
     format: new ol.format.GeoJSON()
     });

    var vectorLayer = new ol.layer.Vector({ 
    source: vectorSource,
    style: styleFunction
  });

'''

  [1]: https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_week.geojson

【问题讨论】：

标签： javascript openlayers geojson

【解决方案1】：

您可以在 styleFunction 中使用 feature.get(propertyname) 并使用该值来控制样式，例如

var styleFunction = function(feature) {
    var now = new Date().getTime()
    var time = feature.get('time');
    var color;
    if (time < now - (96 * 3600000)) {
        color = 'rgba(255,255,0,'
    } else if (time < now - (48 * 3600000)) {
        color = 'rgba(255,191,0,'
    } else {
        color = 'rgba(255,0,0,'
    }
    return [
        new ol.style.Style({
            image: new ol.style.Circle({
                radius: (feature.get('mag')-3)*5,
                fill : new ol.style.Fill({
                    color: color + '0.5)'
                })
            })
        })
    ]
};

var vectorSource = new ol.source.Vector({
    url: 'https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/4.5_week.geojson',
    format: new ol.format.GeoJSON()
});
var vectorLayer = new ol.layer.Vector({ 
    source: vectorSource,
    style: styleFunction
});

var map = new ol.Map({
    layers: [
        new ol.layer.Tile({
            source: new ol.source.OSM(),
        }),
        vectorLayer
    ],
    target: 'map',
    view: new ol.View({
        center: [0,0],
        zoom: 2,
    })
});

<link rel="stylesheet" href="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/css/ol.css" type="text/css">
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.3.0/build/ol.js"></script>
<div id="map" class="map"></div>

【讨论】：