wangzhe
/
screen-demo


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
							<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Use correct character set. -->
    <meta charset="utf-8"/>
    <!-- Tell IE to use the latest, best version. -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
    <meta
            name="viewport"
            content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <title>Hello World!</title>
    <link rel="stylesheet" href="../../dist/index.css"/>
    <script src="../../dist/index.js"></script>
    <script src="../build/cesium/Cesium.js"></script>
    <link href="../build/cesium/Widgets/widgets.css" rel="stylesheet">
    <script src="https://unpkg.com/@turf/turf/turf.min.js"></script>
    <style>
        html,
        body,
        #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        .box {
            position: fixed;
            left: 0;
            top: 0;
            z-index: 1000;
        }
    </style>
</head>
<body>
<div id="cesiumContainer"></div>
<div class="box">
    <button id="locationById">通过id定位</button>
    <button id="restore">取消选中</button>
    <button id="getViewMarkers">获取当前可视范围内该聚合实例中非聚合点数据</button>
    <button id="close">取消聚合</button>
    <button id="open">开启聚合</button>
</div>


<script src="../assets/dataJson/cluster.js"></script>

<script>

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

    let option = {
        dataOptions: [
            {
                "icon": "../assets/image/circled.png",
                "iconSize": [
                    40,
                    40
                ],
                child: {
                    "icon": "../assets/image/rect.jpg",
                    "iconSize": [
                        20,
                        20
                    ],
                    "offset": [
                        0,
                        0
                    ],
                },
                "offset": [
                    17,
                    17
                ],
                // "clickIcon": "data:image/png;base64,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",
                "clickBig": true,
                "id": "10001",
                "lnglat": [
                    -88.90153665861239, 50.745409647716
                ]
            },
            {
                "icon": "../assets/image/rect.jpg",
                "iconSize": [
                    34,
                    34
                ],
                "offset": [
                    17,
                    17
                ],
                "clickIcon": "../assets/image/rect2.jpg",
                "clickBig": false,
                "id": "2680550",
                "lnglat": [
                    -88.90153665861239, 51.745409647716
                ]
            }
        ],
        MarkerClusterOptions: {
            "clusterId": "layer-camera",
            "gridSize": 80,
            // "offsetBottom": true,
            "sourceType": "layer-camera",
            // "clickBig": false,
            "maxZoom": 10,
            "zIndex": 60,
            "styles": [
                {
                    "url": "../assets/image/rect2.jpg",
                    "size": [
                        48,
                        48
                    ],
                    "textColor": "white",
                    "offset": [
                        24,
                        24
                    ],
                    "textSize": 14,
                    "textOffset": [
                        0,
                        8
                    ]
                }
            ]
        }
    }

    let cluster = new CTMapOl.cesiumComponent.MarkerCluster(viewer, option) // 圆

    cluster.on('markerclick', e => {
        console.log('markerclick', e)
    })

    document.getElementById('locationById').onclick = e => {
        cluster.locationById({id: 'marker2'})
    }
    document.getElementById('getViewMarkers').onclick = e => {
        console.log('当前可视范围内该聚合实例中非聚合点数据', getViewMarkers())
    }
    document.getElementById('open').onclick = e => {
        cluster.setEnable(true)
        cluster2.setEnable(true)
    }
    document.getElementById('close').onclick = e => {
        cluster.setEnable(false)
        cluster2.setEnable(false)
    }
    document.getElementById('restore').onclick = e => {
        cluster.restore()
    }

</script>
</body>
</html>