OpenLayers 3 : 기능의 스타일을 변경 한 후 맵을 새로 고치는 방법?

9

일부 벡터 소스 ( ol.source.Vector) 및 관련 벡터 레이어 ( ol.layer.Vector) 가있는 OpenLayers 3.2.0 맵이 있습니다.

기능 ( ol.Feature)이 벡터 소스에 추가 되면 data해당 기능이 나타내는 자바 스크립트 객체로 설정된 속성 이 제공 됩니다. TypeScript는 다음과 같습니다 ...

vectorSource.addFeature(new ol.Feature({
    geometry: /* ... */,
    data: vectorData,
}));

그런 다음 벡터 레이어에는 data속성 을 읽고 해당 스타일을 검색하는 스타일 함수가 있습니다.

vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    renderBuffer: /* ... */,
    style: function (feature: ol.Feature, resolution: any) {
        var data = </* TypeScript Type */>feature.get('data');
        if ((data) && (data.style)) {
            return [data.style];
        }
        else {
            /* return default style */
        }
    }
});

지도와 관련이없는 이벤트로 인해 스타일이 변경되는 경우가 있습니다. 예를 들어, 개체가 유효하지 않으면 스타일이 변경됩니다. 분명히, data.style그것은 내 통제 내에 완전히 있기 때문에 그것을 바꾸는 것은 사소한 것입니다.

문제는 맵이 스타일이 변경되었음을 알지 못한다는 것입니다. 객체의 스타일을 변경 한 다음 맵을 확대 / 축소하여 강제로 다시 그리면 스타일 함수가 실행되고 새 스타일이 반환되고 지형지 물이 다시 그려지는 것을 알 수 있습니다. 프로그래밍 방식으로지도를 새로 고침하려면 어떻게해야하나요?

몇 가지 검색 및 실험 후 시도했습니다.

호출 render()온 ol.Map자체.
호출 dispatchChangeEvent()온ol.source.Vector
호출 redraw()온ol.layer.Vector

이것들은 제안되었지만 그중 아무것도 작동하지 않았으며, 첫 번째 방법 만 OpenLayers 3.2.0 API 문서에 나열되어 있으며 안정적으로 표시되어 있지 않기 때문에 놀라운 것은 아닙니다.

openlayers-2

— 할리
소스

vectorlayer.refresh ({force : true})를 사용해 보셨습니까? ?

— ylka

OpenLayers 2 방법이기 때문에 놀랍지 않게 작동하지 않습니다.

— Xharlie

12

우연히 대답에 걸려 넘어 changed()졌습니다 style. 관련 데이터 의 속성을 변경 한 후 기능 자체 를 호출 하는 것 입니다. 참조 : http://openlayers.org/en/v3.2.0/apidoc/ol.Feature.html?unstable=true#changed

이를 위해서는 ol.Feature각 vectorData객체 와 관련된 객체를 추적해야 합니다 (이전에는 vectorData기능 을 사용하여 찾을 수 get()있었지만 이제는 비용이 많이 들지 않습니다).

(내가보고이를 발견 setGeometry하고 setStyle및 다른 방법은 ol.Feature그들이 무엇을 볼 수 있습니다.)

— 할리
소스

이 방법은 효과가 있지만 changed합리적인 수의 기능을 요구하면 실제로는 심각한 성능 저하가 발생합니다 (Chrome에 여러 번 충돌). changed()모든 기능이 변경된 후 레이어 소스를 호출 하는 것이 좋습니다 .

— Kyle

0

지형을 삭제 한 후지도에서 지형지 물 (폴리곤)을 사라지게하는 방법을 알아내는 데 일주일을 보냈습니다 vectorSource.removeFeature(selectedFeature). 해결책은 없었습니다. 이상하게도 현재 OL3 v3.15.1에는 기본 강제 새로 고침 / 렌더링 기능이 없습니다. 나를 위해 일한 해결책은 selectedFeature의 스타일 을 바꾸는 것이 었습니다 .

        var newStyle = new ol.style.Style({
            image: new ol.style.Circle({
                radius: 5,
                fill: new ol.style.Fill({color: 'red'}),
                stroke: new ol.style.Stroke({color: 'yellow', width: 1})
            })
        });
        selectedFeature.setStyle(newStyle)

피처가 레이어에서 이미 제거되었지만 새로 고쳐지지 않았으므로 모든 스타일이 작동합니다.

— 모리
소스