Skip to content

Commit 5ca1505

Browse files
yuchao-xieyuchao-xie
committed
【示例网站】【修复vue-交互组件失效的问题】
1 parent 7e146fc commit 5ca1505

File tree

7 files changed

+137
-249
lines changed

7 files changed

+137
-249
lines changed

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

Lines changed: 63 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,123 +1,69 @@
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>
393

40-
<body>
41-
<div id="app">
42-
<mapgis-web-map
43-
id="left"
44-
class="map"
45-
ref="leftmap"
46-
:map-style="mapStyle"
47-
:zoom="mapZoom"
48-
:center="outerCenter"
49-
:crs="mapCrs"
50-
v-on:load="handleLeftMapLoad"
51-
>
52-
<mapgis-ogc-wmts-layer :layer="layerWmts" :layer-id="layerWmtsId" :source-id="sourceWmtsId" :url="wmtsurl1"> </mapgis-ogc-wmts-layer>
53-
<mapgis-compare ref="compare">
54-
<div class="custom-compare-toolbar" v-on:click="handleEnable">卷帘</div>
55-
</mapgis-compare>
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>
22+
23+
<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+
5630
</mapgis-web-map>
57-
<mapgis-web-map
58-
id="right"
59-
class="map"
60-
:map-style="mapStyle"
61-
:zoom="mapZoom"
62-
:center="outerCenter"
63-
:crs="mapCrs"
64-
v-on:load="handleRightMapLoad"
65-
>
66-
<mapgis-ogc-wmts-layer :layer="layerWmts" :layer-id="layerWmtsId" :source-id="sourceWmtsId" :url="wmtsurl2"> </mapgis-ogc-wmts-layer>
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>
6734
</mapgis-web-map>
68-
</div>
69-
<script>
70-
var leftMap, rightMap;
71-
new Vue({
72-
el: '#app',
73-
data() {
74-
return {
75-
left: 'left',
76-
right: 'right',
77-
mapStyle: {
78-
//设置版本号，一定要设置
79-
version: 8,
80-
//添加来源
81-
sources: {},
82-
//设置加载并显示来源的图层信息
83-
layers: []
84-
}, // 地图样式
85-
mapZoom: 2, // 地图初始化级数
86-
outerCenter: [116.39, 40.2], // 地图显示中心
87-
mapCrs: 'EPSG:4326',
35+
</mapgis-compare>
36+
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+
};
64+
}
65+
});
66+
</script>
67+
</body>
8868

89-
layerWmts: {},
90-
layerWmtsId: 'ogcwmts_layerId',
91-
sourceWmtsId: 'ogcwmts_sourceId',
92-
wmtsurl1: 'http://t0.tianditu.com/DataServer?T=img_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752',
93-
wmtsurl2: 'http://t0.tianditu.com/DataServer?T=vec_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752'
94-
};
95-
},
96-
methods: {
97-
handleLeftMapLoad(payload) {
98-
leftMap = payload.map;
99-
},
100-
handleRightMapLoad(payload) {
101-
rightMap = payload.map;
102-
},
103-
handleEnable(e) {
104-
let compare = this.$refs.compare;
105-
let enable = compare.enable;
106-
console.log('compare', compare);
107-
if (enable) {
108-
compare.remove();
109-
} else {
110-
var container = '#comparison-container';
111-
let parent = this.$refs.leftmap.$parent.$el;
112-
compare.compare(leftMap, rightMap, parent, {
113-
// Set this to enable comparing two maps by mouse movement:
114-
// mousemove: true,
115-
orientation: 'horizontal'
116-
});
117-
}
118-
}
119-
}
120-
});
121-
</script>
122-
</body>
123-
</html>
69+
</html>

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

Lines changed: 63 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,123 +1,69 @@
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>
393

40-
<body>
41-
<div id="app">
42-
<mapgis-web-map
43-
id="left"
44-
class="map"
45-
ref="leftmap"
46-
:map-style="mapStyle"
47-
:zoom="mapZoom"
48-
:center="outerCenter"
49-
:crs="mapCrs"
50-
v-on:load="handleLeftMapLoad"
51-
>
52-
<mapgis-ogc-wmts-layer :layer="layerWmts" :layer-id="layerWmtsId" :source-id="sourceWmtsId" :url="wmtsurl1"> </mapgis-ogc-wmts-layer>
53-
<mapgis-compare ref="compare">
54-
<div class="custom-compare-toolbar" v-on:click="handleEnable">卷帘</div>
55-
</mapgis-compare>
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>
22+
23+
<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+
5630
</mapgis-web-map>
57-
<mapgis-web-map
58-
id="right"
59-
class="map"
60-
:map-style="mapStyle"
61-
:zoom="mapZoom"
62-
:center="outerCenter"
63-
:crs="mapCrs"
64-
v-on:load="handleRightMapLoad"
65-
>
66-
<mapgis-ogc-wmts-layer :layer="layerWmts" :layer-id="layerWmtsId" :source-id="sourceWmtsId" :url="wmtsurl2"> </mapgis-ogc-wmts-layer>
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>
6734
</mapgis-web-map>
68-
</div>
69-
<script>
70-
var leftMap, rightMap;
71-
new Vue({
72-
el: '#app',
73-
data() {
74-
return {
75-
left: 'left',
76-
right: 'right',
77-
mapStyle: {
78-
//设置版本号，一定要设置
79-
version: 8,
80-
//添加来源
81-
sources: {},
82-
//设置加载并显示来源的图层信息
83-
layers: []
84-
}, // 地图样式
85-
mapZoom: 2, // 地图初始化级数
86-
outerCenter: [116.39, 40.2], // 地图显示中心
87-
mapCrs: 'EPSG:4326',
35+
</mapgis-compare>
36+
37+
38+
</div>
39+
<script>
40+
var leftMap, rightMap;
41+
new Vue({
42+
el: '#app',
43+
data() {
44+
return {
45+
orientation: "vertical",
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+
};
64+
},
65+
});
66+
</script>
67+
</body>
8868

89-
layerWmts: {},
90-
layerWmtsId: 'ogcwmts_layerId',
91-
sourceWmtsId: 'ogcwmts_sourceId',
92-
wmtsurl1: 'http://t0.tianditu.com/DataServer?T=img_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752',
93-
wmtsurl2: 'http://t0.tianditu.com/DataServer?T=vec_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752'
94-
};
95-
},
96-
methods: {
97-
handleLeftMapLoad(payload) {
98-
leftMap = payload.map;
99-
},
100-
handleRightMapLoad(payload) {
101-
rightMap = payload.map;
102-
},
103-
handleEnable(e) {
104-
let compare = this.$refs.compare;
105-
let enable = compare.enable;
106-
console.log('compare', compare);
107-
if (enable) {
108-
compare.remove();
109-
} else {
110-
var container = '#comparison-container';
111-
let parent = this.$refs.leftmap.$parent.$el;
112-
compare.compare(leftMap, rightMap, parent, {
113-
// Set this to enable comparing two maps by mouse movement:
114-
// mousemove: true,
115-
// orientation: 'horizontal'
116-
});
117-
}
118-
}
119-
}
120-
});
121-
</script>
122-
</body>
123-
</html>
69+
</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
@@ -39,14 +39,15 @@
3939
v-bind:source-id="sourceRasterId"
4040
>
4141
</mapgis-rastertile-layer>
42-
<mapbox-fps-control> </mapbox-fps-control>
42+
<mapgis-fps></mapgis-fps>
4343
</mapgis-web-map>
4444
</div>
4545
<script>
4646
new Vue({
4747
el: '#app',
4848
data() {
4949
return {
50+
accessToken: 'pk.eyJ1IjoicGFybmRlZWRsaXQiLCJhIjoiY2o1MjBtYTRuMDhpaTMzbXhpdjd3YzhjdCJ9.sCoubaHF9-nhGTA-sgz0sA',
5051
mapStyle: {
5152
//设置版本号，一定要设置
5253
version: 8,

0 commit comments

Comments
 (0)