链接 Angular 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 }) });

知道如何 could/should 完成吗？

我正在使用：

Angular 4.0.0
OpenLayers 4.1.1

Answer 1

这是我为实现这一目标所做的工作：

使用组件交互 (https://angular.io/guide/component-interaction)，我将 controlComponent 包含在 mapComponent 中。使用 eventEmitter，我告诉 mapComponent 做什么（管理 MapComponent 内的地图允许您使用不同的 controlComponent）。

地图组件（HTML）：

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

地图组件（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，在这种情况下，您将不得不反转组件交互逻辑（如果不清楚，请忽略它）。

Answer 2

如果你不想从零开始使用Angular5 ans OpenLayers4，有一个成熟的项目叫IGO2-lib which is based on Angular 5.x, NodeJS, OpenLayers 4.x and Material Design. IGO2也是一个完整的框架。

克隆存储库使用：git clone https://github.com/infra-geo-ouverte/igo2-lib.git
在 cd igo2-lib/ 中部署并从以下位置安装：npm install
开始表格：npm start
在 http://localhost:4200/

这是来自 IGO2: https://geoegl.msp.gouv.qc.ca/igo2/apercu-qc/

的现场演示

链接 Angular 4 和 OpenLayers 4

Linking Angular 4 and OpenLayers 4

openlayers

angular