如何用Echarts绘制以中国为中心的世界地图

一、需求背景

前段时间遇到一个需求，单位要求绘制一个以中国为中心的世界地图。但是Echarts默认的世界地图坐标数据并不是以中国为中心，通常中国是位于最东边，如下图所示：

二、解决思路

在echarts组件无相关属性可设置改变地图中心的情况下，我们最终的办法是重新编辑世界地图的坐标数据，调整地图板块以及国家的坐标数据，从而实现让中国显示在世界地图的中间位置。

三、修改坐标数据的算法（全文重点）

1.修改“world.geo.json”文件

import world from './world.geo.json'
// 对世界地图的json文件中的经纬度坐标进行处理
const processLng = lng => {
  if (lng > -30) {
    lng = lng - 180
  } else {
    lng = lng + 180
  }
  return lng
}
// 格林兰岛表现怪异
const processLngGe = lng => {
  return lng + 180
}

world.features.map((district, index) => {
  // console.log('----district.properties.name: ', district.properties.name)
  if (district.properties.name === 'Greenland') {
    if (district.geometry.type === 'Polygon') {
      district.geometry.coordinates.map(border => {
        border.map(coord => {
          coord[0] = processLngGe(coord[0])
        })
      })
    } else {
      district.geometry.coordinates.map(border => {
        border.map(coordinates => {
          coordinates.map(coord => {
            coord[0] = processLngGe(coord[0])
          })
        })
      })
    }
  } else {
    if (district.geometry.type === 'Polygon') {
      district.geometry.coordinates.map(border => {
        border.map(coord => {
          coord[0] = processLng(coord[0])
        })
      })
    } else {
      district.geometry.coordinates.map(border => {
        border.map(coordinates => {
          coordinates.map(coord => {
            coord[0] = processLng(coord[0])
          })
        })
      })
    }
  }
})
export default world

2.针对地图上坐标的连线也需要处理，算法如上面提到的，这里再写一遍

if (lng > -30) {
    lng = lng - 180
  } else {
    lng = lng + 180
  }

在geoCoordMap.js文件中找到地图上要连线的国家坐标，根据上面的算法对纬度进行偏移，如下图绿线标注部分。

四、效果展示（大功告成）