Angular14中Highcharts Choropleth与Esri切片地图共存时页面卡顿求助

针对同时加载Esri切片背景和Highcharts Choropleth地图时页面冻结的问题，可通过以下步骤解决：

• 统一坐标系配置
  确保两个地图使用相同的坐标系（Esri切片默认常用Web墨卡托EPSG:3857），在Highcharts配置中显式指定投影：

  mapView: {
    projection: {
      name: 'EPSG:3857'
    }
  }
  

  避免因坐标不匹配触发无限转换计算。

• 调整渲染顺序
  先完成Esri切片地图的加载，再初始化Highcharts Choropleth系列，避免并行渲染抢占资源：

  // 监听Esri地图加载完成事件
  esriMap.on('load', () => {
    this.initHighchartsChoropleth();
  });
  

  也可给Highcharts初始化添加短延迟，降低资源竞争概率：

  setTimeout(() => {
    this.renderHighcharts();
  }, 500);
  

• 关闭不必要的渲染消耗
  禁用Highcharts的动画和自动重绘功能，减少渲染时的资源占用：

  chart: {
    animation: false,
    events: {
      load: function() {
        this.redraw(false); // 关闭自动重绘
      }
    }
  },
  plotOptions: {
    map: {
      animation: false
    }
  }
  

• 设置图层层级
  通过CSS明确两个图层的层级关系，避免叠加冲突：

  .highcharts-container {
    position: relative;
    z-index: 10;
  }
  .esri-map {
    position: absolute;
    z-index: 1;
  }
  

• 替代方案：用Highcharts原生加载瓦片
  如果Esri切片支持XYZ格式，直接使用Highcharts的tilemap系列加载背景，彻底避免第三方库冲突：

  series: [
    {
      type: 'tilemap',
      url: 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}',
      attribution: 'Esri'
    },
    {
      type: 'map',
      // Choropleth数据配置
    }
  ]
  

按照上述步骤调整后，即可实现两种地图的正常共存渲染，匹配预期效果。

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