echarts的地图标注自定义图片路径

时间：2024-03-27 17:26:32

记录一下在使用echarts的地图插件过程中遇到的标注icon自定义路径的问题，

要实现的效果在地图上添加如下图红色圈出标注icon

echarts的地图标注自定义图片路径

echarts的series方法中有一个symbol属性可以引入图片路径，以下列出三种方法：

第一种：链接引入

series: [
          {
            type: "scatter",
            coordinateSystem: "geo",
            data: this.convertData(this.data),
            showAllSymbol: true,
            symbolSize: 20,
            symbol:"image://http:...",
            symbolRotate: 35,
          },
        ]

在symbol中直接引入图片的路径，注意格式，要加image://

symbolRotate: 35,表示旋转的角度

第二种：base64格式引入

series: [
          {
            type: "scatter",
            coordinateSystem: "geo",
            data: this.convertData(this.data),
            showAllSymbol: true,
            symbolSize: 20,
            symbol:
              "image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAMAAABFjsb+AAAArlBMVEUAAACqqgD//wC/vwD//wDV1Sv//yvq6hX/6hX/6xTt7RL/7ST27Rr27hr37h737x338Bv48Br48B747R337x337x337x338Bz38Bz47hv48Bv27xv27x347x328B358Bz28Bz58Bz37hv58B337x358R337x337xz47xv27xv47xz37xv37xz58B358B358B348Bv58Bv38Bz48Rz38Bz38B337xv37xv48Bz////Eer9hAAAAOHRSTlMAAwMEBAYGDAwNDg46Ozw+Q0RFR2BhYmRlaGhyc3N0dnd3e3t8fH2Ajo+QocvLzPDy8vf3+Pn8/ZxQyHYAAAABYktHRDnXAJVAAAAAnElEQVQY03WQxxKCUBAExywGzGLAiNqYEPP7/y/zQIFaYh+ntnZ3WpIkyx64C3dgW4rJtzwils1cFJUd3jglSSqO+GRYkNQB8IPwEh59gLZUXQH7mzHGmOse8CpqALu7ibhtAVt9IDAxB6CnKRAm2QlwtQGeSfYA1pr8zI1T99V/7tZS/4t7nM056aFs96tvN/PHS6q/yPOcWez5Bam3MAvM/3lWAAAAAElFTkSuQmCC",
            symbolRotate: 35,
          },
        ]

base64格式引入的话，其中需要注意的问题是是base64代码串不能换行，要显示在一行，下图错误展示

echarts的地图标注自定义图片路径

如果是png格式的图片可以在上网进行转换解析出图片的base64格式，如下图

echarts的地图标注自定义图片路径

这样会自动转换出base64码，直接在symbol中引入即可。

第三种：svg图引入

这是最常用的一种，也是官网用的方法，svg图用notepad++软件或者记事本打开，将d属性值复制出来前面加path://即可

series: [
          {
            type: "scatter",
            coordinateSystem: "geo",
            data: this.convertData(this.data),
            showAllSymbol: true,
            symbolSize: 20,
            symbol:"path://M512 298.666667c-117.76 0-213.333333 95.573333-213.333333 213.333333s95.573333 213.333333 213.333333 213.333333 213.333333-95.573333 213.333333-213.333333-95.573333-213.333333-213.333333-213.333333z m0-213.333334C276.48 85.333333 85.333333 276.48 85.333333 512s191.146667 426.666667 426.666667 426.666667 426.666667-191.146667 426.666667-426.666667S747.52 85.333333 512 85.333333z m0 768c-188.586667 0-341.333333-152.746667-341.333333-341.333333s152.746667-341.333333 341.333333-341.333333 341.333333 152.746667 341.333333 341.333333-152.746667 341.333333-341.333333 341.333333z",
            symbolRotate: 35,
        ]

这样标注就显示在了地图上面，另外记得设置出需要标注的地点和数据，如代码中的data。

如果用notepad++软件或者记事本打开的svg图片中没有d属性，而是含有base64的话不要想着用第二种方法，因为可能会造成标注icon无法显示，只显示出方块背景没有icon，这时让ui给出png格式图片，自己在网上转换一下再用第二种即可。

相关文章