Openlayers - установить стиль векторного слоя в соответствии с атрибутом - PullRequest
Новая
       55

Openlayers - установить стиль векторного слоя в соответствии с атрибутом

0 голосов
/ 05 января 2020

Я создал карту открытых слоев с различными векторными слоями. Теперь я хочу установить стиль для «hitzeLayer» в соответствии с атрибутами «AVG_UHVI_A» таблицы атрибутов из geo json. Атрибуты в столбце «AVG_UHVI_A» имеют разные значения в диапазоне от 0 до 1, которые описывают тепловой индекс нескольких местоположений. Я попробовал это со следующим кодом, но это не сработало. Я очень рад любой поддержке. :) 

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import Stamen from 'ol/source/Stamen';
import VectorLayer from 'ol/layer/Vector';
import Vector from 'ol/source/Vector';
import GeoJSON from 'ol/format/GeoJSON';
import Style from 'ol/style/Style';
import Circle from 'ol/style/Circle';
import Fill from 'ol/style/Fill';
import Stroke from 'ol/style/Stroke';
import Overlay from 'ol/Overlay';
import {
  fromLonLat,
  toLonLat
} from 'ol/proj';
import sync from 'ol-hashed';
import OSM from 'ol/source/OSM';
import Feature from 'ol/Feature';
import {
  circular
} from 'ol/geom/Polygon';
import Point from 'ol/geom/Point';
import Control from 'ol/control/Control';
import * as olProj from 'ol/proj';
import XYZ from 'ol/source/XYZ';

// define the map
const map = new Map({
  target: 'map',
  view: new View({
    center: fromLonLat([16.37, 48.2]),
    zoom: 13
  })
});

sync(map);

//Adresssuche
const searchResultSource = new Vector();
const searchResultLayer = new VectorLayer({
  source: searchResultSource
});

searchResultLayer.setStyle(new Style({
  image: new Circle({
    fill: new Fill({
      color: 'rgba(0, 128, 0, 1)'
    }),
    stroke: new Stroke({
      color: '#000000',
      width: 1.25
    }),
    radius: 15
  })
}));

var element = document.getElementById('search');
element.addEventListener('keydown', listenerFunction);

function listenerFunction(event) {
  console.log(event);
  console.log(event.keyCode);
  if (event.keyCode === 13) {

    const xhr = new XMLHttpRequest;
    xhr.open('GET', 'https://photon.komoot.de/api/?q=' + element.value + '&limit=3');
    xhr.onload = function () {
      const json = JSON.parse(xhr.responseText);
      const geoJsonReader = new GeoJSON({
        featureProjection: 'EPSG:3857'
      });
      searchResultSource.clear();
      const features = geoJsonReader.readFeatures(json);
      console.log(features);
      searchResultSource.addFeatures(features);
      if (!searchResultSource.isEmpty()) {
        map.getView().fit(searchResultSource.getExtent(), {
          maxZoom: 18,
          duration: 500
        });
      }
    };
    xhr.send();


  }
}

//OpenStreetMap
const OSMbaseLayer = new TileLayer({
  type: 'base',
  source: new OSM()
});

// Statellit
const satellitLayer = new TileLayer({
  source: new XYZ({
    attributions: ['Powered by Esri', 'Source: Esri, DigitalGlobe, GeoEye, Earthstar Geographics, CNES/Airbus DS, USDA, USGS, AeroGRID, IGN, and the GIS User Community'],
    attributionsCollapsible: false,
    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
    maxZoom: 30
  })
});

//shape
const parkLayer = new VectorLayer({
  source: new Vector({
    name: 'park',
    url: 'data/park1.geojson',
    format: new GeoJSON()
  })
});

parkLayer.setStyle(new Style({
  fill: new Fill({
    color: 'green'
  }),
  stroke: new Stroke({
    color: 'green',
    width: 1.25
  }),
}));

const hitzeLayer = new VectorLayer({
  source: new Vector({
    name: 'hitze',
    url: 'data/hitze.geojson',
    format: new GeoJSON()
  })
});

hitzeLayer.setStyle(function(feature) {
  let fillColor;
  const hitzeindex = feature.get('AVG_UHVI_A');
  if (hitzeindex <= 1) {
    fillColor = 'rgba(238, 233, 233, 0.7';
  } else if (hitzeindex < 0.75) {
    fillColor = 'rgba(205, 201, 201, 0.7)';
  } else {
    fillColor = 'rgba(139, 137, 137, 0.7)';
  }
  return new Style({
    fill: new Fill({
      color: fillColor
    }),
    stroke: new Stroke({
      color: 'rgba(4, 4, 4, 1)',
      width: 1
    })
  });
});

1 Ответ

1 голос
/ 05 января 2020

Вы говорите, что данные находятся в диапазоне от 0 до 1.

1-й оператор if в функции стилевого оформления равен if value <= 1, поэтому все ваши функции будут стилизованы в 1-м стиле.

Вам понадобится наоборот:

if value < 0.5 then ..., else if value < 0.75 then ... else ... (остальное> = 0,75 и <= 1, поскольку это максимально возможное значение) </p>

...