如何在 openlayers 中更改 geosjon 圖層樣式？

Question

我是 OL 的新人。

我有一個點 geosjon 文件。

我想更改點的顏色而不是默認顏色，但我不知道該怎么做。

我曾嘗試使用 Openlayers 自己的靜態樣式指南 - 但這對我來說沒有多大意義。 指南鏈接： https : //openlayers.org/workshop/en/vector/style.html

當我沒有輸入指南中的代碼時，我的地圖可以工作，但是當我使用 chrome 時會說：在此處輸入圖像描述

我想我的代碼有問題，當我將 geosjon 圖層放在地圖中時 - 我不知道它是什么。

所以請幫助我。 我的 .js 代碼的 geosjon 部分是：

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

對於點，樣式通常是一個需要定義半徑的圓。 填充和描邊應該在里面定義（描邊寬度應該設置為小於半徑）。 還要檢查您的 geojson 是否使用與地圖相同的坐標系，如果它們不同，則必須以適當的格式指定投影： OL5 中的 dataProjection（但 OL4 中的默認DataProjection）用於 geojson 和 featureProjection 用於地圖視圖。 完整的圖層設置應該如下所示：

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
            })
        })
    })
});