地图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官网体验。

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

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

原文地址：https://blog.csdn.net/Mapmost/article/details/142957679

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！