maptalks使用canvas自定义图标

背景

起因是ui设计了一版页面，其中标注类似下图，看到这个设计图，一时半会在api没有设置，咨询maptalks技术群里大佬后，决定用canvas绘制一个图标

651af9d5ae7a4622a0bee34af81aea0b_tplv-k3u1fbpfcp-watermark.png

原理

主要是用利用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);

效果

基本达到了设计图预期

2d02429b3ee14d90b9a919bbf04be8fb_tplv-k3u1fbpfcp-watermark.png

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