TextSymbol的backgroundColor属性:标签边界框的背景颜色,仅支持 MapImageLayer。
本文章使用SimpleMarkerSymbol的path属性实现文字的背景色。给path赋值一个长方形的svg路径,根据文字内容设置宽度和高度。
效果图:
代码:
/**
* 创建带背景框标注的点要素图层(将map和view放在window里)
* @param {Object} options
* --@param {String} id GraphicsLayer的id
* --@param {String} title GraphicsLayer的title
* --@param {Array} data 空间数据
* --@param {Object} attr 属性说明
* ----@param {String} x 坐标x值的属性名
* ----@param {String} y 坐标y值的属性名
* ----@param {String} name 名称标注的属性名
*/
function bgLabelPoint(options) {
if (window.map.findLayerById(options.id)) {
window.map.findLayerById(options.id).removeAll()
} else {
var layer = new GraphicsLayer({
id: options.id,
title: options.title
})
window.map.add(layer)
}
options.data.forEach((item) => {
if (item[options.attr.x]) {
// geometry
var point = {
type: 'point',
x: parseFloat(item[options.attr.x]),
y: parseFloat(item[options.attr.y]),
spatialReference: window.view.spatialReference
}
// 计算标注长度
var namelen = 0
var nameL = item[options.attr.name].replace(/\s+/g, '')
for (let m = 0; m < nameL.length; m++) {
let charCode = nameL.charCodeAt(m)
if (charCode > 255) {
namelen += 2
} else {
namelen++
}
}
var width = namelen * 0.5 * fontsize + 13
var height = fontsize * 1.7
var xoffset = width / 2 + 6
// 文字符号
var textSymbol = {
type: 'text',
color: '#fff',
text: item[options.attr.name],
xoffset: xoffset,
yoffset: -4,
font: {
size: fontsize,
weight: 'bold'
}
}
// 背景符号
var path = `M0 0L0 ${height}L${width} ${height}L${width} 0L0 0`
var backgroundSymbol = {
type: 'simple-marker',
path: path,
color: [46, 130, 255, 0.8], //蓝色
xoffset: xoffset,
size: Math.max(width, height) > 191 ? 191 : Math.max(width, height),
outline: {
color: [0, 78, 253, 1], //蓝色
width: 1
}
}
// 标注
var graphicB = new Graphic({
geometry: point,
symbol: backgroundSymbol,
attributes: item
})
var graphicT = new Graphic({
geometry: point,
symbol: textSymbol,
attributes: item
})
window.map.findLayerById(options.id).add(graphicB)
window.map.findLayerById(options.id).add(graphicT)
}
})
}