Skip to main content

3DTiles dynamic singleton

Dynamically create the outer box model of the 3DTiles singleton area to achieve the singleton effect of 3DTiles in the outer bounding box.

show
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>3DTiles singleton</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }

        #btn-group {
            position: absolute;
            top: 20px;
            left: 20px;
        }
    </style>
    <script src="https://delivery.mapmost.com/cdn/sdk/webgl/v9.16.0/mapmost-webgl-min.js"></script>

</head>

<body>
    <div id="map"></div>
    <div id="btn-group">
        <button class="but" onclick="ClassifyAnalysis()">Singleization</button>
        <button class="but" onclick="clearFun()">Remove</button>
    </div>
    <script>

        var map = new mapmost.Map({
            container: 'map', 
            style: "<your style url>",
            center: [120.74449559193792, 31.30775326748954],
            zoom: 15,
            pitch: 60,
            userId: "***", // Authorization code
            env3D:{
                exposure: 1.7,
            }
        });

        map.on('load', function () {

            map.addLayer({
                id: 'tile-3d-layer',
                type: "3DTiles",
                data: '<your 3dtiles url>'
            })

            let options = {
                id: 'model_id',
                type: 'model',
                center: [120.74603465203592, 31.30605899929158, 10],
                callback: function (group, layer) {
                    modelGroup = group;
                    modelLayer = layer;
                }
            };
            map.addLayer(options);
        })

        let analysis
        function ClassifyAnalysis() {
            let coordinate = [
                [120.7440396705365, 31.30775759163872],
                [120.74733413440896, 31.308306621332633],
                [120.74646526481644, 31.305344916185064],
                [120.74501714882791, 31.305043327408995],
                [120.743795300964, 31.306288341506914],
            ];
            let option = {
                coordinate: coordinate,
                color: "#ff0000",
                opacity: 0.5,
                baseHeight: 25,
                stretchHeight: 35,
            };

            analysis = new mapmost.ClassifyAnalysis(map);
            analysis.analyse(option);
        }

        function clearFun() {
            analysis.clear();
        }

    </script>
</body>

</html>