Skip to content

地图

registerMap

js
echarts.registerMap(mapName, opt, specialAreas)
  • mapName:地图别名
  • opt:GeoJSON解析得到的对象
  • specialAreas:特殊区域的缩放与偏移调整
js
  echarts.registerMap('USA', usaJson, {
    Alaska: {
      left: -131,
      top: 25,
      width: 15
    },
    Hawaii: {
      left: -110,
      top: 28,
      width: 5
    },
    'Puerto Rico': {
      left: -76,
      top: 26,
      width: 2
    }
  });

特殊区域的缩放与偏移调整

默认情况下,ECharts 会按照 GeoJSON 里的经纬度比例完整渲染。

  • 问题:阿拉斯加和夏威夷距离美国本土非常远。
  • 后果:如果按真实比例渲染,美国本土会缩得非常小,地图中间会出现大片空白。
  • 解决方案:把这些“远方”的区域剪切出来,强行移动到地图的空白处(通常是左下角或右下角),并缩放它们的大小。

echarts.registerMap 的第三个参数中,你定义的每个 Key(如 Alaska)必须匹配 GeoJSON 中 properties.name 的值。

value为该区域的新位置信息