Appearance
圆形
文本标记组件
基础示例
vue
<template>
<tlbs-map
ref="map"
api-key="OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77"
:center="center"
:zoom="zoom"
:control="control"
@click="onClick"
>
<tlbs-multi-label
:geometries="geometries"
:styles="styles"
:options="options"
/>
</tlbs-map>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue-demi';
export default defineComponent({
name: 'LabelDemo',
setup() {
const map = ref(null);
const center = ref({ lat: 39.91799, lng: 116.397027 });
const zoom = ref(15);
const onClick = (e: Event) => {
console.log(e);
};
return {
center,
zoom,
onClick,
control: {
scale: {},
zoom: {
position: 'topRight',
},
},
map,
geometries: [
{ id: 'label_1', styleId: 'label', content: '1', position: { lat: 39.91199, lng: 116.397027 } },
{ id: 'label_2', styleId: 'label', content: '2', position: { lat: 39.91319, lng: 116.397027 } },
{ id: 'label_3', styleId: 'label', content: '3', position: { lat: 39.91749, lng: 116.397027 } },
],
styles: {
label: {
color: '#ff', // 颜色属性
size: 14, // 文字大小属性
offset: { x: 0, y: 0 }, // 文字偏移属性单位为像素
angle: 0, // 文字旋转属性
width: 20, // width 和 height 如果不填的话,背景是看不到的
height: 20,
backgroundColor: 'rgb(255, 99, 71)',
borderWidth: 2,
borderColor: 'rgb(255, 99, 71)',
borderRadius: 12,
alignment: 'center', // 文字水平对齐属性
verticalAlignment: 'middle', // 文字垂直对齐属性
},
},
options: {
collisionOptions: {
sameSource: true, // 是否开启图层内碰撞,优先级按rank进行碰撞
},
},
};
},
});
</script>
props
名称 | 类型 | 说明 |
---|---|---|
id | String | 图层 id |
styles | { [key: string]: TMap.MultiLabelStyleHash } | 文本标记的相关样式 |
geometries | TMap.LabelGeometry[] | 文本标记数据数组。 |
options | TMap.MultiLabelOptions | 除了上述属性的其他配置参数,点击下面官网文档链接查看 |
参考官网文档 https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocVector#13
事件
事件支持列表详细文档见官网 https://lbs.qq.com/webApi/javascriptGL/glDoc/glDocVector#13
组件实例属性
名称 | 类型 | 说明 |
---|---|---|
label | TMap.MultiLabel | 文本标记实例。 |