OpenLayers 3에서 확대 / 축소 할 때 기능의 크기를 조정하고 확장되지 않도록하는 방법

지도로 이미지를 사용하여 사용자 정의 OpenLayers 3지도 (주변에서 판매용 주택을 표시하는 데 사용)를 초기화했습니다.

그런 다음 각 주택에 대해 추가 기능 및 레이어를 동적으로 만듭니다 (각 기능의 앵커는 이미지의 중간으로 설정 됨).

size기능을 초기화 할 때 속성 을 사용하려고 시도 했지만 기능 의 크기를 조정하는 대신 이미지를 자릅니다 .

resizeOL2 어딘가에 레이어에 대한 기능을 보았지만 OL3에서 찾을 수 없습니다 ... 그런 종류의 기능이 원하는 결과를 얻습니까?

또한지도를 축소하면 지형지 물이 너무 커지고 크게 확대하면 크기가 너무 작아지는 문제가 있습니다. 지형지 물의 좌표를 지정하고 주변에 너무 크거나 작아지는 것을 막기 위해 주변에 일종의 보이지 않는 여백 / 패딩을 수행하는 방법이 있습니까?

다음은 지형지 물의 실제 동작입니다 (여기에서 보이는 지형지 물은 검은 집입니다) : -다음 : 완벽한 크기, 축소 할 때 집은 더 작아야합니다 (첫 번째 그림에서 볼 수 있음). -이 마지막 사진에서 다시 축소하는 대신 집이 더 커졌습니다. .

나는 당신이을 사용한다고 가정합니다 ol.style.Icon. 아이콘 이미지의 크기를 조정하는 데 사용할 수 ol.style.Icon있는 scale 옵션 이 있습니다.

예를 들어 이미지의 크기를 줄이려면 다음과 같이 사용하십시오.

var style = new ol.style.Style({
  image: new ol.style.Icon({
    url: 'http://example.com/icon.png',
    scale: 0.5,
    // …
  })
});

scale현재 해상도에 따라 다른 값 을 원하면 벡터 레이어에 스타일 함수를 전달할 수 있습니다.

var iconStyle = new ol.style.Icon({
  url: 'http://example.com/icon.png',
  // …
});

var styles = [new ol.style.Style({
  image: iconStyle
})];

var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector(),
  style: function(feature, resolution) {
    // "func" is your function that gives you a scale for a resolution
    var scale = func(resolution);
    iconStyle.setScale(scale);
    return styles;
  })
});

위 코드는 최적화로서 스타일 함수가 호출 될 때마다 객체를 생성하지 않도록 ol.style.Icon객체, ol.style.Style객체 및 스타일 배열을 재사용합니다 .