1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
| <template>
<div class="mapbox">
<div class="map" :id="mapId"></div>
</div>
</template>
<script>
import {Tile3DLayer} from '@deck.gl/geo-layers';
import {MapboxLayer} from '@deck.gl/mapbox';
import {CesiumIonLoader} from '@loaders.gl/3d-tiles';
import mapboxgl from 'mapboxgl';
export default {
name: 'App',
data() {
return {
mapId: Math.random().toString(36).substr(2)
};
},
mounted() {
var map = new mapboxgl.Map({
container: this.mapId,
style: 'mapbox://styles/mapbox/dark-v10?optimize=true',
center: [120.23962170000004, 30.233723885201944],
zoom: 15.62,
bearing: 0,
pitch: 0,
hash: true
});
let ION_ACCESS_TOKEN="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJlYWMxMzcyYy0zZjJkLTQwODctODNlNi01MDRkZmMzMjIxOWIiLCJpZCI6OTYyMCwic2NvcGVzIjpbImFzbCIsImFzciIsImdjIl0sImlhdCI6MTU2Mjg2NjI3M30.1FNiClUyk00YH_nWfSGpiQAjR5V2OvREDq1PJ5QMjWQ";
map.on('load', function() {
const tile3dLayer = new MapboxLayer({
type: Tile3DLayer,
id: 'tile-3d-layer',
data: 'http://localhost:8588/deck-gl/Data/tileset.json',
loader: CesiumIonLoader,
loadOptions:{
tileset: {
throttleRequests: false
},
'cesium-ion': { accessToken: ION_ACCESS_TOKEN }
}
});
map.addLayer(tile3dLayer);
});
},
}
</script>
<style lang="scss">
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
.mapbox {
position: relative;
width: 100%;
height: 100%;
.map {
width: 100%;
height: 100%;
}
.mapboxgl-ctrl-bottom-right .mapboxgl-ctrl {
margin: 0 10px 64px 0;
float: right;
box-shadow: 0 0 10px 2px rgba(31, 51, 73, 0.1);
}
}
</style>
|
