gpt4 book ai didi

javascript - Openlayers - 根据属性设置矢量图层的样式

转载 作者:行者123 更新时间:2023-12-02 22:09:40 25 4
gpt4 key购买 nike

我创建了一个具有不同矢量图层的 openlayers map 。现在我想根据 geojson 中属性表的属性“AVG_UHVI_A”设置“hitzeLayer”的样式。 “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
})
});
});

最佳答案

你说数据在0到1之间。

第一 if样式函数中的语句是 if value <= 1 ,因此您的所有功能都将采用第一种样式。

你会想要相反的方式:

if value < 0.5 then ..., else if value < 0.75 then ... else ... (else 为 >=0.75 且 <=1,因为它是最大可能值)

关于javascript - Openlayers - 根据属性设置矢量图层的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59601332/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com