Skip to content

Commit bedca4b

Browse files
author
潘卓然Y7000P
committed
銆愮珯鐐广€戙€愪慨澶嶃€戙€愪慨澶嶇Щ鍔ㄧ鐨勯〉澶撮€傞厤闂銆?
1 parent 69ddff7 commit bedca4b

4 files changed

Lines changed: 227 additions & 3 deletions

File tree

‎website/public/static/demo/config/config-mapboxgl.json‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -289,7 +289,7 @@
289289
"leaffolder": false,
290290
"childs": [
291291
{
292-
"name": "OGC",
292+
"name": "ARCGIS-OGC",
293293
"iconfont": "iconmap",
294294
"folder": "arcgisogc",
295295
"leaffolder": true,
@@ -816,7 +816,7 @@
816816
"update": "最后更新时间：2019-11-07"
817817
},
818818
{
819-
"name": "100万地质点",
819+
"name": "100万地质点-符号",
820820
"file": "point100_symbol",
821821
"diffcult": "5",
822822
"detail": "",
@@ -918,6 +918,14 @@
918918
"detail": "",
919919
"icon": "measure.png",
920920
"update": "最后更新时间：2020-11-23"
921+
},
922+
{
923+
"name": "卷帘组件",
924+
"file": "compare",
925+
"diffcult": "2",
926+
"detail": "",
927+
"icon": "compare.png",
928+
"update": "最后更新时间：2020-11-27"
921929
}
922930
]
923931
}

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

Lines changed: 168 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
<!DOCTYPE html>
2+
<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+
-webkit-touch-callout: none;
11+
-webkit-user-select: none;
12+
-moz-user-select: none;
13+
-ms-user-select: none;
14+
user-select: none;
15+
}
16+
#app {
17+
margin: 0 0;
18+
width: 100vw;
19+
height: 100vh;
20+
overflow: hidden;
21+
}
22+
.map {
23+
position: absolute; /* 只能是绝对布局 */
24+
top: 0;
25+
bottom: 0;
26+
height: 100%;
27+
width: 100%;
28+
}
29+
.custom-compare-toolbar {
30+
position: absolute;
31+
z-index: 9000;
32+
top: 20px;
33+
left: 20px;
34+
height: 36px;
35+
width: 36px;
36+
border-radius: 6px;
37+
background: #ffffff;
38+
color: #000000;
39+
line-height: 36px;
40+
}
41+
.mapboxgl-compare {
42+
background-color: #fff;
43+
position: absolute;
44+
width: 2px;
45+
height: 100%;
46+
z-index: 1;
47+
}
48+
.mapboxgl-compare .compare-swiper-vertical {
49+
background-color: #3887be;
50+
box-shadow: inset 0 0 0 2px #fff;
51+
display: inline-block;
52+
border-radius: 50%;
53+
position: absolute;
54+
width: 60px;
55+
height: 60px;
56+
top: 50%;
57+
left: -30px;
58+
margin: -30px 1px 0;
59+
color: #fff;
60+
cursor: ew-resize;
61+
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgd2lkdGg9IjYwIiAgIGhlaWdodD0iNjAiICAgdmVyc2lvbj0iMS4xIiAgIHZpZXdCb3g9IjAgMCA2MCA2MCIgICBpZD0ic3ZnNTQzNCIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxK2RldmVsK29zeG1lbnUgcjEyOTExIiAgIHNvZGlwb2RpOmRvY25hbWU9Imwtci5zdmciPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE1NDQ0Ij4gICAgPHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+ICAgICAgPC9jYzpXb3JrPiAgICA8L3JkZjpSREY+ICA8L21ldGFkYXRhPiAgPGRlZnMgICAgIGlkPSJkZWZzNTQ0MiIgLz4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTI4NiIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9Ijc1MSIgICAgIGlkPSJuYW1lZHZpZXc1NDQwIiAgICAgc2hvd2dyaWQ9InRydWUiICAgICBpbmtzY2FwZTp6b29tPSI0IiAgICAgaW5rc2NhcGU6Y3g9IjI1Ljg4OTgzMSIgICAgIGlua3NjYXBlOmN5PSIzNC4zODE4MzMiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyMyIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmc1NDM0IiAgICAgaW5rc2NhcGU6b2JqZWN0LW5vZGVzPSJ0cnVlIiAgICAgaW5rc2NhcGU6c25hcC1zbW9vdGgtbm9kZXM9InRydWUiPiAgICA8aW5rc2NhcGU6Z3JpZCAgICAgICB0eXBlPSJ4eWdyaWQiICAgICAgIGlkPSJncmlkNTk4OSIgLz4gIDwvc29kaXBvZGk6bmFtZWR2aWV3PiAgPHBhdGggICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIiAgICAgZD0iTSAyNSAyNCBMIDE2IDMwIEwgMjUgMzYgTCAyNSAyNCB6IE0gMzUgMjQgTCAzNSAzNiBMIDQ0IDMwIEwgMzUgMjQgeiAiICAgICBpZD0icGF0aDU5OTUiIC8+PC9zdmc+);
62+
}
63+
64+
.mapboxgl-compare-horizontal {
65+
position: relative;
66+
width: 100%;
67+
height: 2px;
68+
}
69+
.mapboxgl-compare .compare-swiper-horizontal {
70+
background-color: #3887be;
71+
box-shadow: inset 0 0 0 2px #fff;
72+
display: inline-block;
73+
border-radius: 50%;
74+
position: absolute;
75+
width: 60px;
76+
height: 60px;
77+
top: 50%;
78+
left: 50%;
79+
margin: -30px 1px 0;
80+
color: #fff;
81+
cursor: ns-resize;
82+
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyAgIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIgICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiICAgd2lkdGg9IjYwIiAgIGhlaWdodD0iNjAiICAgdmVyc2lvbj0iMS4xIiAgIHZpZXdCb3g9IjAgMCA2MCA2MCIgICBpZD0ic3ZnNTQzNCIgICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkxK2RldmVsK29zeG1lbnUgcjEyOTExIiAgIHNvZGlwb2RpOmRvY25hbWU9Imwtci5zdmciPiAgPG1ldGFkYXRhICAgICBpZD0ibWV0YWRhdGE1NDQ0Ij4gICAgPHJkZjpSREY+ICAgICAgPGNjOldvcmsgICAgICAgICByZGY6YWJvdXQ9IiI+ICAgICAgICA8ZGM6Zm9ybWF0PmltYWdlL3N2Zyt4bWw8L2RjOmZvcm1hdD4gICAgICAgIDxkYzp0eXBlICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPiAgICAgICAgPGRjOnRpdGxlPjwvZGM6dGl0bGU+ICAgICAgPC9jYzpXb3JrPiAgICA8L3JkZjpSREY+ICA8L21ldGFkYXRhPiAgPGRlZnMgICAgIGlkPSJkZWZzNTQ0MiIgLz4gIDxzb2RpcG9kaTpuYW1lZHZpZXcgICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIgICAgIGJvcmRlcmNvbG9yPSIjNjY2NjY2IiAgICAgYm9yZGVyb3BhY2l0eT0iMSIgICAgIG9iamVjdHRvbGVyYW5jZT0iMTAiICAgICBncmlkdG9sZXJhbmNlPSIxMCIgICAgIGd1aWRldG9sZXJhbmNlPSIxMCIgICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwIiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIgICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTI4NiIgICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9Ijc1MSIgICAgIGlkPSJuYW1lZHZpZXc1NDQwIiAgICAgc2hvd2dyaWQ9InRydWUiICAgICBpbmtzY2FwZTp6b29tPSI0IiAgICAgaW5rc2NhcGU6Y3g9IjI1Ljg4OTgzMSIgICAgIGlua3NjYXBlOmN5PSIzNC4zODE4MzMiICAgICBpbmtzY2FwZTp3aW5kb3cteD0iMCIgICAgIGlua3NjYXBlOndpbmRvdy15PSIyMyIgICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjAiICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJzdmc1NDM0IiAgICAgaW5rc2NhcGU6b2JqZWN0LW5vZGVzPSJ0cnVlIiAgICAgaW5rc2NhcGU6c25hcC1zbW9vdGgtbm9kZXM9InRydWUiPiAgICA8aW5rc2NhcGU6Z3JpZCAgICAgICB0eXBlPSJ4eWdyaWQiICAgICAgIGlkPSJncmlkNTk4OSIgLz4gIDwvc29kaXBvZGk6bmFtZWR2aWV3PiAgPHBhdGggICAgIHN0eWxlPSJmaWxsOiNmZmZmZmY7ZmlsbC1ydWxlOmV2ZW5vZGQ7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIiAgICAgZD0iTSAyNSAyNCBMIDE2IDMwIEwgMjUgMzYgTCAyNSAyNCB6IE0gMzUgMjQgTCAzNSAzNiBMIDQ0IDMwIEwgMzUgMjQgeiAiICAgICBpZD0icGF0aDU5OTUiIC8+PC9zdmc+);
83+
transform: rotate(90deg);
84+
}
85+
</style>
86+
</head>
87+
88+
<body>
89+
<div id="app">
90+
<mapbox-map
91+
id="left"
92+
class="map"
93+
ref="leftmap"
94+
:map-style="mapStyle"
95+
:zoom="mapZoom"
96+
:center="outerCenter"
97+
:crs="mapCrs"
98+
v-on:load="handleLeftMapLoad"
99+
>
100+
<mapbox-ogc-wmts-layer :layer="layerWmts" :layer-id="layerWmtsId" :source-id="sourceWmtsId" :url="wmtsurl1"> </mapbox-ogc-wmts-layer>
101+
<mapbox-compare ref="compare">
102+
<div class="custom-compare-toolbar" v-on:click="handleEnable">卷帘</div>
103+
</mapbox-compare>
104+
</mapbox-map>
105+
<mapbox-map
106+
id="right"
107+
class="map"
108+
:map-style="mapStyle"
109+
:zoom="mapZoom"
110+
:center="outerCenter"
111+
:crs="mapCrs"
112+
v-on:load="handleRightMapLoad"
113+
>
114+
<mapbox-ogc-wmts-layer :layer="layerWmts" :layer-id="layerWmtsId" :source-id="sourceWmtsId" :url="wmtsurl2"> </mapbox-ogc-wmts-layer>
115+
</mapbox-map>
116+
</div>
117+
<script>
118+
var leftMap, rightMap;
119+
new Vue({
120+
el: '#app',
121+
data() {
122+
return {
123+
mapStyle: {
124+
//设置版本号，一定要设置
125+
version: 8,
126+
//添加来源
127+
sources: {},
128+
//设置加载并显示来源的图层信息
129+
layers: []
130+
}, // 地图样式
131+
mapZoom: 2, // 地图初始化级数
132+
outerCenter: [116.39, 40.2], // 地图显示中心
133+
mapCrs: 'EPSG:4326',
134+
135+
layerWmts: {},
136+
layerWmtsId: 'ogcwmts_layerId',
137+
sourceWmtsId: 'ogcwmts_sourceId',
138+
wmtsurl1: 'http://t0.tianditu.com/DataServer?T=img_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752',
139+
wmtsurl2: 'http://t0.tianditu.com/DataServer?T=vec_c&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752'
140+
};
141+
},
142+
methods: {
143+
handleLeftMapLoad(payload) {
144+
leftMap = payload.map;
145+
},
146+
handleRightMapLoad(payload) {
147+
rightMap = payload.map;
148+
},
149+
handleEnable(e) {
150+
let compare = this.$refs.compare;
151+
let enable = compare.enable;
152+
console.log('compare', compare);
153+
if (enable) {
154+
compare.remove();
155+
} else {
156+
var container = '#comparison-container';
157+
let parent = this.$refs.leftmap.$parent.$el;
158+
compare.compare(leftMap, rightMap, parent, {
159+
// Set this to enable comparing two maps by mouse movement:
160+
// mousemove: true
161+
});
162+
}
163+
}
164+
}
165+
});
166+
</script>
167+
</body>
168+
</html>

‎website/public/static/demo/mapboxgl/gallery/vue/control/compare.png‎

96.2 KB
Loading

0 commit comments

Comments
 (0)