Skip to content

Commit 153d8f1

Browse files
zhangying-zy618zhangying-zy618
committed
Merge remote-tracking branch 'origin/dev' into modify_zy
# Conflicts: # website/public/static/demo/vue-mapboxgl/example/vue-control/compare-hori.htm # website/public/static/demo/vue-mapboxgl/example/vue-control/compare.htm
2 parents e521b7f + b10067c commit 153d8f1

File tree

7 files changed

+112
-260
lines changed

7 files changed

+112
-260
lines changed

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

Lines changed: 45 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<!DOCTYPE html>
22
<html xmlns="http://www.w3.org/1999/xhtml">
3+
34
<head>
4-
<meta charset="utf-8"/>
5-
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
5+
<meta charset="utf-8" />
6+
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
67
<title>Vue-卷帘</title>
78
<script include="vue" exclude="plugin" src="./static/libs/include-mapboxgl-local.js"></script>
89
<style type="text/css">
@@ -16,132 +17,53 @@
1617
height: 100vh;
1718
overflow: hidden;
1819
}
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-
}
4020
</style>
4121
</head>
4222

4323
<body>
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>
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>
6635
</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',
10736

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-
}
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+
};
14264
}
143-
}
144-
});
145-
</script>
65+
});
66+
</script>
14667
</body>
147-
</html>
68+
69+
</html>

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

Lines changed: 56 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,24 @@
11
<!DOCTYPE html>
22
<html xmlns="http://www.w3.org/1999/xhtml">
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>
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>
3922

4023
<body>
4124
<div id="app">
@@ -49,96 +32,47 @@
4932
:crs="mapCrs"
5033
v-on:load="handleLeftMapLoad"
5134
>
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>
35+
<mapgis-ogc-wmts-layer :layer="layerWmts" :layer-id="layerWmtsId" :source-id="sourceWmtsId" :url="wmtsurl1"> </mapgis-ogc-wmts-layer>
6236
<mapgis-compare ref="compare">
6337
<div class="custom-compare-toolbar" v-on:click="handleEnable">卷帘</div>
6438
</mapgis-compare>
6539
</mapgis-web-map>
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>
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>
8443
</mapgis-web-map>
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',
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>
10577

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>
14478
</html>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,15 @@
4646
v-bind:source-id="sourceRasterId"
4747
>
4848
</mapgis-rastertile-layer>
49-
<mapbox-fps-control> </mapbox-fps-control>
49+
<mapgis-fps></mapgis-fps>
5050
</mapgis-web-map>
5151
</div>
5252
<script>
5353
new Vue({
5454
el: '#app',
5555
data() {
5656
return {
57+
accessToken: 'pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA',
5758
mapStyle: {
5859
//设置版本号，一定要设置
5960
version: 8,

0 commit comments

Comments
 (0)