返回 导航

其他

hangge.com

ECharts - 自定义地图散点标记的背景图片（附样例）

作者：hangge | 2024-02-20 09:35
    当使用 ECharts 制作地图散点标记时，我们通常可以使用默认的标记图标，比如圆点或者其他简单形状。然而，有时候我们希望使用自定义的背景图片来代替默认的标记图标，以使地图更符合特定主题或需求。下面我将演示如何在 ECharts 中实现自定义地图散点标记的背景图片。

1，默认样式

（1）ECharts 默认自带了 circle（圆形）、rect（矩形）、roundRect（圆角矩形）、triangle（三角形）、diamond（菱形）、pin（图钉）、arrow（箭头）等标记样式，下面是使用 pin 图钉样式的效果：
（2）下面是相关的样例代码：
<template>
  <!-- 地图容器 -->
  <div ref="mapContainer" style="width:100%; height: 600px;"></div>
</template>

<script>
// 引入echarts库
import echarts from 'echarts'

export default {
  data() {
    return {
      // 导入江苏省地图的JSON数据
      jsMap: require("@/libs/mapJson/320000.json"),
      // ECharts的配置项
      chartOption: {
        geo: [
          {
            // 地图名称，这里为江苏省
            map: '江苏',
            // 地图缩放级别
            zoom: 1,
            // 地图上的标签配置
            label: {
              show: true,           // 是否显示标签
              fontSize: 13,         // 标签字体大小
              color: '#333',        // 标签字体颜色
              position: ['50%', '50%'],  // 标签位置
            },
            // 地图区域的样式配置
            itemStyle: {
              areaColor: '#5FC5C1',  // 地图区域颜色
              borderColor: '#fff',   // 地图区域边界颜色
              fontWeight: 700,       // 地图区域字体粗细
              borderWidth: 1,        // 地图区域边界宽度
              shadowColor: "rgba(0, 0, 0, 0.5)", // 阴影颜色
              shadowBlur: 10, // 阴影模糊度
            },
            // 地图区域在强调（hover）状态下的样式配置
            emphasis: {
              itemStyle: {
                label: {
                  color: '#222',       // 强调状态下的标签颜色
                  fontWeight: 700,     // 强调状态下的标签字体粗细
                },
                areaColor: '#2D8F8A',  // 强调状态下的地图区域颜色
                borderColor: '#fff',   // 强调状态下的地图区域边界颜色
              },
            },
          },
        ],
        series: [
          {
            name: "alarmScatter",
            type: "scatter",
            symbol: "pin",
            symbolSize: 45,
            coordinateSystem: "geo",
            data: [],
            label: {
              show: true,
              color: "#ffebdc",
              fontSize: 13,
              formatter: "{@value}"
            },
            itemStyle: {
              color: "#1F94E7",
              opacity: 0.9
            }
          }
        ]
      },
    }
  },
  mounted() {
    // 在组件挂载完成后初始化地图
    this.initChart()
  },
  methods: {
    // 初始化地图
    initChart() {
      // 注册江苏省地图
      echarts.registerMap("江苏", this.jsMap)
      // 初始化ECharts实例，并将地图挂载到指定的容器上
      this.chart = echarts.init(this.$refs.mapContainer)
      // 设置散点数据
      this.chartOption.series[0].data = [
          { value: [117.184811, 34.261792, 234], name: "徐州市" },
          { value: [120.864608, 32.016212, 123], name: "南通市" },
          { value: [119.021265, 33.597506, 323], name: "淮安市" }
        ]
      // 设置ECharts的配置项
      this.chart.setOption(this.chartOption)
    }
  },
  beforeDestroy() {
    // 在组件销毁前，释放ECharts实例占用的资源
    if (this.chart) {
      this.chart.dispose()
    }
  },
}
</script>

2，自定义散点背景

（1）假设我们需要将散点标记的背景替换成如下效果，将 symbol 配置属性设置为指定的图片即可。具体有三种方式指定图片。

（2）第 1 种是直接通过提供图片的 url 地址（image://url）进行设置： 
series: [
  {
    name: "alarmScatter",
    type: "scatter",
    symbol: "image:///hangge-web/image/jsmap-pin.png",
    symbolSize: 100,
    coordinateSystem: "geo",
    data: [],
    label: {
      show: true,
      color: "#2C8E89",
      fontSize: 14,
      formatter: "{@value}"
    }
  }
]

（3）第 2 种方法是使用 base64 编码的图片数据：
提示：要将图片转换 base64 编码可以借助一些在线的工具网站来实现（点击访问）
series: [
  {
    name: "alarmScatter",
    type: "scatter",
    symbol: "image://data:image/png;base64,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",
    symbolSize: 100,
    coordinateSystem: "geo",
    data: [],
    label: {
      show: true,
      color: "#2C8E89",
      fontSize: 14,
      formatter: "{@value}"
    }
  }
]

（4）第 3 中方法是如何使用 Vue 开发，我们可以直接通过 require 引入图片使用： 
series: [
  {
    name: "alarmScatter",
    type: "scatter",
    symbol: "image://" + require("@/assets/jsmap-pin.png"),
    symbolSize: 100,
    coordinateSystem: "geo",
    data: [],
    label: {
      show: true,
      color: "#2C8E89",
      fontSize: 14,
      formatter: "{@value}"
    }
  }
]
评论

全部评论（0）

回到顶部