echarts绘制一个名山地图

说在前面

最近一年开始爬起了山，半年内也爬了不少的山，所以就想着做一个名山地图记录一下。（文章最后分享了一些最近爬山拍下的照片，有兴趣的也可以看看😀）

数据整理

要想制作这个地图，我们需要先获取需要展示的山的相关数据，比如：经纬度、所在省份城市、海拔高度和简介。整理出来的数据格式如下：

javascript 复制代码

{
    name: "黄山",
    province: "安徽省",
    city: "黄山市",
    longitude: 118.183,
    latitude: 30.167,
    elevation: 1864.8,
    intro:
      "以奇松、怪石、云海、温泉、冬雪'五绝'闻名，世界文化与自然双重遗产，徐霞客赞'黄山归来不看岳'"
  },
  {
    name: "庐山",
    province: "江西省",
    city: "九江市",
    longitude: 115.97,
    latitude: 29.41,
    elevation: 1474,
    intro:
      "地垒式断块山，以三叠泉瀑布、避暑胜地和多元宗教文化著称，世界文化遗产及地质公园"
  },
  ......

代码实现

地理数据预处理

首先我们需要先引入中国地图数据及前面收集的山脉数据。

javascript 复制代码

const chinaJson = require("../../utils/china.json");
import { mountains } from "./mountains.js";

图标区分

使用不同图标区分状态（爬过/没爬过）。

已爬过的山脉数组

将已经爬过的山脉整理成一个数组。

javascript 复制代码

visited: [
      "华山","黄山","泰山",
      "长白山","武功山","恒山",
      "云台山","三清山","龟峰"
    ]

重组山脉数据

根据原有山脉数据和已爬过山脉数组数据进行重组。

javascript 复制代码

const data = mountainsData.map(item => {
  return {
    name: item.name,
    value: [item.longitude, item.latitude],
    info: item,
    icon: this.visited.includes(item.name) ? "mountain" : "mountain2"
  };
});

给地图添加山脉标注

这里我们可以通过绘制散点数据层来将山脉图片绘制到地图上，具体配置项如下：

配置项	功能	示例值
`coordinateSystem`	绑定地理坐标系（必填）	`'geo'`
`symbol`	图标类型（内置形状或自定义图片）	`'circle'`、`'image://mountain.png'`
`symbolSize`	图标尺寸（可函数动态计算）	`10` 或 `(val) => val[2] * 2`
`itemStyle`	点样式（颜色、透明度等）	`{ color: '#F4E925', opacity: 0.8 }`
`emphasis`	高亮状态样式	`{ itemStyle: { shadowBlur: 20 } }`
`tooltip`	自定义提示框内容	`formatter: '海拔：{c}米'`

javascript 复制代码

series: [
  {
    type: "scatter",
    coordinateSystem: "geo",
    data: data,
    symbol: function(_, params) {
      const data = params.data;
      return (
        "image://" +
        require(`../../assets/${data.icon || "mountain2"}.png`)
      );
    },
    symbolSize: 40,
    label: {
      show: true,
      formatter: "{b}",
      position: "right",
      verticalAlign: "middle",
      align: "left"
    }
  }
]

添加提示信息

将前面整理的山脉信息在地图中按格式展示。

javascript 复制代码

tooltip: {
  trigger: "item",
  formatter: function(params) {
    return ` <span style="font-weight: bolder;">${
      params.name
    }</span><br><hr/<br>位置：${params.data.info.province}-${
      params.data.info.city
    }<br>海拔：${
      params.data.info.elevation
    }米<br><hr/>${params.data.info.intro.replace(
      /(.{15})/g,
      "$1<br/>"
    )}`;
  }
}

源码

源码已开源到gitee，有兴趣的也可以到这里看看：gitee.com/zheng_yongt...

🌟觉得有帮助的可以点个star~
🖊有什么问题或错误可以指出，欢迎pr~
📬有什么想要实现的组件或想法可以联系我~

公众号

关注公众号『 前端也能这么有趣 』，获取更多有趣内容。

发送加群还可以加入群聊，一起来学习（摸鱼）吧~

说在后面

🎉 这里是 JYeontu，现在是一名前端工程师，有空会刷刷算法题，平时喜欢打羽毛球 🏸 ，平时也喜欢写些东西，既为自己记录 📋，也希望可以对大家有那么一丢丢的帮助，写的不好望多多谅解 🙇，写错的地方望指出，定会认真改进 😊，偶尔也会在自己的公众号『前端也能这么有趣』发一些比较有趣的文章，有兴趣的也可以关注下。在此谢谢大家的支持，我们下文再见 🙌。