Map.vue
4.13 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
<template>
<div id="map">
<div id="map-box" ref="mapBody"></div>
</div>
</template>
<script>
import maps from "../../assets/js/map/mapUtils";
import panel from "../../assets/js/map/panel";
import maintain from "../../assets/js/map/maintain";
export default {
data() {
return {
SGWorld: undefined,
regEvent: ['OnLoadFinished'], // 三维地图初始化函数
initial: ['tree', 'map', 'sgword'],
}
},
methods: {
Initialization() {
!this.$refs.mapBody.children.length && this.createEl();
this.SGWorld.Project.Open("http://DESKTOP-583NBSF/SG/projects/SG.397338", true, "", "");
this.regEvent.forEach(e => {
typeof this[e] === "function" && this.SGWorld.AttachEvent(e, this[e]);
});
},
OnLoadFinished() {
this.SGWorld.Navigate.JumpTo(SGWorld.Creator.CreatePosition(101.67468055555556, 36.54803611111111, 863, 0,
220.63478, -40, 0));
maps.sgWorld || (maps.sgWorld = this.SGWorld);
this.$parent.Initialization();
Object.keys(panel.attribute || {}).forEach(e => {
let opt = panel.attribute[e], popup;
Array.isArray(opt) &&
(maps.popups[e] = maps.sgWorld.Creator.CreatePopupMessage(opt[0], '', opt[2], opt[3], opt[4], opt[5], -1));
maps.popups[e].Src = opt[1] + "?popupID=" + maps.popups[e].ID;
});
},
CreatWMSlayer(r) {
var box = r.split("BBOX=")[1].split(',');
var LayerName = "WMS服务"
var box3 = box[3].split('&')[0]
var buffer='<EXT><ExtInfo><![CDATA[';
buffer+='[INFO]\n';
buffer+='MPP=2.68220901489258E-06\n';
buffer+='Url=' + r + '\n';
buffer+='xul=' + box[0] + '\n';
buffer+='ylr=' + box[1] + '\n';
buffer+='xlr=' + box[2] + '\n';
buffer+='yul=' + box3 + '\n';
buffer+=']]></ExtInfo><ExtType>wms</ExtType></EXT>';
this.SGWorld.Creator.CreateImageryLayer(LayerName, box[0], box3, box[2], box[1], buffer, "gisplg.rct", "", LayerName);
// var box = r.split("BBOX=")[1].split(',');
// var LayerName = r.split("Layers=")[1].split('&')[0];
// var box3 = box[3].split('&')[0]
// var buffer='<EXT><ExtInfo><![CDATA[';
// buffer+='[INFO]\n';
// buffer+='MPP=2.68220901489258E-06\n';
// buffer+='Url=' + r + '\n';
// buffer+='xul=' + box[0] + '\n';
// buffer+='ylr=' + box[1] + '\n';
// buffer+='xlr=' + box[2] + '\n';
// buffer+='yul=' + box3 + '\n';
// buffer+=']]></ExtInfo><ExtType>wms</ExtType></EXT>';
// console.log(LayerName);
// this.SGWorld.Creator.CreateImageryLayer(LayerName, box[0], box3, box[2], box[1], null, "gisplg.rct", 0, LayerName)
},
createEl() {
let init = maintain.methods.getMap, keys, i, o;
(this.initial || []).forEach(e => {
this.constructorEl(init[e]);
})
},
constructorEl(opt) {
if (!opt.el) return;
let el = document.createElement(opt.el);
Object.assign(el, { name: opt.name, id: opt.id, classid: opt.classid });
Object.keys(opt.style).forEach(e => {
el.style[e] = opt.style[e];
});
this.$refs.mapBody.appendChild((this.SGWorld = el));
}
},
mounted() {
this.Initialization();
}
}
</script>
<style scoped lang="scss">
#map {
display: flex;
}
#map-box {
background: #95ab2a;
width: 100%;
height: 100%;
flex: 1;
}
</style>