背景
起因是ui設(shè)計(jì)了一版頁(yè)面，其中標(biāo)注類(lèi)似下圖，看到這個(gè)設(shè)計(jì)圖划址，一時(shí)半會(huì)在api沒(méi)有設(shè)置扔嵌，咨詢(xún)maptalks技術(shù)群里大佬后，決定用canvas繪制一個(gè)圖標(biāo)
651af9d5ae7a4622a0bee34af81aea0b_tplv-k3u1fbpfcp-watermark.png
原理
主要是用利用canvas里arcto來(lái)繪制夺颤，利用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://www.reibang.com/p/890dc5736305
