¿Es posible usar una interfaz de usuario personalizada en lugar de la interfaz de usuario de controles de folleto predeterminada?
¿Qué quiero hacer? Quiero poder usar los controles del folleto desde la barra de herramientas que creé.
Estoy trabajando con angular, la barra de herramientas es un componente diferente al que se crea el mapa. No tengo ningún problema para conectar ambos componentes, solo quiero saber si puedo, por ejemplo, activar el control de dibujo desde otro lugar que no sea la barra de herramientas principal del folleto.
Por ejemplo, podríamos llamar a un componente personalizado (el cuadro naranja) desde el componente del mapa y pasar el mapa y otros parámetros que queremos usar.
<app-custom-control [position]='"bottomleft"' [map]='map[1]' ></app-custom-control> @Component({ selector: 'app-custom-control', templateUrl: './custom-control.component.html', styleUrls: ['./custom-control.component.css'] }) export class CustomControlComponent implements OnInit, OnDestroy { private _map: Map; public custom: Control; public currentLocation: LocData; @Input() position: ControlPosition ; constructor(private http: HttpClient, private changeDetector: ChangeDetectorRef) { } ngOnInit() { this.currentLocation = new LocData(); } ngOnDestroy() { this._map.removeControl(this.custom); this._map.off('click', this.onClick); } @Input() set map(map: Map){ if (map){ this._map = map; let Custom = Control.extend({ onAdd(map: Map) { return DomUtil.get('custom'); }, onRemove(map: Map) {} }); this.custom=new Custom({ position: this.position }).addTo(map); map.on('click', this.onClick, this); } } get map(): Map { return this._map } private onClick(e): void { let location = e.latlng; this.getNominatim(location).subscribe(response => { this.currentLocation = new LocData(response, location); this.changeDetector.detectChanges(); }) } private getNominatim(location: LatLng): Observable<object> { return this.http.get( `https://nominatim.openstreetmap.org/reverse?format=jsonv2&zoom=12&addressdetails=1&lat=${location.lat}&lon=${location.lng}`, { responseType: 'json' }); } }Ejemplo de trabajo: https://stackblitz.com/edit/angular-leaflet-custom-dvv2bj?file=src%2Fapp%2Fcustom-control%2Fcustom-control.component.ts