源代码地址：Leaflet: https://gitee.com/SunBear/Leaflet

效果如图：

vue中安装引入leaflet组件及相关插件：

npm i leaflet

npm i leaflet.glify

// vue中引入

import * as L from "leaflet";
import "leaflet/dist/leaflet.css";

import glify from 'leaflet.glify';

完整html代码：

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link href="assets/css/map.css" rel="stylesheet">
		<link href="assets/css/leaflet.css" rel="stylesheet">
		<title>leaflet</title>
	</head>

	<body>

		<div style="display: flex;justify-content: space-between;">
			<div id="map1" style="width: 32%;height: 300px;"></div>
			<div id="map2" style="width: 32%;height: 300px;"></div>
			<div id="map3" style="width: 32%;height: 300px;"></div>
		</div>

		<script src="assets/js/leaflet.js"></script>
		<script src="assets/js/glify-browser.js"></script>
		<script>
			loadingPoint();
			loadingLines();
			loadingPolygons();
			// 加载海量多边形
			async function loadingPolygons() {
				let map = L.map("map3", {
					center: [50.5, 16, 0.2],
					zoom: 6,
					maxZoom: 18,
				});
				L.tileLayer(
					'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
				).addTo(map)

				const res = await fetch('data/polygons.json');
				const data = await res.json()
				const layers = L.glify.shapes({
					map,
					data,
					size: 1,
					color: {
						r: 255,
						g: 2,
						b: 0,
					},
					opacity: 0.2,
					border: true,
					borderOpacity: 0.8,
					click: (e, pointOrGeoJsonFeature) => {
						// console.log(e, pointOrGeoJsonFeature)
					},
					hover: (e, pointOrGeoJsonFeature, xy) => {
						// console.log(e, pointOrGeoJsonFeature)
					},
				})
				layers.addTo(map);
			}
			// 加载海量线
			async function loadingLines() {
				let map = L.map("map2", {
					center: [50.5, 30.5, 0.2],
					zoom: 1,
					maxZoom: 18,
				});
				L.tileLayer(
					'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
				).addTo(map)

				const res = await fetch('data/lines.json');
				const data = await res.json()
				const layers = L.glify.lines({
					map,
					data,
					size: 1,
					color: {
						r: 255,
						g: 0,
						b: 1,
					},
				})
				layers.addTo(map);
			}
			// 加载海量点
			function loadingPoint() {
				let map = L.map("map1", {
					center: [50.5, 30.5, 0.2],
					zoom: 4,
					maxZoom: 18,
				});
				L.tileLayer(
					'https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
				).addTo(map)
				const points = []
				for (let i = 0; i < 200000; i++) {
					const lat = Math.floor(Math.random() * 180) - 90;
					const lng = Math.floor(Math.random() * 360) - 180;
					points.push([lat, lng])
				}
				// 加载20万点数据
				const layers = L.glify.points({
					map,
					data: points,
					// color: { // 点的颜色
					// 	r: 255,
					// 	g: 0,
					// 	b: 1,
					// },
					size: 10, // 设置点的大小
					sensitivity: 10, //扩大可点击区域的大小，以便更容易点击某个点
					click: (e, pointOrGeoJsonFeature) => {
						// console.log(e, pointOrGeoJsonFeature)
					},
					hover: (e, pointOrGeoJsonFeature) => {
						const index = points.findIndex(item => {
							return item === pointOrGeoJsonFeature
						})
						L.popup()
							.setLatLng(pointOrGeoJsonFeature)
							.setContent("索引" + index)
							.openOn(map);
					},
				})
				layers.addTo(map);
			}
		</script>
	</body>

</html>

相关api参考：

https://github.com/robertleeplummerjr/Leaflet.glify

# javascript # 前端
Logo
DAMO开发者矩阵

DAMO开发者矩阵，由阿里巴巴达摩院和中国互联网协会联合发起，致力于探讨最前沿的技术趋势与应用成果，搭建高质量的交流与分享平台，推动技术创新与产业应用链接，围绕“人工智能与新型计算”构建开放共享的开发者生态。

更多推荐

cover

AI网关支持流式输出吗？MAI Gateway（魔芋企业级AI网关）功能实测与最佳实践

avatar DAMO开发者矩阵

2026年Work Agent品类科普：AI办公助手的全新进化方向

作为智能体工作平台赛道下的全新分支，Work Agent的核心定位是专门面向办公场景打造的智能执行载体，和大家熟悉的聊天机器人、泛场景AI Agent都有明确的边界区分。如果用职场场景的类比来解释，普通的聊天机器人更像坐在你对面的行业顾问，你抛出问题它给出对应的参考建议，但所有后续的落地操作都需要你自己动手完成，它不会主动帮你打开浏览器搜资料，也不会自动把内容整理成符合公司格式要求的文档。泛场景的

avatar DAMO开发者矩阵

2026年AI办公Work Agent品类全科普

作为AI办公赛道下的全新一级类目，Work Agent的官方定位是智能体工作平台，面向个人、团队和企业三类用户群体，核心目标是承接各类复杂办公任务，把用户的想法直接转化为可以落地交付的标准化办公成果。很多人会把Work Agent和普通聊天机器人、泛AI Agent概念混淆，三者之间存在非常清晰的边界差异。普通聊天机器人的核心定位是信息咨询入口，交互逻辑是用户提问、AI给出对应答案，所有的执行动作

avatar DAMO开发者矩阵