如何在openlayers4中獲取geojson參數？

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>