var configuration =  new Hydreigon.Configuration({
            resource_type: 'spin',
            render_type: 'cube-multi',
            resource: {
                tile_path: 'https://hydreigon-dev.cdn.bcebos.com/view3dsdk-dev/assets/panamera_360',
                tile_size: 510,
                tile_file: '${row}_${col}_files',
                cover_image: '${row}_${col}_cover.jpg',
                extension: 'jpg',
                width: 8256,
                height: 5504,
                min_level: 11,
                col_count: 32,
                row_count: 1,
                cover_width: 1032,
                cover_height: 688
            },
        });

        var ak = '您的AccessKey';
        var sk = '您的SecretKey';
        

        // 热点数据
        const hotspots = [
            {
                id: 'hotspot_1',
                name: '热点一',
                // 热点图标坐标，编辑时可通过viewer.toImageCoord([x, y])获取，x,y为屏幕坐标
                pos: [0.5, 0.33],
                // 可选，热点附着的图的row_col信息
                row_col: [0, 0]
            },
            {
                id: 'hotspot_2',
                name: '热点二',
                pos: [0.33, 0.22],
                row_col: [0, 5]
            }
        ];

        var viewer = new Hydreigon.SpinTileViewer(document.getElementById('container'), ak, sk);
        viewer.on('hyd-image-loaded', () => {
            viewer.show(1);
        });
        viewer.on('hyd-startup-end', () => {
            updateHotspots(); // 进场动画结束，展示热点
        });
        viewer.on('hyd-view-spin', () => {
            updateHotspots(); // 视角旋转事件，根据视角控制热点可见性，也可常显
        });
        viewer.init(configuration).then(initHotspots);

        // 添加热点
        function initHotspots() {
            hotspots.forEach(hos => {
                const dom = document.createElement('div');

                // 热点样式自定义，position设置absolute
                dom.classList.add('spin-hotspot-container');

                // 创建HYD热点实例
                const hotspot = new Hydreigon.Hotspot(dom, {
                    id: hos.id, // 必填，热点ID
                    pos: hos.pos, // 热点-图片坐标
                });
                hos.dom = dom;
                dom.onclick = () => { alert(`点击了${hos.name}`)};
                hotspot.appendTo(viewer);
            });
            initHotspotRecList();
        }

        function isSameRowCol(rowCol, compareRowCol) {
            return rowCol[0] === compareRowCol[0] && rowCol[1] === compareRowCol[1];
        }

        function updateHotspots() {
            const rowCol = viewer.getRowCol(false);
            hotspots.forEach(hos => {
                if (isSameRowCol(hos.row_col, rowCol)) {
                    hos.dom.classList.add('visible');
                } else {
                    hos.dom.classList.remove('visible');
                }
            });
        }

        // 隐藏所有热点
        function hideHotspots() {
            hotspots.forEach(h => h.dom.classList.remove('visible'));
        }

        // 初始化热点列表，点击选项，视角旋转到对应热点
        function initHotspotRecList() {
            const parent = document.querySelector('.spin-hotspot-rec-list');
            hotspots.forEach(hos => {
                const item = document.createElement('li');
                item.innerText = hos.name;
                item.onclick = () => {
                    if (!isSameRowCol(viewer.getRowCol(), hos.row_col)) {
                       hideHotspots();
                    }
                    viewer && viewer.spinTo(hos.row_col, false, 30);
                };
                parent.append(item);
            });
            parent.style.display = 'block';
        }