<template>
|
<div class="main_body">
|
<el-container style="height: 100%">
|
<el-aside width="300px" style="background-color: rgb(238, 241, 246)">
|
<el-date-picker
|
v-model="value1"
|
style="margin-left: 10px; width: 280px; height: 40px"
|
type="date"
|
placeholder="选择日期"
|
/>
|
</el-aside>
|
<el-main>
|
<div id="map_container" style="width:100%; height:100%;" />
|
</el-main>
|
</el-container>
|
</div>
|
</template>
|
|
<script>
|
|
import * as THREE from 'three'
|
// import * as mapvgl from 'vue-mapvgl'
|
import { mapvglThree } from 'vue-mapvgl/src/lib'
|
|
export default {
|
data() {
|
return {
|
value1: ''
|
}
|
},
|
mounted() {
|
/* global BMapGL */
|
/* global mapvgl */
|
var map = new window.BMapGL.Map('map_container')
|
map.setTilt(47)
|
var projection = mapvgl.MercatorProjection
|
console.log(projection)
|
var point = projection.convertLL2MC(new BMapGL.Point(116.403928, 39.914972))
|
var point2 = projection.convertLL2MC(new BMapGL.Point(116.493759, 39.914972))
|
|
map.centerAndZoom(new BMapGL.Point(116.403928, 39.914972), 13)
|
|
map.enableKeyboard()
|
map.enableScrollWheelZoom()
|
map.enableInertialDragging()
|
map.enableContinuousZoom()
|
|
var view = new mapvgl.View({
|
map: map
|
})
|
var threeLayer = new mapvglThree.ThreeLayer()
|
view.addLayer(threeLayer)
|
for (let i = 0; i < 10; i++) {
|
var geometry = new THREE.BoxGeometry(50, 50, 50)
|
var material = new THREE.MeshBasicMaterial({ color: 'green', flatShading: true, wireframe: false })
|
var cube = new THREE.Mesh(geometry, material)
|
cube.position.x = point.lng + (Math.random() * 5) * 100
|
cube.position.y = point.lat + (Math.random() * 5) * 100
|
cube.position.z = 10 + (Math.random() * 5) * 100
|
threeLayer.add(cube)
|
}
|
},
|
methods: {
|
handleOpen(key, keyPath) {
|
console.log(key, keyPath)
|
},
|
handleClose(key, keyPath) {
|
console.log(key, keyPath)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.main_body {
|
border: 0;
|
margin: 0;
|
width: 100%;
|
height: 100%;
|
position: relative;
|
}
|
.el-header, .el-footer {
|
background-color: #B3C0D1;
|
color: #333;
|
text-align: center;
|
line-height: 60px;
|
}
|
|
.el-aside {
|
background-color: #D3DCE6;
|
color: #333;
|
text-align: left;
|
line-height: 52px;
|
}
|
|
/deep/ .el-input__inner {
|
height:40px;
|
}
|
/deep/ .el-picker-panel__body {
|
width: 280px;
|
}
|
el-main {
|
padding: 0;
|
}
|
|
body > .el-container {
|
margin-bottom: 40px;
|
}
|
|
.el-container:nth-child(5) .el-aside,
|
.el-container:nth-child(6) .el-aside {
|
line-height: 260px;
|
}
|
|
.el-container:nth-child(7) .el-aside {
|
line-height: 320px;
|
}
|
</style>
|
