地图POI遮挡？教你三步实现三维标签避让！

在三维地图应用中，三维标签的显示和避让是一个重要的功能，它可以帮助用户更清晰地识别地图上的关键信息。Mapmost SDK for WebGL 提供了强大的标签避让功能，使得地图上的标签可以智能地避开彼此，从而提高地图的可读性和美观性。本文将详细介绍如何使用Mapmost SDK实现三维标签的避让功能。

初始化地图

首先，我们需要初始化一个地图实例：

const modelCenter = [120.74603465203592, 31.30605899929158];

let map = new mapmost.Map({
    container: 'map',
    style: 'your-style',
    center: modelCenter,
    zoom: 18,
    pitch: 59.48725112156901,
    bearing: -54.10626584095007,
    userId: 'your-user-id'
});

添加三维标签

使用addMarker方法 在地图上添加三维标签。具体分为以下三步骤：

• 创建标签元素：使用document.createElement方法创建标签元素。

• 生成标签数据：创建一个标签数据数组，包含每个标签的位置和对应的DOM元素。

• 加载标签：在地图加载完成后，通过addPoints方法将标签数据添加到图层中。

  let tag1 = document.createElement('div'); tag1.className = "tag1"; let tag2 = document.createElement('div'); tag2.className = "tag2";

  let data = [{ element: tag1, position: [120.74603465203592, 31.30605899929158, 20.0] }];

  for (let i = 0; i < 40; i++) { let _dom = tag2.cloneNode(true); _dom.innerText = "三维标签" + i; let item = { element: _dom, position: [120.74613465203592 + 0.00001 * 500 * Math.random() * (Math.random() < 0.5 ? -1 : 1), 31.30605899929158 + 0.00001 * 500 * Math.random() * (Math.random() < 0.5 ? -1 : 1), 10 * Math.random()] }; data.push(item); }

  map.on('load', function () { map.addLayer({ id: 'marker', type: 'model', funcRender: function (gl, matrix) { if (modelLayer) { modelLayer.renderMarker(gl, matrix); } }, callback: function (group, layer) { layer.addPoints({ type: "cube", size: 4, color: 0x123123, opacity: 0.8, data: [{ element: tag1, position: [120.74603465203592, 31.30605899929158, 20.0] }] }); modelLayer = layer; } }); });

此时，地图缩小后三维标签就看起来非常拥挤，并不美观，而且还影响查看信息。

实现标签避让

通过设置 avoidance属性为true，来开启标签避让功能

function openAvoidance() {
    if (!modelLayer && !markers) {
        return
    }
    markers.remove()
    markers = modelLayer.addMarker({
        id: "marker",
        avoidance: true,
        data: data
    })
}

最终实现效果如图所示：

点击这里即可跳转Mapmost官网体验。

我们提供丰富的文档和示例代码，让你的创意得以无限扩展。

更多操作功能，欢迎留言探讨~