2016-08-27 3 views
2
나는 다음과 같은 작업을 가지고

통해 지상 층의 이미지를 부착.OpenLayers :</p> <p>는 식물 이상 (AN JPG 이미지로 제공) 접지 층을 연결 : 큰 건물

나는 해결책을 찾았다 고 생각했습니다. CodePen에

라이브 데모 : 예상대로 http://codepen.io/mizech/full/dXBoRq/

는하지만이 작동하지 않습니다. 지도를 확대하거나 축소하면 이미지의 크기가 커지거나 작아지지 않습니다.

또한 이미지가지도와 함께 회전해야합니다. 그것은 둘 다 작동하지 않습니다.

따라서 내 질문 :

내가이 길을 작동하게하려면 어떻게해야합니까 그것을해야 (이미지 스케일 회전 할 때 줌인 및 줌아웃이 이미지는 다음) 를?

아니면 완전히 다른 접근 방식을 선택해야합니까?

그런 다음 코드 예제와 관련된 모든 힌트는 매우 높이 평가됩니다. 여기

지금까지 내 코드 :

var layer = new ol.layer.Tile({ 
 
    source: new ol.source.OSM() 
 
}); 
 

 
var control = new ol.control.FullScreen(); 
 

 
var center = ol.proj.transform([6.9690055, 49.2175355], 'EPSG:4326', 'EPSG:3857'); 
 

 
var overlay = new ol.Overlay({ 
 
    position: center, 
 
    element: document.getElementById('plant') 
 
}); 
 

 
var view = new ol.View({ 
 
    center: center, 
 
    zoom: 17 
 
}); 
 

 
var map = new ol.Map({ 
 
    target: 'map', 
 
    layers: [layer], 
 
    controls: [control], 
 
    overlays: [overlay], 
 
    view: view 
 
});
#plant { 
 
    width: 1300px; 
 
    height: 400px; 
 
    border: 1px solid black; 
 
    transform: rotate(16.5deg); 
 
} 
 

 
#plant img { 
 
    opacity: 0.6; 
 
}
<div id="map" class="map"> 
 
    <div id="plant"><img src="http://placehold.it/1300x400" alt="bild" /></div> 
 
</div>

답변

2

당신은 두 가지 옵션은 내가 생각할 수있다 선호하는 효과를 달성하기 위해 다른 옵션을 사용하려고 할 수 있습니다

1.ol.layer.Image() 코드 샘플 사용 :

var extent = ol.proj.transformExtent([7.2, 49.3, 6.5, 49.1], 
    'EPSG:4326', 'EPSG:3857'); 
new ol.layer.Image({ 
    opacity: 0.6, 
    source: new ol.source.ImageStatic({ 
     url: 'http://placehold.it/1300x400', 
     imageExtent: extent 
    }) 
}) 

범위는 아직 대략적인 추정치입니다.

2 이미 여기에서 설명, 이미지를 사용하여 아이콘의 스타일을 벡터 레이어를 사용 https://gis.stackexchange.com/questions/130603/how-to-resize-a-feature-and-prevent-it-from-scaling-when-zooming-in-openlayers-3/

는 다음과 같이 당신의 아이콘 스타일의지도를 사용 rotateWithView: true와 함께 그것을 회전하려면 :

var iconStyle = new ol.style.Icon({ 
    src: 'http://placehold.it/1300x400', 
    rotateWithView: true, 
    opacity: 0.6 
}); 
+0

고마워요. ol.layer.image를 회전 할 수 있습니까? 시계 방향으로 15도 정도 돌리고 싶습니다. 그래서 그것은 식물을 포함합니다. 여기를 참조하십시오 : http://codepen.io/mizech/pen/yaBOYd – ts248

+0

'ol.layer.image'를 회전 할 가능성은 없지만 이미지 편집기에서 이미지를 사용하기 전에 이미지를 회전시킬 수 있습니다. –