Skip to content

Commit 86c24ff

Browse files
xilanhuaweidapaoxilanhuaweidapao
committed
增加视频地图示例 修改api
1 parent 78bb605 commit 86c24ff

File tree

8 files changed

+300
-31
lines changed

8 files changed

+300
-31
lines changed

‎examples/mapboxgl/videoLayer.html

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,9 @@
3737
"<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
3838
" with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
3939
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
40-
var dataUrl = host + '/iserver/services/data-test0104/rest/data';
41-
var datasourceName = 'NewDatasource';
42-
var datasetName = 'aaa';
40+
var dataUrl = 'http://172.16.14.199:8090/iserver/services/data-demo-3/rest/data';
41+
var datasourceName = 'VideoData';
42+
var datasetName = 'DJI_0937_2';
4343
var map = new mapboxgl.Map({
4444
container: 'map',
4545
renderWorldCopies: false,
@@ -50,7 +50,7 @@
5050
type: 'raster',
5151
tileSize: 256,
5252
tiles: [
53-
'https://t4.tianditu.gov.cn/img_w/wmts?service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=img&tilematrix={z}&tilerow={y}&tilecol={x}&tk=1d109683f4d84198e37a38c442d68311'
53+
'https://t4.tianditu.gov.cn/vec_w/wmts?service=WMTS&request=GetTile&version=1.0.0&style=default&tilematrixSet=w&format=tiles&width=256&height=256&layer=vec&tilematrix={z}&tilerow={y}&tilecol={x}&tk=1d109683f4d84198e37a38c442d68311'
5454
]
5555
}
5656
},
@@ -64,8 +64,7 @@
6464
}
6565
]
6666
},
67-
center: [116.14734767029731, 28.320871401184714],
68-
zoom: 16
67+
zoom: 14
6968
});
7069
map.addControl(new mapboxgl.NavigationControl(), 'top-left');
7170
map.addControl(new mapboxgl.supermap.LogoControl({ link: 'https://iclient.supermap.io' }), 'bottom-right');
@@ -86,11 +85,30 @@
8685
coordinates.push(res);
8786
});
8887
});
89-
map.setCenter(coordinates[0]);
88+
let cc = coordinates[1];
89+
map.setCenter(cc);
9090
let address = serviceResult.result.features.features[0].properties.address;
9191
videoLayer = new mapboxgl.supermap.VideoLayer({
9292
url: address,
93-
extent: [coordinates[3], coordinates[2], coordinates[1], coordinates[0]]
93+
extent: [coordinates[3], coordinates[2], coordinates[1], coordinates[0]],
94+
videoParameters: {
95+
fovX: 84,
96+
fovY: 47,
97+
centerX: 960,
98+
centerY: 540,
99+
pitch: -20,
100+
roll: 0,
101+
yaw: 2,
102+
x: 11587478.810629973,
103+
y: 3570800.195541344,
104+
z: 154.50312
105+
},
106+
clipRegion: [
107+
[0, 0],
108+
[1920, 0],
109+
[1920, 900],
110+
[0, 900]
111+
]
94112
});
95113
map.addLayer(videoLayer);
96114
});

‎examples/mapboxgl/videoMap.html

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
1+
<!--********************************************************************
2+
* Copyright© 2000 - 2024 SuperMap Software Co.Ltd. All rights reserved.
3+
*********************************************************************-->
4+
<!DOCTYPE html>
5+
<html>
6+
<head>
7+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
8+
<title data-i18n="resources.title_videoLayer"></title>
9+
<style type="text/css">
10+
body {
11+
margin: 0;
12+
padding: 0;
13+
}
14+
15+
#map {
16+
position: absolute;
17+
top: 0;
18+
bottom: 0;
19+
width: 100%;
20+
}
21+
</style>
22+
</head>
23+
<body>
24+
<div id="map"></div>
25+
<script type="text/javascript" include="bootstrap" src="../js/include-web.js"></script>
26+
<script
27+
type="text/javascript"
28+
include="mapbox-gl-enhance,proj4,turf,videojs,opencv"
29+
src="../../dist/mapboxgl/include-mapboxgl.js"
30+
></script>
31+
<script type="text/javascript">
32+
var host = window.isLocal ? window.server : 'https://iserver.supermap.io';
33+
var map,
34+
videoLayer,
35+
url = host + '/iserver/services/map-world/rest/maps/World';
36+
var attribution =
37+
"<a href='https://www.mapbox.com/about/maps/' target='_blank'>© Mapbox </a>" +
38+
" with <span>© <a href='https://iclient.supermap.io' target='_blank'>SuperMap iClient</a> | </span>" +
39+
" Map Data <span>© <a href='http://support.supermap.com.cn/product/iServer.aspx' target='_blank'>SuperMap iServer</a></span> ";
40+
var dataUrl = 'http://172.16.14.199:8090/iserver/services/data-demo-3/rest/data';
41+
var datasourceName = 'VideoData';
42+
var datasetName = 'DJI_0937_2';
43+
var count = 0;
44+
var videoMap;
45+
46+
function query1(dstName, datasource = 'Xinchuan') {
47+
var sqlParam = new mapboxgl.supermap.GetFeaturesBySQLParameters({
48+
queryParameter: {
49+
name: dstName + '@' + datasource,
50+
attributeFilter: 'SMID > 0'
51+
},
52+
datasetNames: [datasource + ':' + dstName]
53+
});
54+
55+
new mapboxgl.supermap.FeatureService(dataUrl).getFeaturesBySQL(sqlParam).then(function (serviceResult) {
56+
count++;
57+
var features = serviceResult.result.features;
58+
if (features.features[0].geometry.type === 'Point') {
59+
videoMap.addLayer({
60+
id: 'symbol' + count,
61+
type: 'symbol',
62+
source: {
63+
type: 'geojson',
64+
data: features
65+
},
66+
layout: {
67+
'icon-image': 'ro-communal-3',
68+
'text-anchor': 'bottom',
69+
'text-field': '{NAME}',
70+
'icon-text-fit': 'both',
71+
'text-size': 12,
72+
'icon-text-fit-padding': [5, 10, 5, 10]
73+
},
74+
paint: {
75+
'text-color': 'black'
76+
}
77+
// layout: {
78+
// // 'icon-image': 'ro-communal-4',
79+
// // 'icon-allow-overlap': true,
80+
// // 'icon-text-fit': 'both',
81+
// // 'text-offset': [-1, -1],
82+
// // 'text-anchor': 'bottom',
83+
// 'text-field': '{NAME}',
84+
// 'text-size': 16
85+
// },
86+
// paint: {
87+
// 'text-color': 'hsl(0, 0%, 0%)',
88+
// 'text-opacity': 1,
89+
// 'text-halo-color': 'hsl(0, 0%, 100%)',
90+
// 'text-halo-width': 1,
91+
// 'text-halo-blur': 1
92+
// }
93+
});
94+
} else if (features.features[0].geometry.type === 'LineString') {
95+
if (dstName === 'Road_L') {
96+
features.features.forEach((f) => {
97+
f.properties['NAME'] = '新川路';
98+
});
99+
videoMap.addSource('line_roads', {
100+
type: 'geojson',
101+
data: features
102+
});
103+
videoMap.addLayer({
104+
id: 'line_road',
105+
type: 'line',
106+
source: 'line_roads',
107+
paint: {
108+
'line-width': 8,
109+
'line-color': 'hsl(26, 87%, 62%)'
110+
}
111+
});
112+
videoMap.addLayer({
113+
id: 'line_road_2',
114+
type: 'line',
115+
source: 'line_roads',
116+
paint: {
117+
'line-width': 4,
118+
'line-color': 'hsl(0, 0%, 100%)'
119+
}
120+
});
121+
122+
videoMap.addLayer({
123+
id: 'label11111111',
124+
type: 'symbol',
125+
source: {
126+
type: 'geojson',
127+
data: features
128+
},
129+
layout: {
130+
'text-line-height': 1.1,
131+
'text-size': 14,
132+
'text-font': ['DIN Offc Pro Italic', 'Arial Unicode MS Regular'],
133+
'symbol-placement': 'line',
134+
'text-field': '{NAME}',
135+
'text-letter-spacing': 0.1,
136+
'text-max-width': 5
137+
},
138+
paint: {
139+
'text-color': 'hsl(0, 0%, 0%)',
140+
'text-halo-color': 'hsl(0, 0%, 100%)',
141+
'text-halo-width': 1.25,
142+
'text-opacity': {
143+
base: 1,
144+
stops: [
145+
[13.99, 0],
146+
[14, 1]
147+
]
148+
}
149+
}
150+
});
151+
} else {
152+
videoMap.addSource('line_raod2s', {
153+
type: 'geojson',
154+
data: features
155+
});
156+
videoMap.addLayer({
157+
id: 'line_raod2',
158+
type: 'line',
159+
source: 'line_raod2s',
160+
paint: {
161+
'line-color': 'red',
162+
'line-width': 5
163+
}
164+
});
165+
videoMap.addLayer({
166+
id: 'line_raod2_2',
167+
type: 'line',
168+
source: 'line_raod2s',
169+
paint: {
170+
'line-color': 'hsl(26, 87%, 62%)',
171+
'line-width': 3
172+
}
173+
});
174+
}
175+
} else {
176+
videoMap.addLayer({
177+
id: 'polygon' + count,
178+
source: {
179+
type: 'geojson',
180+
data: features
181+
},
182+
type: 'fill',
183+
paint: {
184+
'fill-color': 'hsl(200, 100%, 80%)'
185+
}
186+
});
187+
}
188+
});
189+
}
190+
191+
function query() {
192+
var sqlParam = new mapboxgl.supermap.GetFeaturesBySQLParameters({
193+
queryParameter: {
194+
name: datasetName + '@' + datasourceName,
195+
attributeFilter: 'SMID > 0'
196+
},
197+
datasetNames: [datasourceName + ':' + datasetName]
198+
});
199+
200+
new mapboxgl.supermap.FeatureService(dataUrl).getFeaturesBySQL(sqlParam).then(function (serviceResult) {
201+
console.log('serviceResult', serviceResult);
202+
var url = serviceResult.result.features.features[0].properties.address;
203+
var cameraLocation = serviceResult.result.features.features[0].properties.cameraLocation;
204+
var calibrationModel = serviceResult.result.features.features[0].properties.videoParameters.videoParameterList[0].calibrationModel;
205+
videoMap = new mapboxgl.supermap.VideoMap(
206+
url,
207+
{
208+
fovX: calibrationModel.fovX,
209+
fovY: calibrationModel.fovY,
210+
centerX: calibrationModel.centerX,
211+
centerY: calibrationModel.centerY,
212+
pitch:cameraLocation.cameraPitch,
213+
roll: cameraLocation.cameraRoll,
214+
yaw: cameraLocation.cameraYaw,
215+
x: cameraLocation.cameraX,
216+
y: cameraLocation.cameraY,
217+
z: cameraLocation.cameraZ
218+
},
219+
{
220+
autoplay: false,
221+
styleOptions: {
222+
sprite: 'https://iclient.supermap.io/web/styles/street/sprite',
223+
glyphs:
224+
'https://iserver.supermap.io/iserver/services/map-beijing/rest/maps/beijingMap/tileFeature/sdffonts/{fontstack}/{range}.pbf'
225+
},
226+
});
227+
228+
videoMap.on('load', function () {
229+
console.log('videoMap', videoMap);
230+
var datasetList = ['POI', 'Road_L', 'Water', '写字楼', '学校', '步行道'];
231+
datasetList.forEach((name) => {
232+
query1(name);
233+
});
234+
});
235+
});
236+
}
237+
238+
query();
239+
</script>
240+
</body>
241+
</html>

‎src/mapboxgl/mapping/CoordTransfer.js

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,16 +4,16 @@
44
* @private
55
* @classdesc 坐标转换
66
* @param {Object} options - 配准参数。
7-
* @param {number} [options.pitch] - 俯仰角。
8-
* @param {number} [options.roll] - 侧偏角。
9-
* @param {number} [options.yaw] - 偏航角。
10-
* @param {number} [options.x] - 视频 x 坐标。
11-
* @param {number} [options.y] - 视频 y 坐标。
12-
* @param {number} [options.z] - 视频 z 坐标。
13-
* @param {number} [options.fx] - 水平视场角。
14-
* @param {number} [options.fy] - 垂直视场角。
15-
* @param {number} [options.centerX] - 相机中心的水平坐标。
16-
* @param {number} [options.centerY] - 相机中心的垂直坐标。
7+
* @param {number} options.pitch - 俯仰角。
8+
* @param {number} options.roll - 侧偏角。
9+
* @param {number} options.yaw - 偏航角。
10+
* @param {number} options.x - 视频 x 坐标。
11+
* @param {number} options.y - 视频 y 坐标。
12+
* @param {number} options.z - 视频 z 坐标。
13+
* @param {number} options.fx - 水平视场角。
14+
* @param {number} options.fy - 垂直视场角。
15+
* @param {number} options.centerX - 相机中心的水平坐标。
16+
* @param {number} options.centerY - 相机中心的垂直坐标。
1717
*/
1818

1919
export default class CoordTransfer {

‎src/mapboxgl/mapping/GeojsonSource.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { featureEach, coordEach } from '@turf/meta';
22
import cloneDeep from 'lodash.clonedeep';
3-
import { transformCoord } from './util';
3+
import { transformCoord } from './utils/VideoMapUtil';
44

55
/**
66
* @class GeojsonSource

0 commit comments

Comments
 (0)