如何在au-all.topo.json地图添加可交互自定义区域并禁用原有州点击？

完全可行，以下是具体实现步骤和示例代码：

1. 禁用原有州区域的交互 #

在加载au-all.topo.json的基础地图系列中，通过配置关闭鼠标交互和悬停样式，确保原有州区域不响应任何鼠标操作：

• 设置enableMouseTracking: false
• 禁用悬停状态样式states.hover.enabled: false

2. 添加可交互的自定义区域 #

创建独立的地图系列（推荐使用maparea类型用于面状区域），定义自定义区域的GeoJSON数据，需保证该数据与基础地图使用相同的坐标投影，以实现缩放同步。

3. 实现悬停与点击交互 #

为自定义区域系列绑定鼠标事件：

• 悬停时修改区域样式实现高亮效果
• 点击时获取区域详情数据，更新右侧HTML面板内容

示例代码 #

HTML结构 #

<div style="display: flex;">
  <div id="container" style="width: 70%; height: 600px;"></div>
  <div id="detail-panel" style="width: 30%; padding: 20px; border-left: 1px solid #ccc;">
    <h3>区域详情</h3>
    <div id="detail-content">请点击自定义区域查看详情</div>
  </div>
</div>

JavaScript实现 #

// 自定义区域GeoJSON示例（替换为你的实际区域数据）
const customRegions = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {
        name: '自定义区域A',
        detail: '这是自定义区域A的详细信息，包含人口、产业分布等内容'
      },
      geometry: {
        type: 'Polygon',
        coordinates: [[
          [144.96, -37.81],
          [145.0, -37.85],
          [144.92, -37.87],
          [144.96, -37.81]
        ]]
      }
    },
    {
      type: 'Feature',
      properties: {
        name: '自定义区域B',
        detail: '自定义区域B的详情，比如景点介绍、经济数据等'
      },
      geometry: {
        type: 'Polygon',
        coordinates: [[
          [151.21, -33.87],
          [151.25, -33.9],
          [151.18, -33.92],
          [151.21, -33.87]
        ]]
      }
    }
  ]
};

Highcharts.mapChart('container', {
  chart: {
    map: 'countries/au/au-all'
  },
  title: {
    text: '澳大利亚地图（自定义交互区域）'
  },
  mapNavigation: {
    enabled: true,
    buttonOptions: {
      verticalAlign: 'bottom'
    }
  },
  series: [
    // 基础地图系列（禁用交互）
    {
      name: '澳大利亚各州',
      mapData: Highcharts.maps['countries/au/au-all'],
      enableMouseTracking: false,
      states: {
        hover: {
          enabled: false
        }
      },
      dataLabels: {
        enabled: true,
        format: '{point.name}'
      }
    },
    // 自定义交互区域系列
    {
      name: '自定义区域',
      type: 'maparea',
      data: customRegions.features.map(feature => ({
        geometry: feature.geometry,
        properties: feature.properties
      })),
      color: '#2f7ed8',
      states: {
        hover: {
          color: '#8bbc21'
        }
      },
      point: {
        events: {
          click: function() {
            // 更新右侧详情面板
            document.getElementById('detail-content').innerHTML = `
              <h4>${this.properties.name}</h4>
              <p>${this.properties.detail}</p>
            `;
          },
          mouseOver: function() {
            this.series.chart.tooltip.refresh(this);
          }
        }
      },
      tooltip: {
        pointFormat: '{point.properties.name}'
      }
    }
  ]
});

注意事项 #

• 自定义区域的GeoJSON坐标必须与au-all.topo.json使用相同的投影（通常为WGS84经纬度），否则缩放时会出现偏移
• 若自定义区域数量较多，可将GeoJSON数据单独保存为文件，通过fetch加载后传入系列

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