2017-03-29 83 views
0

我有一個矢量多邊形ol3,我正在爲多邊形的輪廓使用彩色填充和白色筆劃樣式。如何停止多邊形筆劃樣式重疊多邊形填充

new ol.style.Style({ 
     stroke: new ol.style.Stroke({ 
      color: '#ffffff', 
      width: 3 
     }), 
     fill: new ol.style.Fill({ 
      color: 'rgba(241, 135, 0, 0.7)' 
     }) 
     }) 

在更高的分辨率這種風格是好的,筆觸和填充的明確界定:

enter image description here

但縮小意味着行程侵佔填充,最終它們重疊和隱藏填充:

enter image description here

我認爲,這是由於中風在MI被繪製多邊形的線的一半,所以它的一半在外面,一半在多邊形的內部,因此當縮小內部的一半時會填充隱藏填充的多邊形。

我想多邊形只有在多邊形的外部繪製線條:更像陰影。我已經選擇了一個遊戲,但沒有完全管理它。

有沒有人知道一個設置,可以實現這一點,而不是訴諸動態減少筆畫的寬度或在地圖上縮小時隱藏筆畫。

回答

0

爲了解決這個問題,而不是同時具有填充和描邊設置多邊形樣式單一的風格,我設置多邊形樣式爲樣式數組,其中第一個爲筆畫,第二個爲填充,所以按此順序繪製意味着填充也將位於筆劃頂部,而縮小時意味着填充仍然可見並不重疊。

[new ol.style.Style({ 
    stroke: new ol.style.Stroke({ 
     color: '#ffffff', 
     width: 4 
    }) 
    }), new ol.style.Style({ 
    fill: new ol.style.Fill({ 
     color: 'rgba(241, 135, 0, 0.7)' 
    }) 
    })] 

的1個問題與此是由於填充不透明就意味着你可以看到下面填充行程的輕微輪廓。但如果填充是穩固的,這不會是一個問題。不完美,但我可以繼續前進。

0

使用樣式函數並使用作爲參數傳遞給樣式函數的分辨率更改筆畫樣式。

檢查這個代碼剪斷:

var style = new ol.style.Style({ 
    fill: new ol.style.Fill({ 
    color: 'rgba(255, 255, 255, 0.6)' 
    }), 
    stroke: new ol.style.Stroke({ 
    color: '#319FD3', 
    width: 1 
    }), 
    text: new ol.style.Text({ 
    font: '12px Calibri,sans-serif', 
    fill: new ol.style.Fill({ 
     color: '#000' 
    }), 
    stroke: new ol.style.Stroke({ 
     color: '#fff', 
     width: 3 
    }) 
    }) 
}); 



var vectorLayer = new ol.layer.Vector({ 
    source: new ol.source.Vector({ 
    url: 'https://openlayers.org/en/v3.19.0/examples/data/geojson/countries.geojson', 
    format: new ol.format.GeoJSON() 
    }), 
    style: function(feature, resolution) { 
    if(resolution < 5000) { //adjust the resolution to fit your needs 
    style.stroke_.setWidth(5); //change the stroke depending on resolution 
    } else { 
    style.stroke_.setWidth(1);//reset it back 
    } 
    return style; //and return it 
} 
}); 

here is a fiddle看到它在行動