链接Angular 4和OpenLayers 4

2023年7月28日 159次阅读

我有两个组成部分：

>地图
>控制

我希望控件组件上的按钮与地图交互.向地图添加交互的示例：

控件组件：

> HTML：< button(click)=“add_a_place()”type =“button”>添加地点< / button>
> JS：add_a_place(){map.addInteraction(draw_interaction)}

地图组件：

> JS：

var draw_interaction = new ol.interaction.Draw({
            source：vector_source,
            类型：“点”
     });
    var map = new ol.Map({
      目标：“地图”,
      layers：[vector_layer],
      view：new ol.View({
          中心：[0,0],
          zoom：2
        })
    });

知道如何做/应该怎么做？

我在用：

> Angular 4.0.0
> OpenLayers 4.1.1

最佳答案 以下是我为实现这一目标所做的工作：

使用组件交互(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, 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,在这种情况下你必须反转组件交互逻辑(如果不清楚则忽略它).

点赞