跳到主要内容
版本：9.14.1-beta

三维标签避让

可实现三维标签不重叠的效果。

show
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>add_tags</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.14.1-beta/mapmost-webgl-min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        #map {
            height: 100vh;
            width: 100vw;
        }

        .button-wrapper {
            position: absolute;
            top: 20px;
            left: 20px;
        }

        .tag3 {
            color: rgb(255, 85, 104);
            font-weight: 600;
            background-color: #66b4f5;
            width: 34px;
            height: 54px;
        }

        .tag1 {
            width: 34px;
            height: 54px;
            background-repeat: no-repeat;
            background-size: 100% 100%;
            background-image: url("../example_data/images/pin_security.png");
        }

        .tag2 {
            color: #fff;
            background: #155b72;
            padding: 4px 6px;
        }
    </style>
</head>

<body>
<div id="map"></div>
<div class="button-wrapper">
    <button onclick="addTag()">加载标签</button>
    <button onclick="openAvoidance()">开启避让</button>
    <button onclick="closeAvoidance()">关闭避让</button>
    <button onclick="removeTag()">移除标签</button>
</div>
<script>
    let map = new mapmost.Map({
        container: 'map',  
        style: "<your style url>", 
        center: [120.74603465203592, 31.30605899929158], 
        zoom: 18, 
        pitch: 59.48725112156901, 
        bearing: -54.10626584095007, 
        userId: '***', // 授权码
    });


    let modelLayer;
    let markers;

    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]
    }, {
        element: tag1,
        position: [120.74609465203592, 31.30605899929158, 20.0]
    }, {
        element: tag1,
        position: [120.74615465203592, 31.30605899929158, 20.0]
    }];

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

    map.on('load', function () {
        let options = {
            id: 'model_id',
            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: [{
                        name: 1,
                        coordinate: [120.74603465203592, 31.30605899929158, 20.0]
                    }, {
                        name: 2,
                        coordinate: [120.74609465203592, 31.30605899929158, 20.0]
                    }, {
                        name: 3,
                        coordinate: [120.74615465203592, 31.30605899929158, 20.0]
                    }]
                })
                modelLayer = layer;
            }
        };
        map.addLayer(options);

    })

    function addTag() {
        if (!modelLayer) {
            return
        }
        markers = modelLayer.addMarker({
            id: "marker",
            avoidance: false,
            data: data
        })
    }

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

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

    function removeTag() {
        if (modelLayer) {
            markers.remove()
        }
    }
</script>
</body>

</html>