Question

我从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

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

如何在openlayers4中获取geojson参数？

1 个答案: