我有一张8号角的传单

1安装库。
npm安装传单
npm install @ asymmetrik / ngx-leaflet
npm install --save-dev @ types / leaflet
npm install leaflet.markercluster @ asymmetrik / ngx-leaflet-markercluster
npm install @ types / leaflet @ types / leaflet.markercluster

2在angular.json文件中

"styles": [
              "src/styles.css",
              "node_modules/leaflet/dist/leaflet.css",
              "node_modules/leaflet.markercluster/dist/MarkerCluster.css",
              "node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css"
            ],
            "scripts": [
              "node_modules/jquery/dist/jquery.min.js",
              "node_modules/popper.js/dist/umd/popper.min.js",
              "node_modules/leaflet/dist/leaflet.js",
            ]

app.module.ts文件中的

3

import { LeafletModule } from '@asymmetrik/ngx-leaflet';
import { LeafletMarkerClusterModule } from '@asymmetrik/ngx-leaflet-markercluster';
imports: [
    LeafletModule.forRoot(),
    LeafletModule,
    LeafletMarkerClusterModule
  ],

html文件示例“ mapa.component.html”中的

4

<div id="mimapa" style="height: 400px;"
                    leaflet
                    [leafletLayers]="layers"
                    (leafletMapReady)="onMapReady($event)"
                    (leafletClick)="get_coord($event)" 
                    [leafletOptions]="options"
                    [leafletMarkerCluster]="markerClusterData"
                    [leafletMarkerClusterOptions]="markerClusterOptions"
                    (leafletMarkerClusterReady)="markerClusterReady($event)">
 </div>

ts文件示例“ mapa.component.ts”中的

5

import * as L from 'leaflet';
import 'leaflet.markercluster';
import 'leaflet/dist/images/marker-shadow.png';
import 'leaflet/dist/images/marker-icon.png';

变量

coord:any=[];
 options;
  layersControl;
  layers;
  tile_map;
  map;
// Marker cluster stuff
    markerClusterGroup: L.MarkerClusterGroup;
    markerClusterData: L.Marker[] = [];
  markerClusterOptions: L.MarkerClusterGroupOptions;

功能

constructor(private httpService:ServicesService) { }

ngOnInit(): void {
    this.get_all_latlog();
}


onMapReady(map) {
    this.map = map;
}


get_all_latlog(){
    this.httpService.http_get_all_latlog_user().subscribe(
      res =>{
        this.coord=res;
        this.refreshData();
      },
      err =>{
        console.log(err);
      }
    )
    this.muestra_mapa();
  }

/* 
  * Show map.
  */
  muestra_mapa(){
    let center_lat=8.672839;
    let center_lon=-80.101051;
    this.options = {
      layers: [
        L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 18, attribution: '&copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a>' }),
      ],
      zoom: 7.5,
      center: L.latLng(center_lat, center_lon)
    };
    this.tile_map=this.options;
  }


/* 
  * Get the coordinates by clicking on the map.
  */
  //get_coord(map: L)
  get_coord(map: any){
    let latlog=map.latlng.toString().split(", ");
    let latitud=latlog[0].substring(latlog[0].indexOf("(")+1,latlog[0].length);
    let longitud=latlog[1].substring(0,latlog[1].length-1);
    let popup = L.popup();
    this.layers = [
      popup.setLatLng(map.latlng).setContent('latitud: '+latitud+'<br>Longitud: '+longitud)
    ];
  }

/*
   --------------------------------------------------------------------------
      MAKER CLUSTER 
   --------------------------------------------------------------------------
  */

  markerClusterReady(group: L.MarkerClusterGroup){
    this.markerClusterGroup = group;
  }

  refreshData(): void {
    this.markerClusterData = this.generateData(this.coord);
  }

  generateData(coord:any): L.Marker[] {
    const data: L.Marker[] = [];
    let greenicon = L.icon({
      iconUrl: 'assets/leaflet/img/marker-icon-green.png',
      shadowUrl: 'assets/leaflet/img/marker-shadow.png',
      iconSize:     [25, 41], 
      shadowSize:   [41, 41], 
      iconAnchor:   [25, 41], 
      shadowAnchor: [25, 41], 
      popupAnchor:  [-12, -33] 
    });
    for (let i = 0; i < coord.length; i++) {
      if(this.coord[i][5]=="users"){
        data.push(L.marker([Number(this.coord[i][0]),Number(this.coord[i][1])])
        .bindPopup('information'));
      }
      else{
        data.push(L.marker([Number(this.coord[i][0]),Number(this.coord[i][1])],{icon: greenicon})
        .bindPopup('information'));
      }
    }
    return data;
  }
}

如何在角度5中整合Leaflet Marker Cluster

1 个答案:

我有一张8号角的传单