MapComponent.vue
2.23 KB
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<template>
<div id="mapContainer" style="width: 100%;height: 100%;"></div>
</template>
<script>
import 'ol/ol.css';
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import XYZ from 'ol/source/XYZ';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import {get as getProj, fromLonLat} from 'ol/proj';
import {ZoomSlider, Zoom} from 'ol/control';
let olMap = null;
export default {
name: 'MapComponent',
data() {
return {
};
},
created(){
this.$nextTick(() => {
this.init();
})
},
props: [],
mounted () {
},
methods: {
init(){
let center = fromLonLat([116.41020, 39.915119]);
if (mapParam.center) {
center = fromLonLat(mapParam.center);
}
const view = new View({
center: center,
zoom: mapParam.zoom || 10,
projection: this.projection,
maxZoom: mapParam.maxZoom || 19,
minZoom: mapParam.minZoom || 1,
});
let tileLayer = null;
if (mapParam.tilesUrl) {
tileLayer = new TileLayer({
source: new XYZ({
projection: getProj("EPSG:3857"),
wrapX: false,
tileSize: 256 || mapParam.tileSize,
url: mapParam.tilesUrl
})
})
}else {
tileLayer = new TileLayer({
preload: 4,
source: new OSM(),
})
}
olMap = new Map({
target: "mapContainer", // 容器ID
layers: [tileLayer], // 默认图层
view: view, // 视图
controls:[ // 控件
// new ZoomSlider(),
new Zoom(),
] ,
})
},
setCenter(point){
},
zoomIn(zoom){
},
zoomOut(zoom){
},
centerAndZoom(point,zoom,callback){
},
panTo(point){
},
openInfoBox(){
},
closeInfoBox(){
},
addLayer(){
},
removeLayer(){
}
},
destroyed() {
// if (this.jessibuca) {
// this.jessibuca.destroy();
// }
// this.playing = false;
// this.loaded = false;
// this.performance = "";
},
}
</script>
<style>
</style>