wangzhe
/
screen-demo


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>三维-海量点标记</title>
    <link rel="stylesheet" href="../../dist/index.css"/>
    <script src="../../dist/index.js"></script>
    <link href="../../cesium/Source/Widgets/widgets.css" rel="stylesheet">
    <script src="../../cesium/Build/Cesium/Cesium.js"></script>
</head>

<body style="margin: 0; padding: 0;">
<div id="map" style="height: 100vh; width: 100vw;"></div>

<div class="input-card">
    <div class="input-item">
        <button class="btn" id="lightPoint">根据id高亮点</button>
    </div>
    <div class="input-item">
        <button class="btn" id="origin" onclick="origin()">还原</button>
    </div>
    <div class="input-item">
        <button class="btn" id="remove">移除</button>
    </div>
    <div class="input-item">
        <button class="btn" id="restore" onclick="restore()">还原状态</button>
    </div>
</div>

</body>

<script>
    function origin() {
        points.repeatSize();
    }

    function lightPoint() {
        points.locationById({id: "12332"});
    }

    function remove() {
        points.remove();
    }

    function restore() {
        points.restore();
    }

    let map = new CTMapOl.cesiumComponent.ThrdimeInitMap({
        domId: 'map',
        center: [116.367223000, 39.913864000],
        zoom: 3
    })
    let viewer = map._viewer;

    var points;

    function initData() {
        let options = {
            viewer,
            clickBig: false,
            clickOption: [
                {
                    "big": false,
                    "icon": "data:image/png;base64,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"
                }
            ],
            height: 50,
            layerId: "DataSourceLayer",
            points:
                [
                    [
                        "116.361901000,39.888600000",
                        "10110101000102",
                        "data:image/png;base64,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",
                        "0.5, 1"
                    ]
                ],
            width: 50,
        }
        points = new CTMapOl.cesiumComponent.Points(options);
        points.addTo({viewer: viewer})
        points.on('click', e => {
            console.log(e)
        })
        points.on('mousemove', e => {
            console.log(e)
        })
        document.getElementById('remove').onclick = () => {
            points.remove();
        }
        document.getElementById('lightPoint').onclick = () => {
            points.locationById({id: "10110101000102"});
        }
    }

    initData();

    function initData2() {
        let options = {
            viewer,
            layerId: 'DataSourceLayer',
            points: [
                ['120.12,31.21', '12332', '../assets/image/rect.jpg', '15,15', 2],
                ['120.12,31.21', 'bb23424b', '../assets/image/rect.jpg', '0,0', 2]
            ],
            // clickOption: [
            //     {big: false, icon: '../assets/image/rect2.jpg'},
            //     {big: false}
            // ],
            width: 30,
            height: 30,
            clickIcon: '../assets/image/rect2.jpg',
            clickBig: false,
            // zoom: 2, // 超过2级就显示
            // maxZoom: 5,
            remark: {
                fontSize: 24,
                color: 'green',
                offset: [0, 0],
            },
            zIndex: 2
        }
        points = new CTMapOl.cesiumComponent.Points(options);
        points.addTo({viewer: viewer})
    }

    // initData2()

</script>


<style>
    /*地图*/
    .mapDIV {

        height: 100vh;
        width: 100vw;
        z-index: 1;
    }

    .add-switch {
        position: absolute;
        right: 30px;
        height: 68px;
        width: 30px;
        bottom: 112px;
        background: #FFFFFF 100%;
        color: #172537;
        border-radius: 4px;
        display: flex;
        flex-direction: column;
        align-items: center;
        z-index: 2;
    }

    .add-s-block {
        height: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        line-height: 20px;
        font-size: 12px;
        margin-bottom: 2px;
        color: #172537;
    }

    .add-zoom {
        width: 20px;
        height: 20px;
        background-image: url('../../dist/assets/image/ar/switch/add-zoom.svg');
        background-size: 100% 100%;
        cursor: pointer;
    }

    .sub-zoom {
        width: 20px;
        height: 20px;
        background-image: url('../../dist/assets/image/ar/switch/sub-zoom.svg');
        background-size: 100% 100%;
        cursor: pointer;
    }

    .add-zoom-out {
        width: 20px;
        height: 20px;
        background-image: url('../../dist/assets/image/ar/switch/add-zoom-out.svg');
        background-size: 100% 100%;
    }

    .sub-zoom-out {
        width: 20px;
        height: 20px;
        background-image: url('../../dist/assets/image/ar/switch/sub-zoom-out.svg');
        background-size: 100% 100%;
    }

    .add-s-block.btn-click {
        cursor: pointer;
    }

    .input-card {
        position: absolute;
        right: 15px;
        bottom: 15px;
        z-index: 999;
    }
</style>

</html>