如何以角度形式创建传单地图 [英] How to create the leaflet map in angular formly

问题描述

我的要求是以角度形式创建传单地图，但我对这个形式不熟悉

我知道如何将地图与普通 html 以角度方式集成，如下所示

ma​​p.component.ts

 ngOnInit() {const map = L.map('map').setView([51.509865,-0.118092], 10);L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {署名:'© OpenStreetMap 贡献者'}).addTo(map);}

ma​​p.component.html

ma​​p.component.css

div{高度:500px；宽度:500px；}

但是，现在我必须以角度形式放置传单地图，任何人都可以帮我解决这个问题

解决方案

您可以创建传单地图的自定义组件并在项目中的任何位置使用它:

LeafletMapComponent.html

<div id="地图"传单[leafletOptions]=选项"(leafletMapReady)=onMapReady($event)";>

LeafletMapComponent.css

#map {宽度:100%；高度:300px；}

LeafletMapcomponent.ts

 构造函数() { }地图;@Input() 标记；@Output() LMarkerclicked: EventEmitter= new EventEmitter();@Output() setPositon: EventEmitter= new EventEmitter();选项 = {层数:[tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')],变焦:7，中心:latLng(29.6060218, 52.5378041)};ngOnInit() {}onMapReady(地图:L.Map){setTimeout(() => {this.map = 地图;map.invalidateSize();this.addMarker();}, 0);map.on('click', (e)=>{this.onMapClick(e)});}添加标记(){this.markers.forEach((mapMarker) => {让 m = L.marker([mapMarker.lat, mapMarker.lng], {可拖动:真实，图标:新的 L.DivIcon({className: 'my-div-icon',html: '<img class="my-div-image";src="'+ mapMarker.icon +'"/>'+'<label class="MarkerLabel">'+ mapMarker.label +'</label>'})}).addTo(this.map).bindPopup("" + mapMarker.info + "
" + mapMarker.label).on('click',this.markerClick, this).on('dragend', this.markerDragend, this);});}标记点击(e){this.LMarkerclicked.emit(e.latlng);}标记Dragend(e){this.LMarkerclicked.emit(e.target._latlng);}

然后使用它:

并在您的 ts 文件中:

标记:MapmarkerVm[] = [{纬度:29.60602，液化天然气:52.53780，标签: ''，可拖动:真实，图标:'../assets/images/marker-active.png',信息:'城市名称'},];onClickLMarker(e) {this.addEditForm.controls[纬度"].reset(e.lat);this.addEditForm.controls[Longtude"].reset(e.lng);}导出类 MapmarkerVm {纬度:数字；lng:数字；标签?:字符串；可拖动:布尔值；图标:字符串；信息:字符串；}

My requirement is to create the leaflet map in angular formly,but I am new to this formly

and I know how to use integrate the map with normal html in angular as below

map.component.ts

  ngOnInit() {
        const map = L.map('map').setView([51.509865,-0.118092], 10);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);
    }

map.component.html

<div id="map"></div>

map.component.css

div{
    height: 500px;
    width: 500px;
}

But,Now I have to place the leaflet map in angular formly, can anyone help me regarding this

解决方案

you can create a custom component of leaflet map and use it wherever in your project:

LeafletMapComponent.html

<div class="col-md-12">
        <div id="map" leaflet
        [leafletOptions]="Options"
        (leafletMapReady)="onMapReady($event)" >
        </div>
</div>

LeafletMapComponent.css

#map {
  width: 100%;
  height: 300px;
  }

LeafletMapcomponent.ts

 constructor() { }
  map;
  @Input() markers;
  @Output() LMarkerclicked: EventEmitter<any> = new EventEmitter<any>();
  @Output() setPositon: EventEmitter<any> = new EventEmitter<any>();

  Options = {
    layers: [
      tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
    ],
    zoom: 7,
    center: latLng(29.6060218, 52.5378041)
  };
 ngOnInit() {
  }
  onMapReady(map: L.Map) {
    setTimeout(() => {
      this.map = map;
      map.invalidateSize();
      this.addMarker();
    }, 0);
    map.on('click', (e)=>{this.onMapClick(e)});
  }
addMarker() {
    this.markers.forEach((mapMarker) => {
      let m = L.marker([mapMarker.lat, mapMarker.lng], {
        draggable: true,
        icon: new L.DivIcon({
          className: 'my-div-icon',
          html: '<img class="my-div-image" src="' + mapMarker.icon +'" />'+
                '<label class="MarkerLabel">'+ mapMarker.label +'</label>'
      })
      }).addTo(this.map).bindPopup("<b>" + mapMarker.info + "</b><br>" + mapMarker.label).on('click', this.markerClick, this).on('dragend', this.markerDragend, this);
    });
  }
  markerClick(e) {
    this.LMarkerclicked.emit(e.latlng);
  }
  markerDragend(e){
   this.LMarkerclicked.emit(e.target._latlng);
  }

Then for using it :

<app-leaflet-map [markers]="markers" (LMarkerclicked)="onClickLMarker($event)" (setPositon)="onClickLMarker($event)"></app-leaflet-map>

and in your ts file:

markers: MapmarkerVm[] = [
  {
    lat: 29.60602,
    lng: 52.53780,
    label: '',
    draggable: true,
    icon: '../assets/images/marker-active.png',
    info: 'cityName'
  },
];
onClickLMarker(e) {
  this.addEditForm.controls["Latitude"].reset(e.lat);
  this.addEditForm.controls["Longtude"].reset(e.lng);
}



   export class MapmarkerVm {
            lat: number;
            lng: number;
            label?: string;
            draggable: boolean;
            icon:string;
            info:String;
    }

这篇关于如何以角度形式创建传单地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！