Leaf中的Marker cluster

官网的介绍时这样子的:

在这里插入图片描述
如何在Angular中使用呢？本文使用angular的版本是6！

首先在angular项目中导入Leaflet的依赖包，有两种方法导入依赖包（两种方法无区别）
(1)：index.html 页面直接引入

 - index.hmtl
 
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
  <link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.0.3/dist/MarkerCluster.css">

<script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>
<script src='https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster-src.js'></script>

(2)：npm下载依赖包，在angular.json中配置,这个比较麻烦，不过我喜欢折腾

• npm i leaflet
• npm i leaflet.markercluster

node_module文件夹中：

在这里插入图片描述

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/leaflet/dist/leaflet.js",
              "node_modules/leaflet.markercluster/dist/leaflet.markerCluster.js"
            ]

好啦，引入完依赖了，上代码，我懒得删除哈，可能只是自己看看，没人看😄

 - component.ts
     
    import { Component, OnInit } from '@angular/core';
    declare const L;
      mymap;
      markers;
      // marker样式  在线
      style3 = L.icon({
        iconUrl: '/assets/images/location_blue.svg',
        iconSize: [36, 36],
        iconAnchor: [25, 30],
        popupAnchor: [-8, -16],
      });
      style4 = L.icon({
        iconUrl: '/assets/images/location_gray.svg',
        iconSize: [36, 36],
        iconAnchor: [25, 30],
        popupAnchor: [-8, -16],
      });
      constructor() {
      }
    
      ngOnInit() {
        console.log(L);
        this.imitMap();
      }
      imitMap() {
        let defaultLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { maxNativeZoom: 21, maxZoom: 21 });
        this.mymap = L.map("mapid", {
          center: [22.4956034, 113.9121708],
          zoom: 5,
          minZoom: 3,
          layers: [defaultLayer],
        });
        this.markers = L.markerClusterGroup();
        this.mymap.addLayer(this.markers);
        this.initMarker();
        setTimeout(() => {
          this.addMarker();
        }, 5000);
      }
      initMarker() {
        var addressPoints = [
          [22.4956034, 113.9121708, "2"],
          [22.5956034, 113.9121708, "3"],
          [22.6956034, 113.9121708, "3A"],
          [22.7956034, 113.9121708, "1"],
          [22.8956034, 113.9121708, "5"],
          [22.9956034, 113.9121708, "7"],
          [22.4956034, 113.8121708, "537"],
          [22.4956034, 113.7121708, "454"],
          [22.4956034, 113.6121708, "176"],
          [22.4956034, 113.5121708, "178"],
          [22.4956034, 113.4121708, "190"],
          [22.4956034, 113.3121708, "156"],
          [22.4956034, 113.2121708, "210"],
          [22.4956034, 113.1121708, "212"],
          [22.4956034, 113.0121708, "146"],
          [23.4956034, 113.9121708, "125"],
          [24.4956034, 113.9121708, "174"],
          [25.4956034, 113.9121708, "129"]
        ]
        // let marker = L.marker([22.4956034, 113.9121708]).addTo(this.mymap);
    
        console.log(this.markers);
        for (var i = 0; i < addressPoints.length; i++) {
          var a = addressPoints[i];
          var title = a[2];
          var marker = L.marker(new L.LatLng(a[0], a[1]), {
            title: title
          }).setIcon(this.style3);
          marker.bindPopup(title);
          this.markers.addLayer(marker);
        }
        console.log(this.markers);
      }
      addMarker() {
        console.log("增加一个Marker");
        var marker = L.marker(new L.LatLng(26.4956034, 114.9121708), {
          title: "hahahhahahhahahahahaha"
        }).setIcon(this.style4);
        console.log(this.markers);
        this.markers.addLayer(marker);
        setTimeout(() => {
          console.log("删除一个Marker");
          this.markers.removeLayer(marker);
        }, 5000);
      }
    
    }

创建一个标记群集组：
     var markers = L.markerClusterGroup();
创建一些标记：
     var marker = L.marker(new L.LatLng(0, 0));
将标记添加到群集组：
     markers.addLayer(marker);
最后将群集组添加到地图中：
     map.addLayer(markers);

这里稍微做下笔记：
1、为什么不能使用现在统一import导入依赖包呢？

• 因为leaflet的两个npm包没有export，哈哈哈哈哈哈哈哈哈（别打我）
• 如果导入的包有export，那么使用的时候就可以import

2、declare关键字有什么作用？声明？

• 例如，假设我们有一个名为Leaflet的库，它没有TypeScript声明文件，并且在全局命名空间中有一个名为L的命名空间。如果要在TypeScript代码中使用该库，可以使用以下代码：
• declare const L;
  摘要：
  TypeScript declare关键字用于声明可能不是源自TypeScript文件的变量
  快速提示 - TypeScript声明关键字

本人写的第一篇博客，表达的思路可能不是很清晰，望各位大佬多多包涵，文中如有错处，望各位大佬指出！谢谢

谢谢各位大佬
如果你觉得本文对你有帮助，麻烦动动手指顶一下，算是对本文的一个认可，如果文中有什么错误的地方，还望指正，转载请注明转自邹二狗的博客，谢谢