0

에서 현재 내가지도에 HTML을 사업부로 정의 마커를 추가 Google지도 자바 스크립트 API v3의 사용자 정의 오버레이를 사용 Openlayers 3.사용자 정의 오버레이는 OpenLayers 3

작업입니다. 이 마커는 다른 사용자 정의 오버레이로 그룹화되고 플롯됩니다.

OpenLayers 3에서 동일한 기능을 구현하려고했지만 OpenLayers 3의 오버레이가 하나의 오버레이에서 하나의 마커를 사용하므로 솔루션을 찾을 수 없습니다.

마커를 그룹화하기 위해 OpenLayers 3에 오버레이를 그룹화 할 수 있습니까? 아니면 다른 옵션을 사용할 수 있습니까?

+0

나도 같은 문제에 직면 해있다. leaflet.js도 시도해 볼 수 있습니다 –

+0

하지만 OpenLayers 3의 솔루션이 필요합니다. – SHK

답변

0

가능한 옵션은 여러 가지가 있습니다. 당신은 단지 데이터 세트가있는 경우

A)는, 당신은 StyleFunction를 사용할 수 있습니다.

var vectorLayer = new ol.layer.Vector({ 
    source: new ol.source.Vector({ 
     url: 'https://openlayers.org/en/v3.20.1/examples/data/geojson/countries.geojson', 
     format: new ol.format.GeoJSON() 
    }), 
    style: function(feature, resolution) { 
     style.getText().setText(resolution < 5000 ? feature.get('name') : ''); 
     return style; 
    } 
    }); 

style 속성을 참조하십시오 :이 코드 ol3 vector example, 더 구체적으로이 섹션을 참조하십시오? 위에서 설명한 것처럼 ol.style.Style 또는 스타일 함수 일 수 있습니다. 이 함수는지도보기의 지형지 물 및 현재 해상도를 인수로받으며 지형지 물이 렌더링 (또는 다시 렌더링) 될 때마다 호출됩니다. ol.style.Style 또는 스타일 개체 배열을 반환하면 /이 스타일을 사용하여 기능이 렌더링됩니다.

이 지형지 물은 고유 한 속성을 가질 수 있습니다 (예 : feature.getProperties()). 지형지 물 내에서 많은 속성을 사용하여 고유 한 스타일 개체 배열을 반환 할 수 있습니다.

여기에 더해서 해상도에 따라 동적 스타일의 예를 볼 수 있습니다. 그러면 피쳐 속성을 사용하여 수행 할 수있는 작업에 대해 더 잘 이해할 수 있습니다. 당신이 여러 데이터 세트가있는 경우

B), 당신은 세트 당 하나 개의 벡터 레이어를 만들 수 있으며, 기능을 모두 같은 렌더링 것이다, 레이어에 독특한 스타일의 객체를 정의합니다.

+0

답장을 보내 주셔서 감사합니다. 그러나 마커에 대한 정보를 저장하기 위해 각 마커에 html div를 사용해야합니다. 오버레이 스타일링이 어떻게 도움이되는지 모르겠습니다. – SHK

+0

ol3의 벡터 예제 (답변에서 동일)를 보면 마우스로 마우스를 가져 가면 표시되는 정보가 나타납니다. 그것들은 ol.Feature를 사용하여 렌더링됩니다 .Overlay가 아닙니다. 나는 이것이 당신에게 좋은 접근법이 될 수 있다고 생각합니다. –