为何OpenLayers KMZ示例无法加载我的自定义KMZ文件？

我有一个KMZ文件，本地用Google Earth可以正常打开，但拖放到OpenLayers官方的拖拽加载KMZ示例中无法显示，控制台也没有报错。

KMZ文件结构 #

wash/
    files/
        wash-dc.png
    wash-dc.kml

内嵌图片 #

KML文件内容 #

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Folder>
    <GroundOverlay>
      <Icon>
        <href>files/wash-dc.png</href>
      </Icon>
      <LatLonBox>
        <north>38.9098629826801456</north>
        <south>38.8880073821501711</south>
        <east>-77.0497762322933539</east>
        <west>-77.0120905091252439</west>
        <rotation>0</rotation>
      </LatLonBox>
    </GroundOverlay>
  </Folder>
</kml>

问题原因 #

OpenLayers默认KMZ解析逻辑存在两个核心问题：

1. 未处理嵌套目录的相对路径：KML文件存放在wash/目录下，引用的图片路径是files/wash-dc.png，但KMZ内的实际完整路径是wash/files/wash-dc.png，解析时路径匹配失败。
2. 不支持直接渲染GroundOverlay：该类型需要手动转换为OpenLayers可识别的图层类型。

修改示例代码的解决方案 #

替换官方示例中的handleDrop函数内的KMZ处理逻辑，添加路径修正和图层转换：

function handleDrop(event) {
  event.preventDefault();
  const files = event.dataTransfer.files;
  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    if (file.name.endsWith('.kmz')) {
      const reader = new FileReader();
      reader.onload = function (event) {
        JSZip.loadAsync(event.target.result).then(function (zip) {
          // 定位KMZ中的KML文件
          const kmlFilename = Object.keys(zip.files).find(name => name.endsWith('.kml'));
          if (!kmlFilename) return;
          
          // 获取KML文件所在的目录前缀
          const kmlDir = kmlFilename.substring(0, kmlFilename.lastIndexOf('/') + 1);

          zip.file(kmlFilename).async('string').then(function (kmlString) {
            // 修正KML里的资源引用路径
            const correctedKml = kmlString.replace(/<href>(.*?)<\/href>/g, (match, path) => {
              return `<href>${kmlDir}${path}</href>`;
            });

            // 解析修正后的KML
            const kmlFormat = new ol.format.KML({
              extractStyles: true,
              extractAttributes: true
            });
            const features = kmlFormat.readFeatures(correctedKml, {
              featureProjection: map.getView().getProjection()
            });

            // 处理GroundOverlay，转换为ImageStatic图层
            features.forEach(feature => {
              const geom = feature.getGeometry();
              if (geom instanceof ol.geom.Polygon) {
                const coords = geom.getCoordinates()[0];
                // 提取图片路径并从zip中读取
                const imgPath = feature.get('icon').href;
                zip.file(imgPath).async('base64').then(base64 => {
                  const imgUrl = `data:image/png;base64,${base64}`;
                  // 计算图片的地理范围
                  const extent = ol.proj.transformExtent(
                    [coords[3][0], coords[0][1], coords[1][0], coords[2][1]],
                    'EPSG:4326',
                    map.getView().getProjection()
                  );
                  // 创建图片图层并添加到地图
                  const imageLayer = new ol.layer.Image({
                    source: new ol.source.ImageStatic({
                      url: imgUrl,
                      imageExtent: extent
                    })
                  });
                  map.addLayer(imageLayer);
                });
              }
            });
          });
        });
      };
      reader.readAsArrayBuffer(file);
    }
  }
}

关键修改点 #

• 自动识别KML在KMZ中的位置，补全资源引用的路径前缀
• 将KML中的GroundOverlay转换为OpenLayers支持的ImageStatic图层
• 从KMZ中读取图片并转为DataURL直接使用

内容的提问来源于stack exchange，提问作者Eric G