Angular/Webpack重复加载Leaflet致插件被覆盖问题咨询

嘿，我刚好碰到过一模一样的问题！你这是典型的Angular/Webpack环境下Leaflet重复加载引发的冲突——第二次加载Leaflet会重置全局的L对象，把Minimap插件刚挂载到L上的方法直接冲没了。下面是几个亲测有效的解决思路：

1. 移除.angular-cli.json中重复的Leaflet脚本引用 #

你已经通过npm安装了Leaflet，Webpack会自动处理依赖的引入逻辑，再在scripts数组里手动添加../node_modules/leaflet/dist/leaflet.js就会导致重复加载。只保留Minimap的脚本即可：

"scripts": [
  "../src/assets/js/break-on.js",
  "../node_modules/leaflet-minimap/src/Control.MiniMap.js"
]

2. 在组件中正确导入并声明全局L对象 #

在使用Leaflet的组件顶部，先通过ES模块导入Leaflet，然后声明全局L变量（解决TypeScript的类型校验问题）：

import * as L from 'leaflet';
// 声明全局L，确保插件能挂载到正确的实例上
declare var L: typeof import('leaflet');

3. 验证插件挂载是否正常 #

初始化地图的时候，直接调用L.control.minimap()，如果能正常实例化并添加到地图，说明插件已经正确挂载到L对象上了：

// 初始化主地图
const map = L.map('map-container').setView([39.9042, 116.4074], 12);
// 添加瓦片图层
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
// 添加Minimap插件
const miniMap = new L.Control.MiniMap(
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'),
  { toggleDisplay: true }
).addTo(map);

额外提醒：适配Angular版本 #

如果你的Angular版本是6及以上，配置文件已经从.angular-cli.json改成了angular.json，记得在对应的scripts节点下修改配置哦。

内容的提问来源于stack exchange，提问作者jenson-button-event