官網(wǎng)的介紹時(shí)這樣子的:
在這里插入圖片描述
如何在Angular中使用呢般又？本文使用angular的版本是6！
首先在angular項(xiàng)目中導(dǎo)入Leaflet的依賴包，有兩種方法導(dǎo)入依賴包（兩種方法無(wú)區(qū)別）
(1)：index.html 頁(yè)面直接引入
- index.hmtl
<link rel="stylesheet" >
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/leaflet.js"></script>
<link rel="stylesheet" >
<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中配置,這個(gè)比較麻煩烫沙，不過(guò)我喜歡折騰
- npm i leaflet
- npm i leaflet.markercluster
node_module文件夾中：
在這里插入圖片描述
angular.json文件中進(jìn)行配置
在這里插入圖片描述
"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"
]
好啦霎箍，引入完依賴了祈匙，上代碼吐限，我懶得刪除哈鲜侥，可能只是自己看看，沒(méi)人看??
- 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("增加一個(gè)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("刪除一個(gè)Marker");
this.markers.removeLayer(marker);
}, 5000);
}
}
創(chuàng)建一個(gè)標(biāo)記群集組：
?????var markers = L.markerClusterGroup();
創(chuàng)建一些標(biāo)記：
?????var marker = L.marker(new L.LatLng(0, 0));
將標(biāo)記添加到群集組：
?????markers.addLayer(marker);
最后將群集組添加到地圖中：
?????map.addLayer(markers);
這里稍微做下筆記：
1诸典、為什么不能使用現(xiàn)在統(tǒng)一import導(dǎo)入依賴包呢描函？
- 因?yàn)閘eaflet的兩個(gè)npm包沒(méi)有export，哈哈哈哈哈哈哈哈哈（別打我）
- 如果導(dǎo)入的包有export狐粱，那么使用的時(shí)候就可以import
2舀寓、declare關(guān)鍵字有什么作用？聲明脑奠？
- 例如基公，假設(shè)我們有一個(gè)名為L(zhǎng)eaflet的庫(kù)幅慌，它沒(méi)有TypeScript聲明文件宋欺，并且在全局命名空間中有一個(gè)名為L(zhǎng)的命名空間。如果要在TypeScript代碼中使用該庫(kù)胰伍，可以使用以下代碼：
-
declare const L;
摘要：
TypeScript declare關(guān)鍵字用于聲明可能不是源自TypeScript文件的變量
快速提示 - TypeScript聲明關(guān)鍵字
本人寫的第一篇博客齿诞，表達(dá)的思路可能不是很清晰，望各位大佬多多包涵骂租，文中如有錯(cuò)處祷杈，望各位大佬指出！謝謝
謝謝各位大佬
如果你覺(jué)得本文對(duì)你有幫助渗饮，麻煩動(dòng)動(dòng)手指頂一下但汞，算是對(duì)本文的一個(gè)認(rèn)可，如果文中有什么錯(cuò)誤的地方互站，還望指正私蕾，轉(zhuǎn)載請(qǐng)注明轉(zhuǎn)自鄒二狗的博客，謝謝
