|
|
@@ -6,6 +6,20 @@
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Document</title>
|
|
|
<style>
|
|
|
+ .select .option::-webkit-scrollbar {
|
|
|
+ width: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select .option::-webkit-scrollbar-track {
|
|
|
+ background: rgba(0, 0, 0, .3);
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select .option::-webkit-scrollbar-thumb {
|
|
|
+ background: rgba(255, 255, 255, .3);
|
|
|
+ border-radius: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
html,
|
|
|
body {
|
|
|
width: 100%;
|
|
|
@@ -19,36 +33,68 @@
|
|
|
height: 100%;
|
|
|
}
|
|
|
|
|
|
- #floors {
|
|
|
+ .map {
|
|
|
+ margin: 0;
|
|
|
pointer-events: all;
|
|
|
position: fixed;
|
|
|
- left: 20px;
|
|
|
+ left: 15px;
|
|
|
z-index: 10;
|
|
|
- top: 50%;
|
|
|
- transform: translateY(-50%);
|
|
|
- background: rgba(0, 0, 0, .6);
|
|
|
+ bottom: 15px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .map div {
|
|
|
+ margin-right: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select .option {
|
|
|
+ background: rgba(0, 0, 0, .3);
|
|
|
border-radius: 6px 6px 6px 6px;
|
|
|
overflow: hidden;
|
|
|
transition: all .3s;
|
|
|
- padding: 5px 13px;
|
|
|
+ padding: 5px 8px;
|
|
|
min-width: 30px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 100%;
|
|
|
+ margin-bottom: 0;
|
|
|
+ max-height: calc(100vh - 80px);
|
|
|
+ overflow-y: auto;
|
|
|
}
|
|
|
|
|
|
- #floors li {
|
|
|
+ .select .value {
|
|
|
+ background: rgba(0, 0, 0, .3);
|
|
|
+ border-radius: 6px 6px 6px 6px;
|
|
|
+ min-width: 30px;
|
|
|
+ padding: 5px 8px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select .place {
|
|
|
+ height: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .select .value,
|
|
|
+ .select .option li {
|
|
|
height: 36px;
|
|
|
cursor: pointer;
|
|
|
- color: hsla(0, 0%, 100%, .7);
|
|
|
font-size: 14px;
|
|
|
line-height: 40px;
|
|
|
max-width: 83vw;
|
|
|
- text-align: center;
|
|
|
+ text-align: left;
|
|
|
position: relative;
|
|
|
color: #fff;
|
|
|
text-overflow: ellipsis;
|
|
|
overflow: hidden;
|
|
|
white-space: nowrap;
|
|
|
}
|
|
|
- .active {
|
|
|
+
|
|
|
+ .select .option li.active {
|
|
|
+ display: none;
|
|
|
color: #00c8af !important;
|
|
|
}
|
|
|
</style>
|
|
|
@@ -56,64 +102,112 @@
|
|
|
|
|
|
<body>
|
|
|
<div id="scene" class="scene"></div>
|
|
|
- <div class="map"></div>
|
|
|
- <ul id="floors" style="display: none;"></ul>
|
|
|
+ <div class="map">
|
|
|
+ <div class="select">
|
|
|
+ <ul class="option" id="floors" style="display: none;"></ul>
|
|
|
+ <div class="place"></div>
|
|
|
+ <div class="value" id="floor"></div>
|
|
|
+ </div>
|
|
|
+ <div class="select">
|
|
|
+ <ul class="option" id="modes" style="display: none;">
|
|
|
+ <li attr-id="panorama">漫游</li>
|
|
|
+ <li attr-id="floorplan">平面图</li>
|
|
|
+ <li attr-id="dollhouse">3D</li>
|
|
|
+ <!-- <li attr-id="panorama">漫游</li>
|
|
|
+ <li attr-id="floorplan">平面图</li>
|
|
|
+ <li attr-id="dollhouse">3D</li> -->
|
|
|
+ </ul>
|
|
|
+ <div class="place"></div>
|
|
|
+ <div class="value" id="mode"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<script>
|
|
|
const params = new URLSearchParams(location.search)
|
|
|
let host = params.get('host') || ''
|
|
|
|
|
|
- const $script1 = document.createElement('script')
|
|
|
- $script1.src = `${host}/sdk/kankan-sdk-deps.js`
|
|
|
- document.documentElement.appendChild($script1)
|
|
|
+ const loadLib = (url) => {
|
|
|
+ const $script = document.createElement('script')
|
|
|
+ $script.src = `${host}${url}`
|
|
|
+ document.documentElement.appendChild($script)
|
|
|
+ return new Promise(resolve => $script.onload = resolve)
|
|
|
+ }
|
|
|
+
|
|
|
+ let kankan;
|
|
|
+ const setCurrentFloor = (id) => {
|
|
|
+ const $old = document.querySelector(`#floors > .active`)
|
|
|
+ if ($old) {
|
|
|
+ $old.classList.remove('active')
|
|
|
+ }
|
|
|
+ const $item = document.querySelector(`#floors > li[attr-id='${id}']`)
|
|
|
+ kankan.Scene.gotoFloor(Number(id))
|
|
|
+ $item && $item.classList.add('active')
|
|
|
|
|
|
- const $script2 = document.createElement('script')
|
|
|
- $script2.src = `${host}/sdk/kankan-sdk.js`
|
|
|
- document.documentElement.appendChild($script2)
|
|
|
+ document.querySelector('#floor').innerHTML = $item.innerHTML
|
|
|
+ }
|
|
|
|
|
|
+ const renderFloors = (floors) => {
|
|
|
+ const $floors = document.querySelector('#floors')
|
|
|
+ if (floors.length <= 1) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
|
|
|
- let loadPackCount = 0
|
|
|
- $script1.onload = () => {
|
|
|
- ++loadPackCount
|
|
|
- init()
|
|
|
+ $floors.parentElement.style.display = 'block'
|
|
|
+ $floors.innerHTML = floors.map(item => `<li attr-id="${item.id}">${item.name}</li>`).join('')
|
|
|
+ $floors.addEventListener('click', ev => {
|
|
|
+ const dom = ev.target
|
|
|
+ const id = dom.getAttribute('attr-id')
|
|
|
+ if (!id) return;
|
|
|
+ setCurrentFloor(id)
|
|
|
+ })
|
|
|
+ $floors.parentElement.addEventListener('mouseenter', () => {
|
|
|
+ $floors.style.display = 'block'
|
|
|
+ })
|
|
|
+ $floors.parentElement.addEventListener('mouseleave', () => {
|
|
|
+ $floors.style.display = 'none'
|
|
|
+ })
|
|
|
}
|
|
|
- $script2.onload = () => {
|
|
|
- ++loadPackCount
|
|
|
- init()
|
|
|
+
|
|
|
+ const setCurrentMode = id => {
|
|
|
+ const $old = document.querySelector(`#modes > .active`)
|
|
|
+ if ($old) {
|
|
|
+ $old.classList.remove('active')
|
|
|
+ }
|
|
|
+ const $item = document.querySelector(`#modes > li[attr-id='${id}']`)
|
|
|
+ kankan.Camera[id]()
|
|
|
+ $item && $item.classList.add('active')
|
|
|
+
|
|
|
+ document.querySelector('#mode').innerHTML = $item.innerHTML
|
|
|
+
|
|
|
}
|
|
|
|
|
|
- const init = async () => {
|
|
|
- if (loadPackCount < 2) return;
|
|
|
- await setTimeout(() => { }, 1000)
|
|
|
- var kankan = new KanKan({
|
|
|
+ const renderModes = () => {
|
|
|
+ const $modes = document.querySelector('#modes')
|
|
|
+
|
|
|
+ $modes.parentElement.style.display = 'block'
|
|
|
+ $modes.addEventListener('click', ev => {
|
|
|
+ const dom = ev.target
|
|
|
+ const id = dom.getAttribute('attr-id')
|
|
|
+ if (!id) return;
|
|
|
+ setCurrentMode(id)
|
|
|
+ })
|
|
|
+ $modes.parentElement.addEventListener('mouseenter', () => {
|
|
|
+ $modes.style.display = 'block'
|
|
|
+ })
|
|
|
+ $modes.parentElement.addEventListener('mouseleave', () => {
|
|
|
+ $modes.style.display = 'none'
|
|
|
+ })
|
|
|
+ setCurrentMode('panorama')
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ const initKankan = () => {
|
|
|
+ kankan = new KanKan({
|
|
|
dom: '#scene',
|
|
|
num: params.get('m'),
|
|
|
server: host,
|
|
|
resource: host + '/oss/'
|
|
|
})
|
|
|
-
|
|
|
- const setCurrentFloor = (id) => {
|
|
|
- const $old = document.querySelector(`#floors > .active`)
|
|
|
- if ($old) {
|
|
|
- $old.classList.remove('active')
|
|
|
- }
|
|
|
- const $item = document.querySelector(`#floors > li[attr-id='${id}']`)
|
|
|
- kankan.Scene.gotoFloor(Number(id))
|
|
|
- $item && $item.classList.add('active')
|
|
|
- }
|
|
|
-
|
|
|
- const renderFloors = (floors) => {
|
|
|
- const $floors = document.querySelector('#floors')
|
|
|
- if (floors.length <= 1) return;
|
|
|
- $floors.style.display = 'block'
|
|
|
- $floors.innerHTML = floors.map(item => `<li attr-id="${item.id}">${item.name}</li>`).join('')
|
|
|
- $floors.addEventListener('click', ev => {
|
|
|
- const dom = ev.target
|
|
|
- const id = dom.getAttribute('attr-id')
|
|
|
- if (!id) return;
|
|
|
- setCurrentFloor(id)
|
|
|
- })
|
|
|
- }
|
|
|
-
|
|
|
+ kankan.render()
|
|
|
|
|
|
kankan.store.on('flooruser', floor => {
|
|
|
renderFloors(floor.floors)
|
|
|
@@ -130,9 +224,16 @@
|
|
|
metadata.surveillances = 0
|
|
|
|
|
|
})
|
|
|
- kankan.render()
|
|
|
+ renderModes()
|
|
|
+ }
|
|
|
|
|
|
+ const init = async () => {
|
|
|
+ await loadLib(`/sdk/kankan-sdk-deps.js`)
|
|
|
+ await loadLib(`/sdk/kankan-sdk.js`)
|
|
|
+ await setTimeout(() => {}, 300)
|
|
|
+ initKankan()
|
|
|
}
|
|
|
+ init()
|
|
|
</script>
|
|
|
|
|
|
<script>
|
