renyicun
/
ZhongMianAdmin


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157
							<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            html,
            body {
                width: 100%;
                height: 100%;
                margin: 0;
                overflow: hidden;
            }
            .scene {
                width: 100%;
                height: 100%;
            }
            #toolbar {
                position: absolute;

                left: 10px;
                bottom: 10px;
                z-index: 10000;
            }

            #toolbar2 {
                position: absolute;

                right: 10px;
                bottom: 10px;
                z-index: 10000;
            }

            li {
                list-style: none;
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>
        <div id="scene" class="scene"></div>
        <div id="toolbar"></div>
        <div id="toolbar2">
            <button onclick="click1()">切换</button>
        </div>
        <script src="../dist/sdk/kankan-sdk-deps.js"></script>
        <script src="../dist/sdk/kankan-sdk.js"></script>
        <script>
            localStorage.setItem('token','eyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiIxNTkxNTgxNjA0MSIsImxvZ2luVHlwZSI6InVzZXIiLCJ1c2VyTmFtZSI6IjE1OTE1ODE2MDQxIiwiaWF0IjoxNjcyODg4ODQ1LCJqdGkiOiI2NjViMGJmNi01ZDY2LTQ2MjMtODQyOS05NzFlNDFkMGQ0YWUifQ.w2Xoqoafq-8qUO1oFfw-qxcb3CCh0DEXg3_WFQDtv1Y')
            // var kankan = new KanKan({
            //     dom: '#scene',
            //     view:false,
            //     num: 'KJ-5K1AhMORlta',
            //     server: 'https://4dmanage.autohome.com.cn/',
            //     resource: 'https://vrs3three.autohome.com.cn/fdkankan-qczj-1/',
            //     useStatistics:false
            // })

            var kankan = new KanKan({
                dom: '#scene',
                view:false,
                server: 'https://www.4dkankan.com/',
                num: 'LeNGVvARb7',
                useStatistics:false
            })

            function click1(){
                var floorplan = kankan.Plugins.Floorplan
                if(floorplan.display){
                    floorplan.leave()
                }else {
                    floorplan.enter()
                }
              
            }

            kankan.store.on('floorcad', data => {
                var html = []
                html.push('<ul>')
                data.floors.forEach(floor => {
                    html.push('<li><button data-floor="' + floor.subgroup + '">' + floor.name + '</button></li>')
                })
                html.push('</ul>')
                document.getElementById('toolbar').innerHTML = html.join('')
                document
                    .getElementById('toolbar')
                    .querySelectorAll('button')
                    .forEach(el => {
                        el.addEventListener('click', e => {
                            var floor = el.getAttribute('data-floor')
                            kankan.use('Floorplan').then(floorplan => floorplan.setFloor(floor))
                        })
                    })
            })

            kankan.Camera.on('mode.beforeChange', ({ toMode, floorIndex }) => {
              console.log(floorIndex)
            })

            // 3d转2d
            // KanKan.Utils.convert.pointFrom3DTo2D({x:0,y:0,z:0}, floorplan.player || kankan.Camera.player)
            // 2d转23
            // KanKan.Utils.convert.pointFrom2DTo3D({x:0,y:0}, floorplan.player  || kankan.Camera.player)

            kankan
                .use('Floorplan', {
                    init: function (floorplan) {
                        floorplan.$dom.addEventListener('click', e => {
                            // 飞到附近的点位
                            //let info = floorplan.flyToNearPano({ x: e.clientX, y: e.clientY })
                            //console.log(info)

                            // 获取附近的点位
                            let info = floorplan.getNearPano({ x: e.clientX, y: e.clientY })
                            console.log(info)
                        })
                    },
                    render: function (floorplan, panos, zoom) {
                        let radius = 5 * zoom

                        floorplan.context.clearRect(0, 0, floorplan.$canvas.width, floorplan.$canvas.height)

                        panos.forEach(pano => {
                            var point = floorplan.getScreenPosition(pano.position) // KanKan.Utils.convert.pointFrom3DTo2D(pano.position, floorplan.player)
                            floorplan.context.save()
                            floorplan.context.beginPath()
                            floorplan.context.arc(point.x, point.y, radius, 0, Math.PI * 2, true)
                            floorplan.context.fillStyle = 'blue'
                            floorplan.context.fill()
                            floorplan.context.closePath()

                            floorplan.context.beginPath()
                            floorplan.context.font = '20px 微软雅黑'
                            floorplan.context.fillStyle = '#fff'
                            floorplan.context.textAlign = 'center'
                            floorplan.context.textBaseline = 'middle'
                            floorplan.context.fillText(pano.id, point.x, point.y)
                            floorplan.context.closePath()
                            floorplan.context.restore()
                        })
                    },
                })
                .then(floorplan => {
                    // 进行平面图状态
                    //floorplan.enter()
                })

            // 退出平面图状态
            // kankan.use('Floorplan').then(floorplan=>floorplan.leave())
            // 或
            // kankan.Plugins.Floorplan.leave()

            kankan.render()
        </script>
    </body>
</html>