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>
|
|
