如何在Vite环境下使Mapael地图正常工作？

问题1：切换到Vite后地图加载报错 #

原项目在Webpack下运行正常，迁移到Vite后地图加载失败，核心原因是Vite要求ES6 Module风格的导入，修改导入方式即可解决：

import jquery from "jquery"
import mapael from "jquery-mapael"

(function (factory) {
    if (typeof exports === 'object') {
        // CommonJS
        module.exports = factory(jquery, mapael);
    }
    // 其他非必要条件可移除
})

问题2：jquery-mousewheel依赖兼容问题（鼠标滚轮仅能缩小） #

地图加载成功后，出现鼠标滚轮只能缩小不能放大的异常，可通过以下步骤修复：

步骤1：模板中添加模板变量 #

在地图容器的div上添加#map模板变量：

<article id="map">
    <div #map class="map-canvas">
        <div class="map">
            <span></span>
        </div>
        <div class="areaLegend">
            <span></span>
        </div>
    </div>
</article>

步骤2：通过@ViewChild获取地图实例 #

在组件类中获取地图DOM实例：

@ViewChild('map') map: any;

步骤3：初始化地图时禁用内置鼠标滚轮缩放 #

在Mapael的初始化配置中，显式关闭内置的鼠标滚轮缩放功能：

zoom: {
  enabled: true,
  maxLevel: 10,
  mousewheel: false
},

步骤4：自定义鼠标滚轮事件实现缩放逻辑 #

绑定自定义的鼠标滚轮事件，手动控制缩放级别：

$(this.map.nativeElement).on("mousewheel", (event) => {
  event.preventDefault();
  event.stopPropagation();

  const deltaY = (event.originalEvent as any).deltaY;
  const mapZoomData = $(this.map.nativeElement).data('mapael').zoomData;
  let zoomLevel = mapZoomData.zoomLevel;

  if (deltaY > 0) {
    zoomLevel++
  } else {
    zoomLevel--
  }
  
  $(this.map.nativeElement).trigger('zoom', { level: zoomLevel, fixedCenter: true });
})

以上是简化版的缩放实现，组合后即可实现地图的正常缩放功能。

内容的提问来源于stack exchange，提问作者ak.leimrey