我正在使用 angular 6 和 Leaflet 进行映射。我想创建一个交互式地图,根据我在表单中选择的属性更改视图。
我已经设置了在 ngOninit 中绘制图形的条件,但是该条件仅在加载应用程序时才有效,而我希望它在每次修改表单时都有效。
有人可以让我上轨道吗?
组件.ts
export class GeoComponent implements OnInit, OnChanges {
searchForm: FormGroup;
geosToDisplay;
topping: string;
toppings = new FormControl( [''];
toppingList: string[] = [
'Evaluation de la douleur',
'Evaluation psychologique'
];
constructor(private geoService: GeoService, private router: Router, private database: AngularFireDatabase,private formBuilder: FormBuilder,private matIconRegistry: MatIconRegistry) { }
ngOnInit() {
this.geosToDisplay = this.geoService.getGeos();
this.searchForm.valueChanges.subscribe((value) => {
let val =this.toppings.value;
this.toppings.valueChanges.subscribe(val=>console.log(val));
console.log(val);
const myfrugalmap = L.map('frugalmap').setView([47.482019, -0.554399], 7);
L.tileLayer('http://maps.wikimedia.org/osm-intl/{z}/{x}/{y}.png', {attribution: 'SoS Map' }).addTo(myfrugalmap);
const myIcon = L.icon({
iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/images/marker-icon.png',
iconSize: [ 25, 41 ],
iconAnchor: [ 13, 41 ],
});
L.marker([ 47.210804, -1.554723 ], {icon: myIcon}).bindPopup('CHU Nantes').addTo(myfrugalmap);
if (val.includes('Evaluation de la douleur'))
{ L.marker([ 47.482019, -0.554399 ], {icon: myIcon}).bindPopup('CHU Angers').addTo(myfrugalmap);}
else{}
});
}
}
组件.HTML
<mat-form-field appearance="outline" style="width:100%" >
<mat-label>Rechercher un soin de support</mat-label>
<mat-select placeholder="Toppings" [formControl]="toppings" multiple Z>
<button
mat-raised-button
class="mat-primary fill text-sm"
(click)="selectAll()">
Tout sélectionner
</button>
<button
mat-raised-button
class="mat-warn fill text-sm"
(click)="deselectAll()">
Tout désélectionner
</button>
<mat-option *ngFor="let topping of toppingList" [value]="topping" >{{topping}}</mat-option>
</mat-select>
</mat-form-field>
<div id="frugalmap">
</div>