eharts 中国地图添加城市（散点图实现，含获取城市坐标、图片转base64、自定义散点样式）

原创

朝阳39 2022-07-12 22:10:54 ©著作权

文章标签 echarts 前端 javascript d3 f5 文章分类 虚拟化云计算

©著作权归作者所有：来自51CTO博客作者朝阳39的原创作品，请联系作者获取转载授权，否则将追究法律责任

eharts 中国地图添加城市（散点图实现，含获取城市坐标、图片转base64、自定义散点样式）_d3

如上图所示，青岛不是省份、直辖市或特别行政区，所以默认的中国地图上，无法标注青岛，那本图是如何实现的呢？

实现思路

隐藏地图坐标默认的地名标签

: {
          map: "china",
          label: {
            emphasis: {
              // 高亮地区时，隐藏区域标签
              show: false,
            },
          },
        },

使用散点图来标注地点
（1）地图默认已有的省份、直辖市和特别行政区名称直接从地图数据中获取，无需手动添加

let dataList = [];
      /*获取地图中已有的省、直辖市和特别行政区*/
      echarts.getMap("china").geoJson.features.forEach((item) => {
        dataList.push({
          // 地区名称
          name: item.properties.name,
          // 地区经纬度
          value: item.properties.cp,
        });
      });

（2）地图中没有的城市，手动添加城市名和城市坐标

城市坐标可以通过下方网站查询

http://life.chacuo.net/postion/

eharts 中国地图添加城市（散点图实现，含获取城市坐标、图片转base64、自定义散点样式）_echarts_02

// 添加城市——参照青岛的格式，可以添加其他城市
      newCityList: [
        {
          name: "青岛",
          value: [120.4, 36],
        },
      ],

// 添加城市
      return dataList.concat(this.newCityList);

完整范例代码如下

china.js 的百度网盘下载链接：
https://pan.baidu.com/s/1K0wlmb3Yt223XAykMXpALA 提取码：w160

<template>
  <div class="mapBox">
    <div style="height: 100%;width:" ref="myChart"></div>
  </div>
</template>

<script>import echarts from "echarts";
import "@/components/charts/chinaMap/china.js";

export default {
  data() {
    return {
      dataList: [],
      // 添加城市——参照青岛的格式，可以添加其他城市
      newCityList: [
        {
          name: "青岛",
          value: [120.4, 36],
        },
      ],
    };
  },
  methods: {
    initData() {
      let dataList = [];
      /*获取地图中已有的省、直辖市和特别行政区*/
      echarts.getMap("china").geoJson.features.forEach((item) => {
        dataList.push({
          // 地区名称
          name: item.properties.name,
          // 地区经纬度
          value: item.properties.cp,
        });
      });
      // 添加城市
      return dataList.concat(this.newCityList);
    },
    initEchartMap() {
      let myChart = echarts.init(this.$refs.myChart);

      let options = {
        geo: {
          map: "china",
          label: {
            emphasis: {
              // 高亮地区时，隐藏区域标签
              show: false,
            },
          },
        },
        series: [
          {
            name: "散点",
            type: "scatter",
            coordinateSystem: "geo",
            data: this.dataList,
            label: {
              show: true,
              // 标签格式化，获取数据中的name
              formatter: "{b}",
              // 标签偏移量 -- 水平偏移，垂直偏移，原点为散点的位置
              offset: [0, -18],
              color: "black",
            },
            emphasis: {
              label: {
                show: true,
                formatter: "{b}",
                offset: [0, -20],
                color: "red",
                fontSize: 18,
              },
            },
          },
        ],
      };

      myChart.setOption(options);

      // 添加窗口大小改变监听事件，当窗口大小改变时，图表会重新绘制，自适应窗口大小
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
  },

  mounted() {
    this.$nextTick(() => {
      this.dataList = this.initData();
      this.initEchartMap();
    });
  },
};</script>
<style scoped>.mapBox {
  background: #020933;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  box-sizing: border-boxs;
}</style>

地图优化——自定义散点样式

eharts 中国地图添加城市（散点图实现，含获取城市坐标、图片转base64、自定义散点样式）_echarts_03

修改symbol的配置即可实现，上图中使用的是自定义图片

eharts 中国地图添加城市（散点图实现，含获取城市坐标、图片转base64、自定义散点样式）_f5_04

需先使用下方网站将图片转换成base64格式

http://tool.chinaz.com/tools/imgtobase/

eharts 中国地图添加城市（散点图实现，含获取城市坐标、图片转base64、自定义散点样式）_d3_05

eharts 中国地图添加城市（散点图实现，含获取城市坐标、图片转base64、自定义散点样式）_echarts_06

作为symbol的属性值，还需在base64的数据前添加 image://

完整范例代码如下：

<template>
  <div class="mapBox">
    <div style="height: 100%;width:" ref="myChart"></div>
  </div>
</template>

<script>import echarts from "echarts";
import "@/components/charts/chinaMap/china.js";

export default {
  data() {
    return {
      dataList: [],
      // 添加城市——参照青岛的格式，可以添加其他城市
      newCityList: [
        {
          name: "青岛",
          value: [120.4, 36],
        },
      ],
    };
  },
  methods: {
    initData() {
      let dataList = [];
      /*获取地图中已有的省、直辖市和特别行政区*/
      echarts.getMap("china").geoJson.features.forEach((item) => {
        dataList.push({
          // 地区名称
          name: item.properties.name,
          // 地区经纬度
          value: item.properties.cp,
        });
      });
      // 添加城市
      return dataList.concat(this.newCityList);
    },
    initEchartMap() {
      let myMark =
        "image://data:image/png;base64,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wOwW3BVUDRQdQ20tOVWC1Kma+kImWIb2vdaklmt1CATcAYjuRvwxONLnhrWCjyVgNwNIn0TATBpndljeMvBirYUjHTJ/NEBulPt8L5A+9ywXCm3Qr38duzbslwGMhwBipoWPPcW8ZOieO6Lv47IIN9vg6swfofz4LS19B9VA2V4owB4FXAej3HuWfwUzwA1nsUuA1wJZuFIwvRegCI0JnoGI2b3vBK67jdDNr4oypv50hlaUTVewlTCX42NPMS8ZuufC4js4Ve4gipnN6RsooW69BkgEVh0rx65yNjotRzoQcrOOn1xaOFLfRdEWVJOg70wxucR7465l1heMiOQE9wWnymlGeQoHGg4+Sb4bOJtmXOhdPOOi9NWH+027EbvfsjnfDm71qW6pSf1aJi1XPgV3naNsy3YdpfwK3AbXJiP8JcpvxH8xCY7J0JeHaZ2zwdr97Guf50BLPywAraCkncSWN1d4XgDXWqKNRYB9I9cKskmgTYJtKutR+WbhowRljSeaFFfTRc5OjqYyC3sdouvVFDhvroT7LLdXCsL3evsler4LwKXmWfsF7PKmnOXukgpXlftynoHlkznASpYvNXCl3u75/wMbkWN60cxCCAAAAABJRU5ErkJggg==";

      let myChart = echarts.init(this.$refs.myChart);

      let options = {
        geo: {
          map: "china",
          label: {
            emphasis: {
              // 高亮地区时，隐藏区域标签
              show: false,
            },
          },
        },
        series: [
          {
            symbol: myMark,
            symbolSize: 15,
            name: "散点",
            type: "scatter",
            coordinateSystem: "geo",
            data: this.dataList,
            label: {
              show: true,
              // 标签格式化，获取数据中的name
              formatter: "{b}",
              // 标签偏移量 -- 水平偏移，垂直偏移，原点为散点的位置
              offset: [0, -18],
              color: "black",
            },
            emphasis: {
              label: {
                show: true,
                formatter: "{b}",
                offset: [0, -20],
                color: "red",
                fontSize: 18,
              },
            },
          },
        ],
      };

      myChart.setOption(options);

      // 添加窗口大小改变监听事件，当窗口大小改变时，图表会重新绘制，自适应窗口大小
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
  },

  mounted() {
    this.$nextTick(() => {
      this.dataList = this.initData();
      this.initEchartMap();
    });
  },
};</script>
<style scoped>.mapBox {
  background: #020933;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 30px;
  box-sizing: border-boxs;
}</style>