maptalks使用canvas自定义图标
2023-02-14 本文已影响0人
polong
背景
起因是ui设计了一版页面,其中标注类似下图,看到这个设计图,一时半会在api没有设置,咨询maptalks技术群里大佬后,决定用canvas绘制一个图标

原理
主要是用利用canvas里arcto来绘制,利用measureText检测文本绘制所需要长度,测量时需要设置字体大小,高度则是经验值,绘制好以后返回图片base64和宽高就行了
var marker = new maptalks.Marker(
item,
{ properties: {
name: name
},
'symbol' : {
'markerFile' : img,
'markerWidth' : width,
'markerHeight' : height,
'markerDx' : 0,
'markerDy' : 0,
'markerOpacity': 1,
}
}
).addTo(layer);
效果
基本达到了设计图预期

https://juejin.cn/post/6990910784523993118
https://www.jianshu.com/p/890dc5736305