폴리곤 획 스타일 겹침 폴리곤 채우기 중지 방법

Question

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

높은 해상도에서이 스타일은 괜찮 스트로크 및 채우기 잘 정의되어

그러나 축소는 스트로크가 채우기를 잠식하고 결국이 겹쳐 칠을 숨길 의미 :

나는 이것이 마일에 그려지는 스트로크 때문이라고 생각 다각형의 선의 ddle과 그 반은 바깥 쪽이고 반쪽은 다각형 내부에 있으므로 내부의 절반을 축소하면 채우기를 숨기는 다각형이 채워집니다.

다각형의 외부에 그려진 선만을 다각형으로 만들고 싶습니다. 음영과 같습니다. 나는 옵션을 갖고 놀았지만 그것을 관리하지는 못했다.

지도를 축소 할 때 획의 너비를 줄이거 나 획을 숨기지 않고도이를 달성 할 수있는 설정을 아는 사람이 있습니까?

Answer 1

그것을 볼 수 첫 번째는 획으로, 두 번째는 채우기로 스타일의 배열로서의 폴리곤 스타일로,이 순서로 그리는 것은 채우기도 획 위쪽에 놓이게된다는 것을 의미하며, 축소하면 채우기가 여전히 표시됨을 의미합니다. 중복되지 않습니다.

[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)' 
    }) 
    })] 

이 함께 한 문제로 인해 채우기가 불투명 한 것에 당신이 채우기 아래 스트로크의 약간의 개요를 볼 수 있다는 것을 의미한다는 것이다. 그러나 채우기가 확실하다면 이것은 문제가되지 않습니다. 완벽하지는 않지만 계속 나아갈 수 있습니다.

Answer 2

스타일 함수를 사용하고 스타일 함수에 인수로 전달 된 해상도를 사용하여 획 스타일을 변경하십시오.

확인이 코드 싹둑 :

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, 내가 설정 채우기 및 스트로크 모두 하나의 스타일로 다각형 스타일을 설정하는 대신이 문제를 극복하기 위해 행동에