如何在 openlayers 中更改 geosjon 图层样式？

Question

I am new at OL.

I have a point geosjon file.

I want to change the colors of the point instead of the default color, and I can't figure out how to.

I have tried to use Openlayers own guide for static styles - but it doesn't make much sense to me. Link to the guide: https://openlayers.org/workshop/en/vector/style.html

When I don't put in the code from the guidebook my map works, but when I do chrome says this: enter image description here

I guess there is something wrong with my code, when I put the geosjon layer in the map - and I dont know what it is.

So please help me. The geosjon part of my .js code is:

var trees_cologne = new ol.layer.Vector({
 title: 'Some trees of Cologne',
source: new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: 'trees.geojson'
}),
//import of the trees

const layer = trees({
source: 'trees.geojson',
style: new Style({
  fill: new Fill({
    color: 'red'
  }),
  stroke: new Stroke({
    color: 'white'
  })
})
});

Answer 1

For points the style is usually a circle which will need to have a radius defined. The fill and stroke should be defined inside that (the stroke width should be set smaller than the radius). Also check that your geojson is using the same coordinate system as your map and if they are different the projections must be specified as appropriate in the format: dataProjection in OL5 (but default DataProjection in OL4) for the geojson and featureProjection for the map view. The complete layer setup should then look something like this:

var radius = 8;

var trees_cologne = new ol.layer.Vector({
    title: 'Some trees of Cologne',
    source: new ol.source.Vector({
        format: new ol.format.GeoJSON({ defaultDataProjection: 'EPSG:4326', featureProjection: 'EPSG:3857' }),
        url: 'trees.geojson'
    }},
    style: new ol.style.Style({
        image: new ol.style.Circle({
            radius: radius,
            fill: new ol.style.Fill({
                color: 'red'
            }),
            stroke: new ol.style.Stroke({
                color: 'white',
                width: radius / 4
            })
        })
    })
});