You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
220 lines
6.4 KiB
220 lines
6.4 KiB
4 months ago
|
<!DOCTYPE html>
|
||
|
|
<html lang="en">
|
||
|
|
<head>
|
||
|
|
<meta charset="UTF-8" />
|
||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
|
|
<style>
|
||
|
|
#map {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
}
|
||
|
|
.mask-wrapper {
|
||
|
|
position: fixed;
|
||
|
|
background: rgba(0, 0, 0, 0.5);
|
||
|
|
z-index: 100001;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
display: none;
|
||
|
|
}
|
||
|
|
.mask-box {
|
||
|
|
position: relative;
|
||
|
|
}
|
||
|
|
.mask-content {
|
||
|
|
border: 1px solid #efefef;
|
||
|
|
width: 80%;
|
||
|
|
margin: auto;
|
||
|
|
margin-top: 150px;
|
||
|
|
background-color: #fff;
|
||
|
|
background-clip: padding-box;
|
||
|
|
border: 1px solid #999;
|
||
|
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
||
|
|
border-radius: 6px;
|
||
|
|
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
|
||
|
|
outline: 0;
|
||
|
|
overflow: hidden;
|
||
|
|
transform: rotateX(90deg);
|
||
|
|
transition: transform 0.3s ease-out;
|
||
|
|
}
|
||
|
|
.mask-header {
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
padding: 15px;
|
||
|
|
border-bottom: 1px solid #e5e55e;
|
||
|
|
font-size: 16px;
|
||
|
|
font-weight: bold;
|
||
|
|
min-height: 20px;
|
||
|
|
}
|
||
|
|
.close {
|
||
|
|
width: 20px;
|
||
|
|
}
|
||
|
|
.mask-body {
|
||
|
|
position: relative;
|
||
|
|
padding: 15px;
|
||
|
|
max-height: 350px;
|
||
|
|
overflow-y: auto;
|
||
|
|
overflow-x: auto;
|
||
|
|
}
|
||
|
|
.mask-foot {
|
||
|
|
padding: 15px;
|
||
|
|
text-align: right;
|
||
|
|
border-top: 1px solid #e5e5e5;
|
||
|
|
}
|
||
|
|
.show-am {
|
||
|
|
transform: rotateX(0);
|
||
|
|
}
|
||
|
|
|
||
|
|
.table-item {
|
||
|
|
font-size: 16px;
|
||
|
|
line-height: 22px;
|
||
|
|
text-shadow: 0px 0px 5px rgba(102, 100, 100, 0.575);
|
||
|
|
}
|
||
|
|
.table-item span:nth-child(1) {
|
||
|
|
color: grey;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<link
|
||
|
|
rel="stylesheet"
|
||
|
|
href="http://apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css"
|
||
|
|
/>
|
||
|
|
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
|
||
|
|
<script src="http://apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
|
||
|
|
<link rel="stylesheet" href="jqueryui/style.css" />
|
||
|
|
<script src="http://10.248.12.27:8003/CooGL.js"></script>
|
||
|
|
<!-- <script src="http://192.168.10.202:30010/CooGL/version/v1.3/CooGL.js"></script> -->
|
||
|
|
<script src="./data.js"></script>
|
||
|
|
<script type="module">
|
||
|
|
class Maskdialog {
|
||
|
|
constructor(config = {}) {
|
||
|
|
this.cancle = config.cancle || null
|
||
|
|
this.title = config.title || ''
|
||
|
|
this.width = config.width || '30%'
|
||
|
|
this.setProps()
|
||
|
|
this.init()
|
||
|
|
this.renderTitle()
|
||
|
|
this.handle()
|
||
|
|
}
|
||
|
|
setProps() {
|
||
|
|
this.mask = document.querySelector('.mask-wrapper')
|
||
|
|
this.diaglogContent = document.querySelector('.mask-content')
|
||
|
|
this.closeIcon = document.querySelector('.mask-header>.close')
|
||
|
|
this.maskBody = document.querySelector('.mask-body')
|
||
|
|
this.titleNode = document.querySelector('.mask-header-title')
|
||
|
|
this.tableWrapper = document.querySelector('.mask-body-content')
|
||
|
|
}
|
||
|
|
init() {
|
||
|
|
this.diaglogContent.style.width = this.width
|
||
|
|
}
|
||
|
|
show() {
|
||
|
|
this.mask.style.display = 'block'
|
||
|
|
setTimeout(() => {
|
||
|
|
this.diaglogContent.style.transform = 'rotateX(0)'
|
||
|
|
}, 100)
|
||
|
|
}
|
||
|
|
hidden() {
|
||
|
|
this.mask.style.display = 'none'
|
||
|
|
setTimeout(() => {
|
||
|
|
this.diaglogContent.style.transform = 'rotateX(90deg)'
|
||
|
|
}, 100)
|
||
|
|
this.tableWrapper.innerHTML = ''
|
||
|
|
}
|
||
|
|
handle() {
|
||
|
|
this.mask.addEventListener(
|
||
|
|
'click',
|
||
|
|
(event) => {
|
||
|
|
event.stopPropagation()
|
||
|
|
if (
|
||
|
|
event.target.classList.contains('.mask-wrapper') ||
|
||
|
|
event.target.classList.contains('.mask-box')
|
||
|
|
) {
|
||
|
|
this.hidden()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
false
|
||
|
|
)
|
||
|
|
this.closeIcon.addEventListener('click', () => {
|
||
|
|
this.hidden()
|
||
|
|
})
|
||
|
|
}
|
||
|
|
render(domTemp) {
|
||
|
|
if (domTemp instanceof HTMLElement) {
|
||
|
|
domTemp = this.domTostring(domTemp)
|
||
|
|
}
|
||
|
|
this.maskBody.innerHTML = domTemp
|
||
|
|
}
|
||
|
|
domTostring(node) {
|
||
|
|
let temNode = document.createElement('div')
|
||
|
|
let clone_node = node.cloneNode(true)
|
||
|
|
temNode.appendChild(clone_node)
|
||
|
|
let str = temNode.innerHTML
|
||
|
|
temNode = clone_node = null
|
||
|
|
return str
|
||
|
|
}
|
||
|
|
renderTitle() {
|
||
|
|
this.titleNode.innerHTML = this.title
|
||
|
|
}
|
||
|
|
}
|
||
|
|
//现场
|
||
|
|
CooGL.CooServer.address = 'http://10.248.12.28:8000'
|
||
|
|
CooGL.CooServer.defaultAccessToken =
|
||
|
|
'ddf0c147-706d-4ba1-a188-b04ef92633ce'
|
||
|
|
|
||
|
|
//kelan
|
||
|
|
// CooGL.CooServer.address = 'http://192.168.10.202:8099'
|
||
|
|
// CooGL.CooServer.defaultAccessToken =
|
||
|
|
// '7e094d6c-ee42-467b-8fbf-73ca53eaa2f6'
|
||
|
|
|
||
|
|
window.map = new CooGL.MapViewer('map', {
|
||
|
|
demUrl: false,
|
||
|
|
fps: false,
|
||
|
|
})
|
||
|
|
const guideboard = map.addLayer(
|
||
|
|
CooGL.Layer.from3dtilesModel({ url: './road/tileset.json' })
|
||
|
|
)
|
||
|
|
map.zoomTo(guideboard)
|
||
|
|
|
||
|
|
map.event.click((e) => {
|
||
|
|
const name = e.graphic.getProperty('name')
|
||
|
|
console.warn(name)
|
||
|
|
let mask = new Maskdialog({
|
||
|
|
title: name,
|
||
|
|
})
|
||
|
|
const tableData = data.find((item) => item[1] === name)
|
||
|
|
let content = '<div>'
|
||
|
|
dataLabel.forEach((item, key) => {
|
||
|
|
if (!item || !tableData[key]) return
|
||
|
|
content += `<div class="table-item"><span>${item}：</span><span>${tableData[key]}</span></div>`
|
||
|
|
})
|
||
|
|
content += '</div>'
|
||
|
|
mask.render(content) //需渲染的dom 支持字符串模板和真实dom节点
|
||
|
|
mask.show()
|
||
|
|
})
|
||
|
|
const layer = map.addLayer(
|
||
|
|
CooGL.CooServerResource.fromAssertId('青岛公路_20231024'),
|
||
|
|
{
|
||
|
|
liftUp: -5,
|
||
|
|
}
|
||
|
|
)
|
||
|
|
window.layer = layer
|
||
|
|
// map.flyTo(layer)
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="map"></div>
|
||
|
|
<div class="mask-wrapper">
|
||
|
|
<div class="mask-box">
|
||
|
|
<div class="mask-content">
|
||
|
|
<div class="mask-header">
|
||
|
|
<span class="mask-header-title"></span>
|
||
|
|
<button class="close">×</button>
|
||
|
|
</div>
|
||
|
|
<div class="mask-body">
|
||
|
|
<div class="mask-body-content" id="table-wrapper"></div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|