官网的介绍时这样子的:
在这里插入图片描述
如何在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声明关键字
本人写的第一篇博客，表达的思路可能不是很清晰，望各位大佬多多包涵，文中如有错处，望各位大佬指出！谢谢
谢谢各位大佬
如果你觉得本文对你有帮助，麻烦动动手指顶一下，算是对本文的一个认可，如果文中有什么错误的地方，还望指正，转载请注明转自邹二狗的博客，谢谢
