如何通过自定义组件在Angular Formly中集成Leaflet地图

现有问题梳理 #

• Leaflet自定义组件选择器错误设置为app-root，与应用根组件冲突
• 未在组件内部定义地图容器，错误将容器代码写在Formly父组件模板中
• 没有将Leaflet组件注册为Formly自定义字段类型，无法被Formly表单识别
• 全局定义div宽高样式会污染其他元素，需限定作用范围
• 直接通过id获取DOM元素的方式容易引发冲突，不符合Angular最佳实践

1. 修正Leaflet自定义组件代码 #

leaflet.component.ts #

import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
import { FieldType } from '@ngx-formly/material'; // 使用其他UI库替换对应导入即可
declare let L: any;

@Component({
  selector: 'app-leaflet-map',
  template: `<div #mapContainer class="map-container"></div>`,
  styles: [`
    .map-container {
      height: 500px;
      width: 500px;
    }
  `]
})
export class LeafletComponent extends FieldType implements OnInit {
  @ViewChild('mapContainer') mapContainer!: ElementRef;

  ngOnInit() {
    const map = L.map(this.mapContainer.nativeElement).setView([51.509865,-0.118092], 10);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
    }).addTo(map);
    // 如需绑定表单值，监听地图事件后调用 this.formControl.setValue(选中值) 即可同步到Formly表单
  }
}

2. 注册为Formly自定义字段类型 #

app.module.ts #

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { ReactiveFormsModule } from '@angular/forms';
import { FormlyModule } from '@ngx-formly/core';
import { FormlyMaterialModule } from '@ngx-formly/material';
import { LeafletComponent } from './ang-formly/ang-formly/leaflet-component';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    BrowserModule,
    ReactiveFormsModule,
    FormlyMaterialModule,
    FormlyModule.forRoot({
      types: [
        {
          name: 'leaflet-map',
          component: LeafletComponent,
        },
      ],
    }),
  ],
  declarations: [
    AppComponent,
    LeafletComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 在Formly字段配置中使用 #

删除Formly组件模板中手动写的<div id="map"></div>和对应css，直接在字段配置里声明即可：

fields = [
  // 其他表单字段配置
  {
    key: 'coveredAreas',
    type: 'leaflet-map',
    props: {
      label: '覆盖区域',
    },
  },
];

注意事项 #

确保已经在angular.json的build配置styles数组中引入Leaflet样式文件："node_modules/leaflet/dist/leaflet.css"

内容的提问来源于stack exchange，提问作者user1