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

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

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

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/7ST27Rr27hr37h737x338Bv48Br48B747R337x337x337x338Bz38Bz47hv48Bv27xv27x347x328B358Bz28Bz58Bz37hv58B337x358R337x337xz47xv27xv47xz37xv37xz58B358B358B348Bv58Bv38Bz48Rz38Bz38B337xv37xv48BzEer9hAAAAOHRSTlMAAwMEBAYGDAwNDg46Ozw+Q0RFR2BhYmRlaGhyc3N0dnd3e3t8fH2Ajo+QocvLzPDy8vf3+Pn8/ZxQyHYAAAABYktHRDnXAJVAAAAAnElEQVQY03WQxxKCUBAExywGzGLAiNqYEPP7/y/zQIFaYh+ntnZ3WpIkyx64C3dgW4rJtzwils1cFJUd3jglSSqO+GRYkNQB8IPwEh59gLZUXQH7mzHGmOse8CpqALu7ibhtAVt9IDAxB6CnKRAm2QlwtQGeSfYA1pr8zI1T99V/7tZS/4t7nM056aFs96tvN/PHS6q/yPOcWez5Bam3MAvM/3lWAAAAAElFTkSuQmCC",symbolRotate: 35,},]

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

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

这样会自动转换出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格式图片，自己在网上转换一下再用第二种即可。

echarts的地图标注自定义图片路径相关推荐

百度地图标注自定义标注图片【JS】
百度地图标注自定义标注图片 //设置场地标记点for (var i = 0; i < ground_info.length; i++) {var img_url = '/Static/Oa/im ...
tomcat 设定自定义图片路径
1.问题平常图片路径都是在项目目录下存放,都是ip地址+端口号+项目名+图片路径,因为项目需要要把图片从tomcat中分离出来,并且设置可以通过自定义地址访问自定义图片路径. 2.解决在 tomc ...
echarts r 地图_pyecharts自定义地图
echarts的地图包经纬度数值被压缩,暂时没找到还原的工具,所以采用finebi的地图包. 2.编辑地图文件: 打开json格式的地图文件 image image image image 4.对编辑 ...
echarts贵州地图展示自定义贵安新区
要求和预期结果: 实现贵州地市地图效果,并且鼠标过去有数据展示,贵安新区数据无法展示,弄个自定义地图展示出来相关文件准备,加载地图和部分相关组件.echarts.min.js 和 guizhou.j ...
echarts 中国地图标注所在点
达到的效果: 1.本身是个中国地图' 2.直接通过经纬度标注 3.标注点可以是其他样子(比如:五角星) 4.标注点具有提示框并且鼠标可以进入 5.提示框里的链接可点击(可以添加为链接事件): 所需要技 ...
echarts中自定义图片的矢量路径设置
echarts中自定义图片的矢量路径设置在echarts象形柱图中要使用自定义的图片有三种格式,如下图: 前面两种方式我们项目中也常用到,第三种是矢量路径,如何获取这个矢量路径呢,方法如下: 第一步 ...
echarts地图中散点图的symbol使用自定义图片
series: [{type: 'scatter',geoIndex: 0,coordinateSystem: 'geo',hoverAnimation: false,symbolSize: 78,s ...
H5新特性百度地图SDK--API引入、地图控件、地理编码与逆地理编码、地图标注、路径规划（基于2.0）
一.API基本使用 1.1 大致流程打开,百度地图官网登录或者注册一个百度账号,并完成相关验证登陆并申请成为开发者在百度地图开发平台的首页选择控制台,在控制台中创建应用创建好应用以后就能在控 ...
echarts实现中国地图和自定义形状的词云图
目录 1.中国地图 2.词云图 3.资源源码用echarts实现了中国地图上的发票流入流出图和小鸟形状的词云图. 先看下效果中国地图(有动态的流入流出箭头和悬浮框提示信息): 词云图(小鸟形状,也 ...

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

echarts的地图标注自定义图片路径相关推荐

最新文章

热门文章