無法獲取要應用的Openlayers 3樣式

Question

我正在敲牆，想知道為什么不采用這種風格。 點以默認樣式渲染。

                if ((Math.abs(prevCoord[0] - currCoord[0]) < 500) && (Math.abs(prevCoord[1] - currCoord[1]) < 500)) {
                    console.log("tortuous");
                    var tortySource = new ol.source.Vector(); // create an empty source instance

                    var tortyPoint = new ol.geom.Point(currCoord);

                    var tortyFeature = new ol.Feature({ // create a feature with the point geometry
                        geometry: tortyPoint,
                        style: new ol.style.Style({
                            fill: new ol.style.Fill({
                                color: 'rgba(255,0,0,0.5)'
                            })
                        })
                    });

                    tortySource.addFeature(tortyFeature); // add the feature to the source

                    var tortyLayer = new ol.layer.Vector({ // create a layer with that source
                        source: tortySource
                    });

                    map.addLayer(tortyLayer);
                };

編輯當我嘗試使用setStyle時，我是這樣做的。 我所有的觀點都消失了。

                if ((Math.abs(prevCoord[0] - currCoord[0]) < 500) && (Math.abs(prevCoord[1] - currCoord[1]) < 500)) {
                    console.log("tortuous");
                    var tortySource = new ol.source.Vector(); // create an empty source instance

                    var tortyPoint = new ol.geom.Point(currCoord);

                    var tortyFeature = new ol.Feature({ // create a feature with the point geometry
                        geometry: tortyPoint
                    });

                    tortyFeature.setStyle(
                        new ol.style.Style({
                            fill: new ol.style.Fill({
                                color: [255, 0, 0, 0.5]
                            })
                        })
                    );

                    tortySource.addFeature(tortyFeature); // add the feature to the source

                    var tortyLayer = new ol.layer.Vector({ // create a layer with that source
                        source: tortySource
                    });

                    map.addLayer(tortyLayer);
                };

Answer 1

ol.Feature沒有樣式屬性。 您不能在構造函數上設置樣式。 您應該使用ol.Feature#setStyle 。 所以：

feature.setStyle(
  new ol.style.Style({
    image: new ol.style.Circle({
        fill: new ol.style.Fill({ color: [255,0,0,1] }),
        stroke: new ol.style.Stroke({ color: [0,0,0,1] }),
        radius: 5
    })
  })
);

最好將樣式存儲在變量中，這樣OL不會重新創建樣式。

Answer 2

很長一段時間我不在OL3中，而是在看文檔。

http://openlayers.org/en/v3.5.0/apidoc/ol.Feature.html

可以使用setStyle分別設置樣式。 否則，他們將使用其矢量層或要素疊加層的樣式。

因此，在創建“類實例”時將樣式作為屬性傳遞可能會行不通。

如果您嘗試先創建功能然后執行

tortyFeature.setStyle({    
    fill: new ol.style.Fill({
        color: 'rgba(255,0,0,0.5)'
    })
}

另請注意，與文檔一致的http://openlayers.org/en/v3.5.0/apidoc/ol.style.Style.html以及所有相關內容仍處於試驗階段。

或者嘗試將樣式添加到tortySource 。

這只是一種探索方式，我無法采取行動，這會100％起作用。