链接Angular 4和OpenLayers 4

使用组件交互(https://angular.io/guide/component-interaction),我在mapComponent中包含了controlComponent.使用eventEmitter,我告诉mapComponent要做什么(管理MapComponent中的map允许你使用不同的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,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');
}

如果您有疑问或我不清楚,请不要犹豫.

这是包含’angular-made’控件的逻辑,但您也可以添加openlayers的控件,参见：https://openlayers.org/en/latest/examples/custom-controls.html

但是你也可以在包含控件的overlayComponent中包含MapComponent,在这种情况下你必须反转组件交互逻辑(如果不清楚则忽略它).