Skip to content

Commit 007df27

Browse files
xiongjiaojiaoxiongjiaojiao
committed
【update】新增视频增强组件例子; review by qiw
1 parent 5c40e50 commit 007df27

File tree

9 files changed

+488
-180
lines changed

9 files changed

+488
-180
lines changed

‎dist/mapboxgl/include-mapboxgl.js

Lines changed: 192 additions & 180 deletions
Large diffs are not rendered by default.

‎examples/component/components_video_plus_vue.html

Lines changed: 286 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,286 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<title data-i18n="resources.title_componentsVideoPlus_Vue"></title>
7+
<script type="text/javascript" include="vue" src="../js/include-web.js"></script>
8+
<script include="iclient-mapboxgl-vue,mapbox-gl-enhance,videojs"
9+
src="../../dist/mapboxgl/include-mapboxgl.js"></script>
10+
<style>
11+
#main {
12+
margin: 0 auto;
13+
width: 100%;
14+
height: 100%;
15+
}
16+
17+
18+
19+
.mapboxgl-popup-tip {
20+
align-self: center;
21+
}
22+
23+
.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
24+
border-top-color: #2b535b;
25+
}
26+
27+
.mapboxgl-popup-anchor-top .mapboxgl-popup-tip {
28+
border-bottom-color: #2b535b;
29+
}
30+
31+
.mapboxgl-popup-anchor-right .mapboxgl-popup-tip {
32+
border-left-color: #2b535b;
33+
}
34+
35+
.mapboxgl-popup-content {
36+
padding: 0;
37+
border-radius: 0;
38+
box-shadow: none;
39+
background: transparent;
40+
}
41+
42+
.mapboxgl-popup-close-button {
43+
color: #c5d6e8;
44+
font-size: 26px;
45+
z-index: 10;
46+
top: 6px;
47+
right: 10px;
48+
}
49+
50+
.custom-popup-content__border {
51+
width: 370px;
52+
height: 450px;
53+
color: #fff;
54+
}
55+
56+
.custom-popup-content__wrap {
57+
min-width: 330px;
58+
}
59+
60+
.sm-component-text,
61+
.sm-component-indicator,
62+
.sm-component-image {
63+
background: transparent !important;
64+
}
65+
66+
.custom-popup-content__head-title {
67+
background-image: url('./img/video-plus/header.png');
68+
background-repeat: no-repeat;
69+
background-position: center;
70+
background-color: transparent;
71+
width: 100%;
72+
height: 45px;
73+
text-align: center;
74+
padding-top: 6px;
75+
margin-bottom: 5px;
76+
}
77+
78+
.custom-popup-content__head-title .sm-component-text {
79+
color: #ffac2e !important;
80+
}
81+
82+
.custom-popup-content__body {
83+
user-select: none;
84+
}
85+
86+
.custom-popup-content__body .sm-component-text {
87+
justify-content: flex-start;
88+
color: #fff !important;
89+
}
90+
91+
.custom-popup-content__title-wrap,
92+
.custom-popup-content__head-title .sm-component-text {
93+
font-size: 14px;
94+
font-weight: 600;
95+
}
96+
97+
.custom-popup-content__title-wrap {
98+
margin-bottom: 8px;
99+
position: relative;
100+
padding-left: 19px;
101+
width: 100%;
102+
height: 26px;
103+
background-image: url('./img/video-plus/title.png') !important;
104+
background-size: contain !important;
105+
background-repeat: no-repeat !important;
106+
}
107+
108+
.custom-popup-content__info-list {
109+
margin-bottom: 20px;
110+
}
111+
112+
.custom-popup-content__info-list .info-item {
113+
display: flex;
114+
font-size: 13px;
115+
}
116+
117+
.custom-popup-content__info-list .info-item .info-item-label {
118+
width: 40%;
119+
}
120+
121+
.custom-popup-content__info-list .info-item .info-item-value {
122+
flex: 1;
123+
color: #00e6ff !important;
124+
font-weight: 600;
125+
}
126+
127+
.custom-popup-content__video-border {
128+
margin-top: 8px;
129+
height: 200px;
130+
position: relative;
131+
}
132+
133+
.custom-popup-content__video-player {
134+
min-width: 300px;
135+
width: 100%;
136+
height: 100%;
137+
}
138+
</style>
139+
</head>
140+
141+
<body style="margin: 0; overflow: hidden; background: #fff; width: 100%; height: 100%; position: absolute; top: 0">
142+
<div id="main">
143+
<sm-video-plus url="https://iclient.supermap.io/web/data/video/video2.mp4" video-width="1920" video-height="1080"
144+
:autoplay="true" :loop="true" @click="handleMapClick">
145+
<sm-video-plus-layer layer-id="smvideopluslayer" :layer-style="layerStyle" :data="pointList"
146+
@click="handleLayerClick" @mouseenter="toggleLayerCursor" @mouseleave="toggleLayerCursor">
147+
</sm-video-plus-layer>
148+
<sm-video-plus-popup v-if="coordinate" :coordinate="coordinate" :max-width="null" :show="popupVisible"
149+
:close-on-click="false">
150+
<sm-border class="custom-popup-content__border" type="border8">
151+
<div class="custom-popup-content__wrap">
152+
<div class="custom-popup-content__head-title">
153+
<sm-text :title="activeData.name"></sm-text>
154+
</div>
155+
<div class="custom-popup-content__body">
156+
<sm-text class="custom-popup-content__title-wrap" title="基本信息"></sm-text>
157+
<div class="custom-popup-content__info-list">
158+
<div class="info-item">
159+
<sm-text class="info-item-label" title="名称"></sm-text>
160+
<sm-text class="info-item-value" :title="activeData.name"></sm-text>
161+
</div>
162+
<div class="info-item">
163+
<sm-text class="info-item-label" title="地点"></sm-text>
164+
<sm-text class="info-item-value" :title="activeData.address"></sm-text>
165+
</div>
166+
<div class="info-item">
167+
<sm-text class="info-item-label" title="摄像头型号"></sm-text>
168+
<sm-text class="info-item-value" :title="activeData.type"></sm-text>
169+
</div>
170+
</div>
171+
<sm-text class="custom-popup-content__title-wrap" title="视频监控"></sm-text>
172+
<sm-border type="border11" class="custom-popup-content__video-border">
173+
<sm-video-player class="custom-popup-content__video-player" :url="activeData.url"
174+
:options="videoPlayerOptions">
175+
</sm-video-player>
176+
</sm-border>
177+
</div>
178+
</div>
179+
</sm-border>
180+
</sm-video-plus-popup>
181+
</sm-video-plus>
182+
</div>
183+
<script>
184+
new Vue({
185+
el: '#main',
186+
data() {
187+
return {
188+
layerStyle: {
189+
paint: {
190+
'circle-radius': 8,
191+
'circle-color': '#B42222',
192+
'circle-stroke-width': 2,
193+
'circle-stroke-color': '#fff'
194+
}
195+
},
196+
pointList: null,
197+
coordinate: null,
198+
popupVisible: false,
199+
activeData: null,
200+
videoPlayerOptions: {
201+
autoplay: true,
202+
controlBar: false,
203+
loop: true
204+
}
205+
};
206+
},
207+
created() {
208+
const points = [{
209+
'name': "华润时光里",
210+
'address': "新通大道100号",
211+
'type': "海康001",
212+
'coordinate': [828.5775401070108, 583.1275336915099],
213+
'url': 'https://iclient.supermap.io/web/data/video/VID_1.mp4'
214+
}, {
215+
'name': "华润时光里1",
216+
'address': "新通大道101号",
217+
'type': "海康002",
218+
'coordinate': [66.7379679143293, 761.7949313648855],
219+
'url': 'https://iclient.supermap.io/web/data/video/VID_2.mp4'
220+
},
221+
{
222+
'name': "华润时光里2",
223+
'address': "新通大道102号",
224+
'type': "海康003",
225+
'coordinate': [910.7165775401091, 754.60737717794],
226+
'url': 'https://iclient.supermap.io/web/data/video/VID_3.mp4'
227+
},
228+
{
229+
'name': "华润时光里3",
230+
'address': "新通大道103号",
231+
'type': "海康004",
232+
'coordinate': [1603.7647058823031, 626.25489256284],
233+
'url': 'https://iclient.supermap.io/web/data/video/VID_4.mp4'
234+
},
235+
{
236+
'name': "华润时光里4",
237+
'address': "新通大道104号",
238+
'type': "海康005",
239+
'coordinate': [1398.417112299414, 567.7248540773347],
240+
'url': 'https://iclient.supermap.io/web/data/video/VID_5.mp4'
241+
}];
242+
const features = points.map(function (item, index) {
243+
return {
244+
type: 'Feature',
245+
geometry: {
246+
type: 'Point',
247+
coordinates: item.coordinate
248+
},
249+
properties: item
250+
};
251+
});
252+
253+
this.pointList = {
254+
type: 'FeatureCollection',
255+
features: features
256+
};
257+
},
258+
methods: {
259+
handleMapClick(e) {
260+
if (e.mapEvent.target.getCanvas().style.cursor !== 'pointer') {
261+
this.popupVisible = false;
262+
}
263+
},
264+
handleLayerClick(e) {
265+
this.popupVisible = true;
266+
this.coordinate = e.pixelPoint;
267+
const features = e.target.queryRenderedFeatures(
268+
[5, -5],
269+
{ layers: ['smvideopluslayer'] }
270+
);
271+
this.activeData = e.features[0].properties;
272+
},
273+
toggleLayerCursor(e) {
274+
const mapCanvas = e.target.getCanvas();
275+
if (e.type === 'mouseenter') {
276+
mapCanvas.style.cursor = 'pointer';
277+
return;
278+
}
279+
mapCanvas.style.cursor = '';
280+
}
281+
}
282+
});
283+
</script>
284+
</body>
285+
286+
</html>

‎examples/component/config.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -448,6 +448,14 @@ var exampleConfig = {
448448
thumbnail: 'components_slideshow_vue.png',
449449
fileName: 'components_slideshow_vue',
450450
localIgnore: true
451+
},
452+
{
453+
name: '视频增强组件',
454+
name_en: 'VideoPlus',
455+
version: '11.0.0',
456+
localIgnore: true,
457+
thumbnail: 'components_video_plus_vue.png',
458+
fileName: 'components_video_plus_vue'
451459
}
452460
]
453461
},

‎examples/component/img/components_theme_vue.png

972 KB
Loading

‎examples/component/img/components_video_plus_vue.png

33.8 KB
Loading

‎examples/component/img/video-plus/header.png

1.92 KB
Loading

‎examples/component/img/video-plus/title.png

15.5 KB
Loading

‎examples/locales/en-US/resources.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -624,6 +624,7 @@ window.examplesResources = {
624624
"title_componentsLegend_Vue": 'Legend component(Vue)',
625625
"title_componentsBasic_Vue": 'Basic component(Vue)',
626626
"title_componentsSlideshow_Vue": 'Slideshow component(Vue)',
627+
"title_componentsVideoPlus_Vue": 'VideoPlus component(vue)',
627628
"title_componentsMeasure_Vue": 'Measure component(Vue)',
628629
"title_componentsQuery_Vue": 'Query component(Vue)',
629630
"title_componentsSearch_Vue": 'Search component(Vue)',

‎examples/locales/zh-CN/resources.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -570,6 +570,7 @@ window.examplesResources = {
570570
"title_componentsLegend_Vue": '图例组件',
571571
"title_componentsBasic_Vue": '基础组件',
572572
"title_componentsSlideshow_Vue": '幻灯片组件',
573+
"title_componentsVideoPlus_Vue": '视频增强组件',
573574
"title_componentsMeasure_Vue": '量算组件',
574575
"title_componentsQuery_Vue": '查询组件',
575576
"title_componentsSearch_Vue": '搜索组件',

0 commit comments

Comments
 (0)