vue3 天地图怎样添加文字

在Vue3中，天地图（Tangram）是一款基于WebGL的地图引擎，它提供了一个交互式的地图组件。如果你想在天地图上添加文字，可以按照以下步骤操作：

1. 首先，在HTML中引入天地图的库和必要的CSS样式：

<script src="https://unpkg.com/tangram/dist/tangram.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/tangram/dist/tangram.css">

2. 使用`tangram.Map`创建地图实例，并设置视口（viewport）和图层：

<template>
  <div id="map-container"></div>
</template>

<script>
import { Map } from 'tangram';

export default {
  mounted() {
    const map = new Map({
      container: 'map-container',
      style: 'path://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', // 示例：使用OSM底图
      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    });

    // 添加文字标记的逻辑
    addTextMarker(map);
  },
  
  methods: {
    addTextMarker(map) {
      const markerLocation = [51.3904, 116.4074]; // 北京中心坐标，可根据需要替换
      const markerOptions = {
        latitude: markerLocation[0],
        longitude: markerLocation[1],
        anchor: [0.5, -0.5], // 文字标记默认居中显示
        text: 'Hello, Vue3!', // 文字内容
        font: 'Arial', // 字体
        size: 18, // 字体大小
        fill: { color: 'black' }, // 文字颜色
      };

      map.addLayer('text-layer', {
        entities: [
          {
            type: 'symbol',
            data: markerOptions,
          }
        ]
      });
    }
  }
}
</script>

在这个例子中，我们创建了一个`text-layer`图层，并通过JavaScript动态添加了一个文本标记到指定的位置。