Leaflet + leaflet-kml 是HTML5加载KML的最小可行方案，需通过HTTP/HTTPS托管KML文件并监听loaded事件手动设置样式与交互，避免使用fetch+DOMParser解析。
HTML5中用Leaflet加载KML文件的最小可行方案
原生HTML5不支持直接解析KML，必须借助第三方库。Leaflet + leaflet-kml 是目前最轻量、兼容性最好的组合，比OpenLayers更易上手且对移动端友好。
关键点：KML必须是可跨域访问的URL（不能是本地file://路径），否则浏览器会因CORS拦截而静默失败。
- 引入CDN资源：
leaflet@1.9.4+leaflet-kml@0.8.0 - KML文件需托管在HTTP/HTTPS服务下（开发时可用
python3 -m http.server 8000起本地服务） - 不要用
fetch手动读取KML再传字符串——leaflet-kml内部已封装XML解析逻辑，直接传URL最稳
为什么用fetch读KML再用DOMParser解析容易出错
看似可控，实则踩坑密集：KML命名空间（xmlns）、坐标系隐式声明（如altitudeMode）、CDATA嵌套标签都会导致DOMParser解析后丢失节点或坐标错乱。
leaflet-kml底层用的是xml2js风格的健壮解析器，能处理gx:coord、TimeSpan、ExtendedData等非标准扩展字段。
立即学习“前端免费学习笔记（深入）”；
- 典型错误现象：
Uncaught TypeError: Cannot read property 'length' of undefined（坐标数组为空） - 调试技巧：在控制台执行
new DOMParser().parseFromString(kmlStr, 'text/xml')，检查documentElement.tagName是否为kml，否则说明命名空间污染 - 替代方案仅推荐
ogc-api-features这类现代OGC服务，但要求KML先转GeoJSON——增加服务端依赖
L.KML图层的样式覆盖与交互控制
L.KML返回的是标准Leaflet图层对象，但默认样式不可配。必须监听loaded事件，在图层就绪后遍历其内部layers手动设样式。
const kmlLayer = new L.KML('data/places.kml');
kmlLayer.on('loaded', () => {
kmlLayer.eachLayer(layer => {
if (layer instanceof L.Polygon) {
layer.setStyle({ color: '#ff6b6b', weight: 2 });
}
if (layer instanceof L.Marker) {
layer.bindPopup(layer.options.description || '');
}
});
});
map.addLayer(kmlLayer);
- 注意：
eachLayer只对已加载完成的子图层有效，不能在new L.KML()后立刻调用 - KML中的
StyleMap和IconStyle会被忽略，所有样式必须用Leaflet API重写 - 点击事件绑定要放在
loaded回调内，否则layer实例尚未生成
移动端缩放时KML标注文字模糊或消失的根本原因
不是渲染性能问题，而是KML里LabelStyle的<scale></scale>值被Leaflet当作绝对像素缩放，未随地图缩放动态适配。结果就是：放大后文字过小不可读，缩小后超出canvas边界被裁剪。
解决方式只有两个：要么在KML生成阶段去掉LabelStyle，全由Leaflet的bindPopup或bindTooltip接管；要么用geojson-vt预切片——但KML转GeoJSON时会丢失name、description等字段，需额外映射。
- 快速验证：打开开发者工具，禁用
canvas渲染（强制走SVG），文字是否恢复清晰？若恢复，确认是Canvas缩放失真 - 临时缓解：给
L.KML加zIndex并设pane: 'markerPane'，避免被其他图层遮盖 - 真正可靠的方案是放弃KML标注，改用
<point><coordinates></coordinates></point>数据配合Leaflet自定义图标+tooltip
NetworkLink和GroundOverlay在Leaflet中基本不可用，遇到这类复杂KML，优先考虑服务端转GeoJSON而非前端硬扛。 
