# 地图

地图图表的两种使用方式：

地图数据	说明
百度地图API	需要申请百度地图 AK
矢量地图	需要准备矢量地图数据

地图的绘制：

获取地图数据
注册地图
配置 geo（地理坐标系）

常见效果：

拖动、缩放、初始缩放、中心点
结合 visualMap
结合散点图

地图特点：

地图主要可以帮忙我们从宏观的角度快速看出不同地理位置上的数据差异

# 1. 简单的地图

1.准备数据

const chinaMap = await fetch('https://raw.githubusercontent.com/apache/echarts/5.0.0-beta.1/map/json/china.json')
        .then((res) => res.json());

2.注册地图

echarts.registerMap('chinaMap', chinaMap);

3.设置地图

option = {
  geo: {
    map: 'chinaMap',
  }
}

示例：

<!--29-map-basic.html-->
<div id="box_29-map-basic" style="width: 600px; height: 600px; border: solid 1px #ddd;"></div>
<script type="module">
  const chinaMap = await fetch('https://raw.githubusercontent.com/apache/echarts/5.0.0-beta.1/map/json/china.json')
    .then((res) => res.json());
  echarts.registerMap('chinaMap', chinaMap);
  echarts.init(document.querySelector('#box_29-map-basic')).setOption({
    geo: {
      map: 'chinaMap',
    }
  });
</script>

参考：

Echarts省市区县级地图JSON文件下载 (opens new window)

# 2. 常用配置

说明：

缩放和拖动， roam
文本标签显示， label
初始缩放比例
当前视角的中心点

配置：

option = {
  geo: {
    map: 'chinaMap',
    
    // 是否开启鼠标缩放和平移漫游。默认不开启。
    // 如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
    roam: true,
    
    // 图形上的文本标签，可用于说明图形的一些数据信息，比如值，名称等。
    label: { show: true },
    
    // 当前视角的缩放比例。
    zoom: 1.2,
    
    // 当前视角的中心点，默认使用原始坐标（经纬度）。
    center: [87, 43],
  }
}

示例：

<!--30-map-common-config.html-->
<div id="box_30-map-common-config" style="width: 600px; height: 600px; border: solid 1px #ddd;"></div>
<script type="module">
  const chinaMap = await fetch('https://raw.githubusercontent.com/apache/echarts/5.0.0-beta.1/map/json/china.json')
    .then((res) => res.json());
  echarts.registerMap('chinaMap', chinaMap);
  echarts.init(document.querySelector('#box_30-map-common-config')).setOption({
    geo: {
      map: 'chinaMap',
      roam: true,
      label: { show: true },
      zoom: 1.2,
      center: [87, 43],
    }
  });
</script>

# 3. 常见效果

# 3.1. 不同城市颜色不同

说明：

显示基本的中国地图
城市的空气质量数据设置给 series
将 series 下的数据和 geo 关联起来
- series-map.geoIndex: 0
- series-map.data.name 与 chinaMap.features.properties.name 关联
结合 visualMap 使用
- 没有 visualMap.min/visualMap.max，不会显示颜色

实现：

option = {
   geo: {
      map: 'chinaMap',
      label: { show: true },
   },
   series: [
      {
         type: 'map',
         geoIndex: 0, // 与第 0 个 geo 关联起来
         data: airQualityList,
      }
   ],
   visualMap: {
      min: 0,
      max: 300,
   }
}

示例：

<!--31-map-series.html-->
<div id="box_31-map-series" style="width: 700px; height: 600px; border: solid 1px #ddd;"></div>
<script type="module">
  const chinaMap = await fetch('https://raw.githubusercontent.com/apache/echarts/5.0.0-beta.1/map/json/china.json')
    .then((res) => res.json());
  echarts.registerMap('chinaMap', chinaMap);
  // airQualityList.${item}.name == chinaMap.features.${item}.properties.name
  const airQualityList = [
    { name: '北京', value: 39.92 }, { name: '天津', value: 39.13 }, { name: '上海', value: 31.22 },
    { name: '重庆', value: 66 }, { name: '河北', value: 147 }, { name: '河南', value: 113 },
    { name: '云南', value: 25.04 }, { name: '辽宁', value: 50 }, { name: '黑龙江', value: 114 },
    { name: '湖南', value: 175 }, { name: '安徽', value: 117 }, { name: '山东', value: 92 },
    { name: '新疆', value: 84 }, { name: '江苏', value: 67 }, { name: '浙江', value: 84 },
    { name: '江西', value: 96 }, { name: '湖北', value: 273 }, { name: '广西', value: 59 },
    { name: '甘肃', value: 99 }, { name: '山西', value: 39 }, { name: '内蒙古', value: 58 },
    { name: '陕西', value: 61 }, { name: '吉林', value: 51 }, { name: '福建', value: 29 },
    { name: '贵州', value: 71 }, { name: '广东', value: 38 }, { name: '青海', value: 57 },
    { name: '西藏', value: 24 }, { name: '四川', value: 58 }, { name: '宁夏', value: 52 },
    { name: '海南', value: 54 }, { name: '台湾', value: 88 }, { name: '香港', value: 66 },
    { name: '澳门', value: 77 }, { name: '南海诸岛', value: 55 }
  ];
  echarts.init(document.querySelector('#box_31-map-series')).setOption({
    geo: {
      map: 'chinaMap',
      roam: true,
      label: { show: true },
      zoom: 1.0,
    },
    series: {
      type: 'map',
      geoIndex: 0, // 与第 0 个 geo 关联起来
      data: airQualityList,
    },
    visualMap: {
      min: 0,
      max: 300,
      inRange: {
        color: ['white', 'red'], // 颜色范文
      },
      calculable: true, // 滑块，筛选数据
    }
  });
</script>

# 3.2. 结合散点图

说明：

散点图使用地图坐标： series-effectScatter.coordinateSystem: 'geo'
数据集： encode: { lng: 'longitude', lat: 'latitude'},

示例：

<!--32-map-scatter.html-->
<div id="box_32-map-scatter" style="width: 700px; height: 600px; border: solid 1px #ddd;"></div>
<script type="module">
  const chinaMap = await fetch('https://raw.githubusercontent.com/apache/echarts/5.0.0-beta.1/map/json/china.json')
    .then((res) => res.json());
  echarts.registerMap('chinaMap', chinaMap);
  console.log(chinaMap)
  // airQualityList.${item}.name == chinaMap.features.${item}.properties.name
  const airQualityList = [
    { name: '北京', value: 39.92 }, { name: '天津', value: 39.13 }, { name: '上海', value: 31.22 },
    { name: '重庆', value: 66 }, { name: '河北', value: 147 }, { name: '河南', value: 113 },
    { name: '云南', value: 25.04 }, { name: '辽宁', value: 50 }, { name: '黑龙江', value: 114 },
    { name: '湖南', value: 175 }, { name: '安徽', value: 117 }, { name: '山东', value: 92 },
    { name: '新疆', value: 84 }, { name: '江苏', value: 67 }, { name: '浙江', value: 84 },
    { name: '江西', value: 96 }, { name: '湖北', value: 273 }, { name: '广西', value: 59 },
    { name: '甘肃', value: 99 }, { name: '山西', value: 39 }, { name: '内蒙古', value: 58 },
    { name: '陕西', value: 61 }, { name: '吉林', value: 51 }, { name: '福建', value: 29 },
    { name: '贵州', value: 71 }, { name: '广东', value: 38 }, { name: '青海', value: 57 },
    { name: '西藏', value: 24 }, { name: '四川', value: 58 }, { name: '宁夏', value: 52 },
    { name: '海南', value: 54 }, { name: '台湾', value: 88 }, { name: '香港', value: 66 },
    { name: '澳门', value: 77 }, { name: '南海诸岛', value: 55 }
  ];
  echarts.init(document.querySelector('#box_32-map-scatter')).setOption({
    dataset: {
      dimensions: ['name', 'longitude', 'latitude'],
      source: [
        { name: '湖北', longitude: 111.298572, latitude: 30.584355 }
      ]
    },
    geo: {
      map: 'chinaMap',
      roam: true,
      label: { show: true },
      zoom: 1.0,
    },
    series: [
      {
        type: 'map',
        geoIndex: 0, // 与第 0 个 geo 关联起来
        data: airQualityList,
      },
      {
        type: 'effectScatter',
        coordinateSystem: 'geo', // 使用地理坐标系
        rippleEffect: {
          scale: 10,
        },
        encode: { lng: 'longitude', lat: 'latitude'},
        // data: [
        //   { value: [114.298572, 30.584355] }
        // ]
      }
    ],
    visualMap: {
      min: 0,
      max: 300,
      calculable: true, // 滑块，筛选数据
    }
  });
</script>

本章目录