OpenLayers7.1导入Shapefile至Bing地图后无法缩放崩溃求修复代码

我尝试将Shapefile导入基于OpenLayers Bing Maps的地图，但导入后地图无法缩放，疑似崩溃。我使用的是OpenLayers 7.1，通过拖拽事件导入包含shape.shp、shape.dbf、shape.sbn等文件的shape.zip压缩包，基础代码参考Bing Maps示例，但已替换API密钥。

问题根源 #

原代码存在几个关键问题导致地图异常：

• OpenLayers版本不匹配：代码引入了v6.3.1的全局ol.js，但实际使用7.1版本，版本冲突引发交互异常
• ES模块导入错误：import vectorSource from 'ol/source/Vector';应为import VectorSource from 'ol/source/Vector';（大小写错误）
• 视图fit操作未做有效性校验：若Shapefile范围无效，fit会导致视图状态异常
• 全局API与ES模块混用：同时使用ES模块导入和全局ol对象，引发命名冲突

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Bing Maps with Shapefile Import</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@7.1.0/ol.css">
  <style>
    #map {
      width: 100%;
      height: 600px;
    }
    #layer-select {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 100;
    }
  </style>
</head>
<body>
  <select id="layer-select">
    <option value="RoadOnDemand">Road</option>
    <option value="Aerial">Aerial</option>
    <option value="AerialWithLabelsOnDemand">Aerial with Labels</option>
    <option value="CanvasDark">Dark Canvas</option>
    <option value="OrdnanceSurvey">Ordnance Survey</option>
  </select>
  <div id="map"></div>

  <!-- 引入对应版本的依赖资源 -->
  <script src="https://cdn.jsdelivr.net/npm/ol@7.1.0/dist/ol.js"></script>
  <script src="https://gipong.github.io/shp2geojson.js/lib/jszip.js"></script>
  <script src="https://gipong.github.io/shp2geojson.js/lib/jszip-utils.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.6.1/proj4.js"></script>
  <script src="https://gipong.github.io/shp2geojson.js/preprocess.js"></script>
  <script src="https://gipong.github.io/shp2geojson.js/preview.js"></script>

  <script>
    // 地图初始化
    const place = [59.6067, 36.2972];
    const styles = [
      'RoadOnDemand',
      'Aerial',
      'AerialWithLabelsOnDemand',
      'CanvasDark',
      'OrdnanceSurvey',
    ];
    const layers = [];

    for (let i = 0, ii = styles.length; i < ii; ++i) {
      layers.push(
        new ol.layer.Tile({
          visible: false,
          preload: Infinity,
          source: new ol.source.BingMaps({
            key: "YOUR_API_KEY", // 替换为你的Bing Maps密钥
            imagerySet: styles[i],
          }),
        })
      );
    }

    const map = new ol.Map({
      layers: layers,
      target: 'map',
      view: new ol.View({
        center: ol.proj.fromLonLat(place),
        zoom: 8,
      }),
    });

    // 图层切换逻辑
    const select = document.getElementById('layer-select');
    function onChange() {
      const style = select.value;
      for (let i = 0, ii = layers.length; i < ii; ++i) {
        layers[i].setVisible(styles[i] === style);
      }
    }
    select.addEventListener('change', onChange);
    onChange();

    // Shapefile导入逻辑
    const featureStyle = new ol.style.Style({
      stroke: new ol.style.Stroke({
        color: 'red',
        width: 1
      }),
      fill: new ol.style.Fill({
        color: 'rgba(255,0,0,0.1)'
      })
    });

    map.getViewport().addEventListener('dragover', function(event) {
      event.preventDefault();
    });

    map.getViewport().addEventListener('drop', shpShow);

    function shpShow(event) {
      event.preventDefault();
      const files = event.dataTransfer.files;
      
      for (let i = 0, ii = files.length; i < ii; ++i) {
        const file = files.item(i);
        loadshp({url: file, encoding: 'utf-8'}, function(geojson) {
          // 读取GeoJSON并转换投影
          const features = new ol.format.GeoJSON().readFeatures(
            geojson,
            { featureProjection: map.getView().getProjection() }
          );

          if (features.length === 0) {
            console.warn('未读取到有效要素');
            return;
          }

          // 创建矢量图层
          const vectorSource = new ol.source.Vector({
            features: features
          });
          const vectorLayer = new ol.layer.Vector({
            source: vectorSource,
            style: featureStyle
          });

          map.addLayer(vectorLayer);

          // 校验范围有效性后适配视图
          const extent = vectorSource.getExtent();
          if (ol.extent.isValid(extent)) {
            map.getView().fit(extent, {
              duration: 1000,
              maxZoom: 18 // 限制最大缩放级别，避免过度放大
            });
          } else {
            console.warn('要素范围无效，无法自动适配视图');
          }
        });
      }
    }
  </script>
</body>
</html>

关键修复点说明 #

• 统一版本：使用7.1.0版本的OpenLayers资源，彻底解决版本冲突
• 标准化API使用：全部采用全局ol对象调用API，避免模块与全局混用的冲突
• 增加有效性校验：在执行视图适配前检查要素范围是否有效，防止地图崩溃
• 优化视图控制：限制最大缩放级别，避免过度放大导致的异常
• 完善样式：添加填充样式，让导入的Shapefile要素更清晰可见
• 错误提示：对空要素、无效范围等异常情况给出控制台提示

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