背景

起因是ui設(shè)計(jì)了一版頁(yè)面，其中標(biāo)注類似下圖，看到這個(gè)設(shè)計(jì)圖，一時(shí)半會(huì)在api沒有設(shè)置，咨詢maptalks技術(shù)群里大佬后，決定用canvas繪制一個(gè)圖標(biāo)

651af9d5ae7a4622a0bee34af81aea0b_tplv-k3u1fbpfcp-watermark.png

原理

主要是用利用canvas里arcto來繪制，利用measureText檢測(cè)文本繪制所需要長(zhǎng)度，測(cè)量時(shí)需要設(shè)置字體大小，高度則是經(jīng)驗(yàn)值，繪制好以后返回圖片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);

效果

基本達(dá)到了設(shè)計(jì)圖預(yù)期

2d02429b3ee14d90b9a919bbf04be8fb_tplv-k3u1fbpfcp-watermark.png

https://juejin.cn/post/6990910784523993118
http://m.itdecent.cn/p/890dc5736305