연결 각도 4 OpenLayers 4

Question

나는 두 가지 구성 요소가 있습니다. 지도에 상호 작용을 추가 예 :

컨트롤 구성 요소 :

• HTML : <button (click)="add_a_place()" type="button">Add a place</button>
• JS : add_a_place() {map.addInteraction(draw_interaction)}

지도 구성 요소 :

• JS :

var draw_interaction = new ol.interaction.Draw({ source: vector_source, type: "Point" }); var map = new ol.Map({ target: "map", layers: [vector_layer], view: new ol.View({ center: [0, 0], zoom: 2 }) });

어떻게해야할까요/해야할지?

내가 사용하고 있습니다 :

• 각도 4.0.0
• OpenLayers 4.1.1 여기

Answer 1

내가이 달성하기 위해 수행 한 작업은 다음과 같습니다 (

구성 요소의 상호 작용 사용을 https://angular.io/guide/component-interaction), mapComponent 안에 controlComponent을 포함 시켰습니다. eventEmitter을 사용하여 mapComponent에게 무엇을해야하는지 알려줍니다 (MapComponent 내지도 관리를 통해 다른 controlComponent을 사용할 수 있습니다).

MapComponent (HTML)

<app-control (add_a_place)="add_a_place($event)"> </app-control> 

MapComponent (TS)

add_a_place(event) { 
var draw_interaction = new ol.interaction.Draw({ 
     source: vector_source, 
     type: "Point" 
}); 
    var map = new ol.Map({ 
    target: "map", 
    layers: [vector_layer], 
    view: new ol.View({ 
     center: [0, 0], 
     zoom: 2 
     }) 
    }); 
    map.addInteraction(draw_interaction); 
} 

제어 성분 (HTML)

<button (click)="sendInfo()" type="button">Add a place</button> 

JS :

export class VoterComponent { 
// change 'any' to the desired type, this is optional 
@Output() add_a_place= new EventEmitter<any>(); 

sendInfo() { 
    // this will call MapComponent's add_a_place function 
    this.add_a_place.emit('you can pass an argument of type "any" to the mapComponent, depending on the eventEmitter above, but this is optional'); 
} 

질문이 있거나 명확하지 않은 경우 망설이지 마십시오. 이 경우 당신은 것, https://openlayers.org/en/latest/examples/custom-controls.html이

은 그러나 당신은 또한 컨트롤을 포함하는 overlayComponent 내부 MapComponent을 포함 할 수있다 :

이

는 '각도 만든'컨트롤,하지만 당신은 또한 openlayers의 컨트롤을 추가 할 수 있습니다 볼의 포함을위한 논리입니다 구성 요소 상호 작용 로직을 되돌려 야합니다 (명확하지 않은 경우 무시하십시오).