Как получить параметр geojson в openlayers4? - PullRequest
Новая
       9

Как получить параметр geojson в openlayers4?

0 голосов
/ 18 января 2019

Я получаю данные геоджон от USGS, чтобы нарисовать карту эпицентров, используя openlayer4.6.5. но я не могу нарисовать другой круг и цвет в соответствии с "mag" и "time".

Как получить параметр '' 'mag' '' или функцию из [geojson] [1], чтобы я мог различать цвет и радиус круга. Спасибо!

некоторый код как следующий: '' '

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

1 Ответ

0 голосов
/ 26 января 2019

Вы можете использовать feature.get (propertyname) в вашей styleFunction и использовать значение для управления стилем, например 

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