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.tsimport { 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声明关键字

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

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

Leaf中的Marker cluster相关推荐

百度地图聚合中的marker添加label后移动、放大缩小时label消失的问题download
最近在做百度地图相关的项目,由于要解决大批量点位渲染的问题,所以使用了聚合MarkerClusterer,但是在使用的过程中,碰到很多问题,例如如何获得已经聚合了的marker.给marker设置了l ...
Leaflet中自定义marker的icon图标
场景 Leaflet中添加标记.折线.圆圈.多边形.弹窗显示点击处坐标: Leaflet中添加标记.折线.圆圈.多边形.弹窗显示点击处坐标_BADAO_LIUMANG_QIZHI的博客-CSDN博客 ...
高德地图中隐藏Marker的标记
在开发高德地图时,可以使用Marker的setLabel()函数设置浮动标记. 做了一个功能,每选中一个点时,在上方显示文字信息. marker.setLabel({direction:'top',o ...
实现物流场景中小车Marker指向目的地
以下内容转载自面糊的文章<实现物流场景的小车Marker指向目的地> 作者:面糊链接:https://www.jianshu.com/p/f794b02a81f5 来源:简书著作权归作 ...
高德地图打字界面_打字稿界面综合指南
高德地图打字界面 There are many reasons to like TypesScript because of the many advantages it has over JavaS ...
Oracle Database 12c 新特性：RAC Cluster Hub Node 和 Leaf Node
Oracle Database 12c 新特性:RAC Cluster Hub Node 和 Leaf Node 在 Oracle Database 12c 的 Cluster 中引入了很多新特性和新 ...
在nodejs中创建cluster
文章目录简介 cluster集群 cluster详解 cluster中的event cluster中的方法 cluster中的属性 cluster中的worker 总结简介在前面的文章中,我们讲 ...
cluster函数 matlab,matlab中的linkage和cluster函数
Linkage: Agglomerative hierarchical cluster tree(凝聚成层次聚类树) 语法: 解释: Z=linkage(x),返回Z,是一个X矩阵中行的分层聚类树(用 ...
只用一个marker 替换高德_Android基于高德地图完全自定义Marker的实现方法
前言相信做地图社交类APP开发的大家都知道,一般情况下,为了整体的美观和用户体验度,我们需要定制化Marker的样式.本文中实现的方式都是基于高德地图的,百度地图也类似,大家可以照葫芦画瓢,废话不多 ...

Leaf中的Marker cluster

Leaf中的Marker cluster相关推荐

最新文章

热门文章