2015-11-05 37 views
1

我正在敲牆頭,想知道爲什麼這種風格沒有被應用。點以默認樣式呈現。不能得到Openlayers 3風格的應用

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

如果您創建瞭如下功能,則代碼更少:'new ol.Feature(new ol.geom.Point(coord))'。 –

回答

2

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不會重新創建樣式。

+0

我改變了這個建議的代碼,但我得到了上面編輯中描述的結果。 – interwebjill

+0

@interwebjill查看更新後的答案,這是「ol.geom.Point」的正確樣式。 –

+0

我得到一個TypeError:ol.styleCircle不是一個構造函數。 – interwebjill

0

很長時間我不在OL3中,但看着文檔。

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

Features can be styled individually with setStyle; otherwise they use the style of their vector layer or feature overlay.

創建「類實例」將無法正常工作時,所以,也許傳遞樣式屬性。

如果你嘗試先創建功能,然後做

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

還要注意的是accordint的文檔,http://openlayers.org/en/v3.5.0/apidoc/ol.style.Style.html仍處於實驗階段,以及相關的一切。

或嘗試將樣式添加到tortySource

這只是一種探索的方式,我不能採取行動,這將工作100%。