gisthreemap
Version:
基于webGL的三维api
71 lines (57 loc) • 1.9 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>gisapi</title>
<script src="./HeatMap3D.js"></script>
<script src="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Cesium.js"></script>
<link href="https://cesium.com/downloads/cesiumjs/releases/1.95/Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<script src="./dat.gui.min.js"></script>
<!-- <script src='https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js'></script>
<link href='https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.css' rel='stylesheet' /> -->
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
#Threemapview {
height: calc(100% + 30px);
position: relative;
}
#app {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.drawBox span,
.mapTool span {
display: inline-block;
margin: 3px;
padding: 3px 5px;
border: 1px solid #333;
background-color: #eee;
border-radius: 3px;
cursor: pointer;
}
.icc {}
</style>
</head>
<body>
<div id="app">
<div class="drawBox">
<span v-for="item in EventTools" @click="EventTool(item.type)">{{item.label}}</span>
</div>
<video id="videoBox" style="display: none" muted autoplay loop crossorigin controls>
<source src="/file/cs.mp4" type="video/mp4">
</video>
</div>
<div id="Threemapview"></div>
<!-- <div id="mask" onclick="alert(1111)" style="display:none;width: 100%;height: 100%;position: absolute;left: 0;top: 0;background: rgba(255, 0, 0, 0.5);"></div> -->
</body>
</html>