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.
219 lines
6.4 KiB
219 lines
6.4 KiB
<!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>
|
|
|