>地图
>控制
我希望控件组件上的按钮与地图交互.向地图添加交互的示例:
控件组件:
> 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,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,在这种情况下你必须反转组件交互逻辑(如果不清楚则忽略它).