Skip to content

Commit 9dcdca6

Browse files
author
潘卓然 Parn Deedlit
authored
Merge pull request #65 from MapGIS/modify_zy
【示例网站】【卷帘示例请求解冲】
2 parents e24780d + 3c81f07 commit 9dcdca6

File tree

2 files changed

+245
-101
lines changed

2 files changed

+245
-101
lines changed

‎website/public/static/demo/vue-mapboxgl/example/vue-control/compare-hori.htm‎

Lines changed: 123 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
<!DOCTYPE html>
22
<html xmlns="http://www.w3.org/1999/xhtml">
3-
43
<head>
5-
<meta charset="utf-8" />
6-
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
4+
<meta charset="utf-8"/>
5+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
76
<title>Vue-卷帘</title>
87
<script include="vue" exclude="plugin" src="./static/libs/include-mapboxgl-local.js"></script>
98
<style type="text/css">
@@ -17,53 +16,132 @@
1716
height: 100vh;
1817
overflow: hidden;
1918
}
19+
20+
.map {
21+
position: absolute; /* 只能是绝对布局 */
22+
top: 0;
23+
bottom: 0;
24+
height: 100%;
25+
width: 100%;
26+
}
27+
28+
.custom-compare-toolbar {
29+
position: absolute;
30+
z-index: 9000;
31+
top: 20px;
32+
left: 20px;
33+
height: 36px;
34+
width: 36px;
35+
border-radius: 6px;
36+
background: #ffffff;
37+
color: #000000;
38+
line-height: 36px;
39+
}
2040
</style>
2141
</head>
2242

2343
<body>
24-
<div id="app">
25-
<mapgis-compare :orientation="orientation">
26-
<mapgis-web-map :map-style="mapStyle" :zoom="mapZoom" :center="outerCenter" :crs="mapCrs" slot="beforeMap">
27-
<mapgis-ogc-wmts-layer :layer="layerWmts" :layer-id="layerWmtsId" :source-id="sourceWmtsId"
28-
:url="wmtsurl1"> </mapgis-ogc-wmts-layer>
29-
30-
</mapgis-web-map>
31-
<mapgis-web-map :map-style="mapStyle" :zoom="mapZoom" :center="outerCenter" :crs="mapCrs" slot="afterMap">
32-
<mapgis-ogc-wmts-layer :layer="layerWmts" :layer-id="layerWmtsId" :source-id="sourceWmtsId"
33-
:url="wmtsurl2"> </mapgis-ogc-wmts-layer>
34-
</mapgis-web-map>
44+
<div id="app">
45+
<mapgis-web-map
46+
id="left"
47+
class="map"
48+
ref="leftmap"
49+
:map-style="mapStyle"
50+
:zoom="mapZoom"
51+
:center="outerCenter"
52+
:crs="mapCrs"
53+
v-on:load="handleLeftMapLoad"
54+
>
55+
<mapgis-ogc-wmts-layer
56+
:layer-id="layerWmtsId"
57+
:source-id="sourceWmtsId"
58+
:base-url="wmtsurl1"
59+
:tile-matrix-set="tileMatrixSet"
60+
:wmts-layer="layer1"
61+
:format="format"
62+
:token="token">
63+
</mapgis-ogc-wmts-layer>
64+
<mapgis-compare ref="compare">
65+
<div class="custom-compare-toolbar" v-on:click="handleEnable">卷帘</div>
3566
</mapgis-compare>
67+
</mapgis-web-map>
68+
<mapgis-web-map
69+
id="right"
70+
class="map"
71+
:map-style="mapStyle"
72+
:zoom="mapZoom"
73+
:center="outerCenter"
74+
:crs="mapCrs"
75+
v-on:load="handleRightMapLoad"
76+
>
77+
<mapgis-ogc-wmts-layer
78+
:layer-id="layerWmtsId"
79+
:source-id="sourceWmtsId"
80+
:base-url="wmtsurl2"
81+
:tile-matrix-set="tileMatrixSet"
82+
:wmts-layer="layer2"
83+
:format="format"
84+
:token="token">
85+
</mapgis-ogc-wmts-layer>
86+
</mapgis-web-map>
87+
</div>
88+
<script>
89+
var leftMap, rightMap;
90+
new Vue({
91+
el: '#app',
92+
data() {
93+
return {
94+
left: 'left',
95+
right: 'right',
96+
mapStyle: {
97+
//设置版本号，一定要设置
98+
version: 8,
99+
//添加来源
100+
sources: {},
101+
//设置加载并显示来源的图层信息
102+
layers: []
103+
}, // 地图样式
104+
mapZoom: 2, // 地图初始化级数
105+
outerCenter: [116.39, 40.2], // 地图显示中心
106+
mapCrs: 'EPSG:4326',
36107

37-
38-
</div>
39-
<script>
40-
var leftMap, rightMap;
41-
new Vue({
42-
el: '#app',
43-
data() {
44-
return {
45-
orientation: "horizontal",
46-
mapStyle: {
47-
//设置版本号，一定要设置
48-
version: 8,
49-
//添加来源
50-
sources: {},
51-
//设置加载并显示来源的图层信息
52-
layers: []
53-
}, // 地图样式
54-
mapZoom: 2, // 地图初始化级数
55-
outerCenter: [116.39, 40.2], // 地图显示中心
56-
mapCrs: 'EPSG:4326',
57-
58-
layerWmts: {},
59-
layerWmtsId: 'ogcwmts_layerId',
60-
sourceWmtsId: 'ogcwmts_sourceId',
61-
wmtsurl1: 'http://t0.tianditu.com/DataServer?T=img_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752',
62-
wmtsurl2: 'http://t0.tianditu.com/DataServer?T=vec_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752'
63-
};
108+
layerWmts: {},
109+
layerWmtsId: 'ogcwmts_layerId',
110+
sourceWmtsId: 'ogcwmts_sourceId',
111+
wmtsurl1: 'http://t0.tianditu.gov.cn/img_c/wmts',
112+
layer1:"img",
113+
tileMatrixSet:"c",
114+
format:"tiles",
115+
token:"f5347cab4b28410a6e8ba5143e3d5a35",
116+
wmtsurl2: 'http://t0.tianditu.gov.cn/vec_c/wmts',
117+
layer2:"vec",
118+
};
119+
},
120+
methods: {
121+
handleLeftMapLoad(payload) {
122+
leftMap = payload.map;
123+
},
124+
handleRightMapLoad(payload) {
125+
rightMap = payload.map;
126+
},
127+
handleEnable(e) {
128+
let compare = this.$refs.compare;
129+
let enable = compare.enable;
130+
console.log('compare', compare);
131+
if (enable) {
132+
compare.remove();
133+
} else {
134+
var container = '#comparison-container';
135+
let parent = this.$refs.leftmap.$parent.$el;
136+
compare.compare(leftMap, rightMap, parent, {
137+
// Set this to enable comparing two maps by mouse movement:
138+
// mousemove: true,
139+
orientation: 'horizontal'
140+
});
141+
}
64142
}
65-
});
66-
</script>
143+
}
144+
});
145+
</script>
67146
</body>
68-
69-
</html>
147+
</html>

‎website/public/static/demo/vue-mapboxgl/example/vue-control/compare.htm‎

Lines changed: 122 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,41 @@
11
<!DOCTYPE html>
22
<html xmlns="http://www.w3.org/1999/xhtml">
3-
4-
<head>
5-
<meta charset="utf-8" />
6-
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
7-
<title>Vue-卷帘</title>
8-
<script include="vue" exclude="plugin" src="./static/libs/include-mapboxgl-local.js"></script>
9-
<style type="text/css">
10-
body {
11-
margin: 0px !important;
12-
}
13-
14-
#app {
15-
margin: 0 0;
16-
width: 100vw;
17-
height: 100vh;
18-
overflow: hidden;
19-
}
20-
</style>
21-
</head>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
6+
<title>Vue-卷帘</title>
7+
<script include="vue" exclude="plugin" src="./static/libs/include-mapboxgl-local.js"></script>
8+
<style type="text/css">
9+
body {
10+
margin: 0px !important;
11+
}
12+
#app {
13+
margin: 0 0;
14+
width: 100vw;
15+
height: 100vh;
16+
overflow: hidden;
17+
}
18+
.map {
19+
position: absolute; /* 只能是绝对布局 */
20+
top: 0;
21+
bottom: 0;
22+
height: 100%;
23+
width: 100%;
24+
}
25+
.custom-compare-toolbar {
26+
position: absolute;
27+
z-index: 9000;
28+
top: 20px;
29+
left: 20px;
30+
height: 36px;
31+
width: 36px;
32+
border-radius: 6px;
33+
background: #ffffff;
34+
color: #000000;
35+
line-height: 36px;
36+
}
37+
</style>
38+
</head>
2239

2340
<body>
2441
<div id="app">
@@ -32,47 +49,96 @@
3249
:crs="mapCrs"
3350
v-on:load="handleLeftMapLoad"
3451
>
35-
<mapgis-ogc-wmts-layer :layer="layerWmts" :layer-id="layerWmtsId" :source-id="sourceWmtsId" :url="wmtsurl1"> </mapgis-ogc-wmts-layer>
52+
<mapgis-ogc-wmts-layer
53+
:layer-id="layerWmtsId"
54+
:source-id="sourceWmtsId"
55+
:base-url="wmtsurl1"
56+
:tile-matrix-set="tileMatrixSet"
57+
:wmts-layer="layer1"
58+
:format="format"
59+
:token="token"
60+
>
61+
</mapgis-ogc-wmts-layer>
3662
<mapgis-compare ref="compare">
3763
<div class="custom-compare-toolbar" v-on:click="handleEnable">卷帘</div>
3864
</mapgis-compare>
3965
</mapgis-web-map>
40-
<mapgis-web-map :map-style="mapStyle" :zoom="mapZoom" :center="outerCenter" :crs="mapCrs" slot="afterMap">
41-
<mapgis-ogc-wmts-layer :layer="layerWmts" :layer-id="layerWmtsId" :source-id="sourceWmtsId"
42-
:url="wmtsurl2"> </mapgis-ogc-wmts-layer>
66+
<mapgis-web-map
67+
id="right"
68+
class="map"
69+
:map-style="mapStyle"
70+
:zoom="mapZoom"
71+
:center="outerCenter"
72+
:crs="mapCrs"
73+
v-on:load="handleRightMapLoad"
74+
>
75+
<mapgis-ogc-wmts-layer
76+
:layer-id="layerWmtsId"
77+
:source-id="sourceWmtsId"
78+
:base-url="wmtsurl2"
79+
:tile-matrix-set="tileMatrixSet"
80+
:wmts-layer="layer2"
81+
:format="format"
82+
:token="token">
83+
</mapgis-ogc-wmts-layer>
4384
</mapgis-web-map>
44-
</mapgis-compare>
45-
46-
47-
</div>
48-
<script>
49-
var leftMap, rightMap;
50-
new Vue({
51-
el: '#app',
52-
data() {
53-
return {
54-
orientation: "vertical",
55-
mapStyle: {
56-
//设置版本号，一定要设置
57-
version: 8,
58-
//添加来源
59-
sources: {},
60-
//设置加载并显示来源的图层信息
61-
layers: []
62-
}, // 地图样式
63-
mapZoom: 2, // 地图初始化级数
64-
outerCenter: [116.39, 40.2], // 地图显示中心
65-
mapCrs: 'EPSG:4326',
66-
67-
layerWmts: {},
68-
layerWmtsId: 'ogcwmts_layerId',
69-
sourceWmtsId: 'ogcwmts_sourceId',
70-
wmtsurl1: 'http://t0.tianditu.com/DataServer?T=img_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752',
71-
wmtsurl2: 'http://t0.tianditu.com/DataServer?T=vec_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752'
72-
};
73-
},
74-
});
75-
</script>
76-
</body>
85+
</div>
86+
<script>
87+
var leftMap, rightMap;
88+
new Vue({
89+
el: '#app',
90+
data() {
91+
return {
92+
left: 'left',
93+
right: 'right',
94+
mapStyle: {
95+
//设置版本号，一定要设置
96+
version: 8,
97+
//添加来源
98+
sources: {},
99+
//设置加载并显示来源的图层信息
100+
layers: []
101+
}, // 地图样式
102+
mapZoom: 2, // 地图初始化级数
103+
outerCenter: [116.39, 40.2], // 地图显示中心
104+
mapCrs: 'EPSG:4326',
77105

106+
layerWmtsId: 'ogcwmts_layerId',
107+
sourceWmtsId: 'ogcwmts_sourceId',
108+
wmtsurl1: 'http://t0.tianditu.gov.cn/img_c/wmts',
109+
layer1:"img",
110+
tileMatrixSet:"c",
111+
format:"tiles",
112+
token:"f5347cab4b28410a6e8ba5143e3d5a35",
113+
wmtsurl2: 'http://t0.tianditu.gov.cn/vec_c/wmts',
114+
layer2:"vec",
115+
};
116+
},
117+
methods: {
118+
handleLeftMapLoad(payload) {
119+
leftMap = payload.map;
120+
},
121+
handleRightMapLoad(payload) {
122+
rightMap = payload.map;
123+
},
124+
handleEnable(e) {
125+
let compare = this.$refs.compare;
126+
let enable = compare.enable;
127+
console.log('compare', compare);
128+
if (enable) {
129+
compare.remove();
130+
} else {
131+
var container = '#comparison-container';
132+
let parent = this.$refs.leftmap.$parent.$el;
133+
compare.compare(leftMap, rightMap, parent, {
134+
// Set this to enable comparing two maps by mouse movement:
135+
// mousemove: true,
136+
// orientation: 'horizontal'
137+
});
138+
}
139+
}
140+
}
141+
});
142+
</script>
143+
</body>
78144
</html>

0 commit comments

Comments
 (0)