准备接入minIO
This commit is contained in:
@@ -1,4 +1,4 @@
|
|||||||
VUE_APP_MAP_URL='http://82.157.23.170:8600/geoserver'
|
VUE_APP_MAP_URL='http://82.157.23.170:8600/geoserver'
|
||||||
VUE_APP_MAP_AUTHKEY='9b488ac6-5309-4ef4-ab99-2180d2da161d'
|
VUE_APP_MAP_AUTHKEY='9b488ac6-5309-4ef4-ab99-2180d2da161d'
|
||||||
|
|
||||||
VUE_APP_API="http://work.ii999.live:19002/znzq"
|
VUE_APP_API="http://work.ii999.live:19002/znzq"
|
||||||
|
VUE_APP_STATIC_FILE_Prefix='http://43.139.191.204:8908'
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
VUE_APP_MAP_URL='http://172.16.2.2:8600/geoserver'
|
VUE_APP_MAP_URL='http://172.16.2.2:8600/geoserver'
|
||||||
VUE_APP_MAP_AUTHKEY='30efbafe-d218-4d77-8200-0207246924be'
|
VUE_APP_MAP_AUTHKEY='30efbafe-d218-4d77-8200-0207246924be'
|
||||||
|
|
||||||
VUE_APP_API="http://172.16.2.3:19000/znzq"
|
VUE_APP_API="http://172.16.2.3:19000/znzq"
|
||||||
|
VUE_APP_STATIC_FILE_Prefix='http://43.139.191.204:8908'
|
||||||
|
|||||||
@@ -6,3 +6,8 @@ https://blog.csdn.net/qq_40323256/article/details/120019157
|
|||||||
|
|
||||||
- 点位沿轨迹运动
|
- 点位沿轨迹运动
|
||||||
https://blog.csdn.net/qq_40323256/article/details/119955805
|
https://blog.csdn.net/qq_40323256/article/details/119955805
|
||||||
|
|
||||||
|
|
||||||
|
- 鼠标点击绘制线条
|
||||||
|
|
||||||
|
https://blog.csdn.net/Raccon_/article/details/127491268
|
||||||
|
|||||||
@@ -5,6 +5,7 @@
|
|||||||
"scripts": {
|
"scripts": {
|
||||||
"serve": "vue-cli-service serve --mode dev",
|
"serve": "vue-cli-service serve --mode dev",
|
||||||
"build": "vue-cli-service build --mode prod",
|
"build": "vue-cli-service build --mode prod",
|
||||||
|
"build:online": "vue-cli-service build --mode dev",
|
||||||
"lint": "vue-cli-service lint"
|
"lint": "vue-cli-service lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
|||||||
@@ -3,7 +3,6 @@
|
|||||||
<head>
|
<head>
|
||||||
<script type="text/javascript" src="./vconsole.min.js"></script>
|
<script type="text/javascript" src="./vconsole.min.js"></script>
|
||||||
<script>
|
<script>
|
||||||
// init vConsole
|
|
||||||
var vConsole = new VConsole();
|
var vConsole = new VConsole();
|
||||||
console.log('Hello world');
|
console.log('Hello world');
|
||||||
</script>
|
</script>
|
||||||
@@ -11,18 +10,16 @@
|
|||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="viewport"
|
<meta name="viewport"
|
||||||
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
|
||||||
|
<link rel="stylesheet" href="./reset.css">
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<script type="text/javascript" src="srs/jquery-1.12.2.min.js"></script>
|
||||||
<script type="text/javascript" src="srs/adapter-7.4.0.min.js"></script>
|
<script type="text/javascript" src="srs/adapter-7.4.0.min.js"></script>
|
||||||
<script type="text/javascript" src="srs/srs.sdk.js"></script>
|
<script type="text/javascript" src="srs/srs.sdk.js"></script>
|
||||||
<script type="text/javascript" src="srs/srs.sig.js"></script>
|
<script type="text/javascript" src="srs/winlin.utility.js"></script>
|
||||||
|
<script type="text/javascript" src="srs/srs.page.js"></script>
|
||||||
<title><%= htmlWebpackPlugin.options.title %></title>
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
|
||||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
|
|
||||||
Please enable it to continue.</strong>
|
|
||||||
</noscript>
|
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<!-- built files will be auto injected -->
|
<!-- built files will be auto injected -->
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}
|
@charset "utf-8";
|
||||||
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
|
html{background-color:#fff;color:#000;font-size:12px,margin:0;padding:0}
|
||||||
|
body,html,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
|
||||||
body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
|
body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
|
||||||
h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
|
h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
|
||||||
h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
|
h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
|
||||||
5
hd-glasses-app/public/srs/jquery-1.12.2.min.js
vendored
Normal file
5
hd-glasses-app/public/srs/jquery-1.12.2.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
183
hd-glasses-app/public/srs/srs.page.js
Normal file
183
hd-glasses-app/public/srs/srs.page.js
Normal file
@@ -0,0 +1,183 @@
|
|||||||
|
|
||||||
|
// to query the swf anti cache.
|
||||||
|
function srs_get_version_code() { return "1.33"; }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* player specified size.
|
||||||
|
*/
|
||||||
|
function srs_get_player_modal() { return 740; }
|
||||||
|
function srs_get_player_width() { return srs_get_player_modal() - 30; }
|
||||||
|
function srs_get_player_height() { return srs_get_player_width() * 9 / 19; }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* update the navigator, add same query string.
|
||||||
|
*/
|
||||||
|
function update_nav() {
|
||||||
|
$("#srs_index").attr("href", "index.html" + window.location.search);
|
||||||
|
$("#nav_srs_player").attr("href", "srs_player.html" + window.location.search);
|
||||||
|
$("#nav_rtc_player").attr("href", "rtc_player.html" + window.location.search);
|
||||||
|
$("#nav_rtc_publisher").attr("href", "rtc_publisher.html" + window.location.search);
|
||||||
|
$("#nav_whip").attr("href", "whip.html" + window.location.search);
|
||||||
|
$("#nav_whep").attr("href", "whep.html" + window.location.search);
|
||||||
|
$("#nav_srs_publisher").attr("href", "srs_publisher.html" + window.location.search);
|
||||||
|
$("#nav_srs_chat").attr("href", "srs_chat.html" + window.location.search);
|
||||||
|
$("#nav_srs_bwt").attr("href", "srs_bwt.html" + window.location.search);
|
||||||
|
$("#nav_vlc").attr("href", "vlc.html" + window.location.search);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Special extra params, such as auth_key.
|
||||||
|
function user_extra_params(query, params, rtc) {
|
||||||
|
var queries = params || [];
|
||||||
|
|
||||||
|
for (var key in query.user_query) {
|
||||||
|
if (key === 'app' || key === 'autostart' || key === 'dir'
|
||||||
|
|| key === 'filename' || key === 'host' || key === 'hostname'
|
||||||
|
|| key === 'http_port' || key === 'pathname' || key === 'port'
|
||||||
|
|| key === 'server' || key === 'stream' || key === 'buffer'
|
||||||
|
|| key === 'schema' || key === 'vhost' || key === 'api'
|
||||||
|
|| key === 'path'
|
||||||
|
) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (query[key]) {
|
||||||
|
queries.push(key + '=' + query[key]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return queries;
|
||||||
|
}
|
||||||
|
|
||||||
|
function is_default_port(schema, port) {
|
||||||
|
return (schema === 'http' && port === 80)
|
||||||
|
|| (schema === 'https' && port === 443)
|
||||||
|
|| (schema === 'webrtc' && port === 1985)
|
||||||
|
|| (schema === 'rtmp' && port === 1935);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
@param server the ip of server. default to window.location.hostname
|
||||||
|
@param vhost the vhost of HTTP-FLV. default to window.location.hostname
|
||||||
|
@param port the port of HTTP-FLV. default to 1935
|
||||||
|
@param app the app of HTTP-FLV. default to live.
|
||||||
|
@param stream the stream of HTTP-FLV. default to livestream.flv
|
||||||
|
*/
|
||||||
|
function build_default_flv_url() {
|
||||||
|
var query = parse_query_string();
|
||||||
|
|
||||||
|
var schema = (!query.schema)? "http":query.schema;
|
||||||
|
var server = (!query.server)? window.location.hostname:query.server;
|
||||||
|
var port = (!query.port)? (schema==="http"? 8080:1935) : Number(query.port);
|
||||||
|
var vhost = (!query.vhost)? window.location.hostname:query.vhost;
|
||||||
|
var app = (!query.app)? "live":query.app;
|
||||||
|
var stream = (!query.stream)? "livestream.flv":query.stream;
|
||||||
|
|
||||||
|
var queries = [];
|
||||||
|
if (server !== vhost && vhost !== "__defaultVhost__") {
|
||||||
|
queries.push("vhost=" + vhost);
|
||||||
|
}
|
||||||
|
queries = user_extra_params(query, queries);
|
||||||
|
|
||||||
|
var uri = schema + "://" + server;
|
||||||
|
if (!is_default_port(schema, port)) {
|
||||||
|
uri += ":" + port;
|
||||||
|
}
|
||||||
|
uri += "/" + app + "/" + stream + "?" + queries.join('&');
|
||||||
|
while (uri.indexOf("?") === uri.length - 1) {
|
||||||
|
uri = uri.slice(0, uri.length - 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
return uri;
|
||||||
|
}
|
||||||
|
|
||||||
|
function build_default_rtc_url(query) {
|
||||||
|
// The format for query string to overwrite configs of server.
|
||||||
|
console.log('?eip=x.x.x.x to overwrite candidate. 覆盖服务器candidate(外网IP)配置');
|
||||||
|
console.log('?api=x to overwrite WebRTC API(1985).');
|
||||||
|
console.log('?schema=http|https to overwrite WebRTC API protocol.');
|
||||||
|
|
||||||
|
var server = (!query.server)? window.location.hostname:query.server;
|
||||||
|
var vhost = (!query.vhost)? window.location.hostname:query.vhost;
|
||||||
|
var app = (!query.app)? "live":query.app;
|
||||||
|
var stream = (!query.stream)? "livestream":query.stream;
|
||||||
|
var api = query.api? ':'+query.api : '';
|
||||||
|
|
||||||
|
var queries = [];
|
||||||
|
if (server !== vhost && vhost !== "__defaultVhost__") {
|
||||||
|
queries.push("vhost=" + vhost);
|
||||||
|
}
|
||||||
|
if (query.schema && window.location.protocol !== query.schema + ':') {
|
||||||
|
queries.push('schema=' + query.schema);
|
||||||
|
}
|
||||||
|
queries = user_extra_params(query, queries, true);
|
||||||
|
|
||||||
|
var uri = "webrtc://" + server + api + "/" + app + "/" + stream + "?" + queries.join('&');
|
||||||
|
while (uri.lastIndexOf("?") === uri.length - 1) {
|
||||||
|
uri = uri.slice(0, uri.length - 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
return uri;
|
||||||
|
};
|
||||||
|
|
||||||
|
function build_default_whip_whep_url(query, apiPath) {
|
||||||
|
// The format for query string to overwrite configs of server.
|
||||||
|
console.log('?eip=x.x.x.x to overwrite candidate. 覆盖服务器candidate(外网IP)配置');
|
||||||
|
console.log('?api=x to overwrite WebRTC API(1985).');
|
||||||
|
console.log('?schema=http|https to overwrite WebRTC API protocol.');
|
||||||
|
console.log(`?path=xxx to overwrite default ${apiPath}`);
|
||||||
|
|
||||||
|
var server = (!query.server)? window.location.hostname:query.server;
|
||||||
|
var vhost = (!query.vhost)? window.location.hostname:query.vhost;
|
||||||
|
var app = (!query.app)? "live":query.app;
|
||||||
|
var stream = (!query.stream)? "livestream":query.stream;
|
||||||
|
var api = ':' + (query.api || (window.location.protocol === 'http:' ? '1985' : '1990'));
|
||||||
|
const realApiPath = query.path || apiPath;
|
||||||
|
|
||||||
|
var queries = [];
|
||||||
|
if (server !== vhost && vhost !== "__defaultVhost__") {
|
||||||
|
queries.push("vhost=" + vhost);
|
||||||
|
}
|
||||||
|
if (query.schema && window.location.protocol !== query.schema + ':') {
|
||||||
|
queries.push('schema=' + query.schema);
|
||||||
|
}
|
||||||
|
queries = user_extra_params(query, queries, true);
|
||||||
|
|
||||||
|
var uri = window.location.protocol + "//" + server + api + realApiPath + "?app=" + app + "&stream=" + stream + "&" + queries.join('&');
|
||||||
|
while (uri.lastIndexOf("?") === uri.length - 1) {
|
||||||
|
uri = uri.slice(0, uri.length - 1);
|
||||||
|
}
|
||||||
|
while (uri.lastIndexOf("&") === uri.length - 1) {
|
||||||
|
uri = uri.slice(0, uri.length - 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
return uri;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* initialize the page.
|
||||||
|
* @param flv_url the div id contains the flv stream url to play
|
||||||
|
* @param hls_url the div id contains the hls stream url to play
|
||||||
|
* @param modal_player the div id contains the modal player
|
||||||
|
*/
|
||||||
|
function srs_init_flv(flv_url, modal_player) {
|
||||||
|
update_nav();
|
||||||
|
if (flv_url) {
|
||||||
|
$(flv_url).val(build_default_flv_url());
|
||||||
|
}
|
||||||
|
if (modal_player) {
|
||||||
|
$(modal_player).width(srs_get_player_modal() + "px");
|
||||||
|
$(modal_player).css("margin-left", "-" + srs_get_player_modal() / 2 +"px");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function srs_init_rtc(id, query) {
|
||||||
|
update_nav();
|
||||||
|
$(id).val(build_default_rtc_url(query));
|
||||||
|
}
|
||||||
|
function srs_init_whip(id, query) {
|
||||||
|
update_nav();
|
||||||
|
$(id).val(build_default_whip_whep_url(query, '/rtc/v1/whip/'));
|
||||||
|
}
|
||||||
|
function srs_init_whep(id, query) {
|
||||||
|
update_nav();
|
||||||
|
$(id).val(build_default_whip_whep_url(query, '/rtc/v1/whep/'));
|
||||||
|
}
|
||||||
686
hd-glasses-app/public/srs/winlin.utility.js
Normal file
686
hd-glasses-app/public/srs/winlin.utility.js
Normal file
@@ -0,0 +1,686 @@
|
|||||||
|
// winlin.utility.js
|
||||||
|
|
||||||
|
/**
|
||||||
|
* common utilities
|
||||||
|
* depends: jquery1.10
|
||||||
|
* https://gitee.com/winlinvip/codes/rpn0c2ewbomj81augzk4y59
|
||||||
|
* @see: http://blog.csdn.net/win_lin/article/details/17994347
|
||||||
|
* v 1.0.23
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* padding the output.
|
||||||
|
* padding(3, 5, '0') is 00003
|
||||||
|
* padding(3, 5, 'x') is xxxx3
|
||||||
|
* @see http://blog.csdn.net/win_lin/article/details/12065413
|
||||||
|
*/
|
||||||
|
function padding(number, length, prefix) {
|
||||||
|
if(String(number).length >= length){
|
||||||
|
return String(number);
|
||||||
|
}
|
||||||
|
return padding(prefix+number, length, prefix);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* extends system array, to remove all specified elem.
|
||||||
|
* @param arr the array to remove elem from.
|
||||||
|
* @param elem the elem to remove.
|
||||||
|
* @remark all elem will be removed.
|
||||||
|
* for example,
|
||||||
|
* arr = [10, 15, 20, 30, 20, 40]
|
||||||
|
* system_array_remove(arr, 10) // arr=[15, 20, 30, 20, 40]
|
||||||
|
* system_array_remove(arr, 20) // arr=[15, 30, 40]
|
||||||
|
*/
|
||||||
|
function system_array_remove(arr, elem) {
|
||||||
|
if (!arr) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
var removed = true;
|
||||||
|
var i = 0;
|
||||||
|
while (removed) {
|
||||||
|
removed = false;
|
||||||
|
for (; i < arr.length; i++) {
|
||||||
|
if (elem == arr[i]) {
|
||||||
|
arr.splice(i, 1);
|
||||||
|
removed = true;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* whether the array contains specified element.
|
||||||
|
* @param arr the array to find.
|
||||||
|
* @param elem_or_function the element value or compare function.
|
||||||
|
* @returns true contains elem; otherwise false.
|
||||||
|
* for example,
|
||||||
|
* arr = [10, 15, 20, 30, 20, 40]
|
||||||
|
* system_array_contains(arr, 10) // true
|
||||||
|
* system_array_contains(arr, 11) // false
|
||||||
|
* system_array_contains(arr, function(elem){return elem == 30;}); // true
|
||||||
|
* system_array_contains(arr, function(elem){return elem == 60;}); // false
|
||||||
|
*/
|
||||||
|
function system_array_contains(arr, elem_or_function) {
|
||||||
|
return system_array_get(arr, elem_or_function) != null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* get the specified element from array
|
||||||
|
* @param arr the array to find.
|
||||||
|
* @param elem_or_function the element value or compare function.
|
||||||
|
* @returns the matched elem; otherwise null.
|
||||||
|
* for example,
|
||||||
|
* arr = [10, 15, 20, 30, 20, 40]
|
||||||
|
* system_array_get(arr, 10) // 10
|
||||||
|
* system_array_get(arr, 11) // null
|
||||||
|
* system_array_get(arr, function(elem){return elem == 30;}); // 30
|
||||||
|
* system_array_get(arr, function(elem){return elem == 60;}); // null
|
||||||
|
*/
|
||||||
|
function system_array_get(arr, elem_or_function) {
|
||||||
|
for (var i = 0; i < arr.length; i++) {
|
||||||
|
if (typeof elem_or_function == "function") {
|
||||||
|
if (elem_or_function(arr[i])) {
|
||||||
|
return arr[i];
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (elem_or_function == arr[i]) {
|
||||||
|
return arr[i];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* to iterate on array.
|
||||||
|
* @param arr the array to iterate on.
|
||||||
|
* @param pfn the function to apply on it. return false to break loop.
|
||||||
|
* for example,
|
||||||
|
* arr = [10, 15, 20, 30, 20, 40]
|
||||||
|
* system_array_foreach(arr, function(elem, index){
|
||||||
|
* console.log('index=' + index + ',elem=' + elem);
|
||||||
|
* });
|
||||||
|
* @return true when iterate all elems.
|
||||||
|
*/
|
||||||
|
function system_array_foreach(arr, pfn) {
|
||||||
|
if (!pfn) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
for (var i = 0; i < arr.length; i++) {
|
||||||
|
if (!pfn(arr[i], i)) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* whether the str starts with flag.
|
||||||
|
*/
|
||||||
|
function system_string_startswith(str, flag) {
|
||||||
|
if (typeof flag == "object" && flag.constructor == Array) {
|
||||||
|
for (var i = 0; i < flag.length; i++) {
|
||||||
|
if (system_string_startswith(str, flag[i])) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return str && flag && str.length >= flag.length && str.indexOf(flag) == 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* whether the str ends with flag.
|
||||||
|
*/
|
||||||
|
function system_string_endswith(str, flag) {
|
||||||
|
if (typeof flag == "object" && flag.constructor == Array) {
|
||||||
|
for (var i = 0; i < flag.length; i++) {
|
||||||
|
if (system_string_endswith(str, flag[i])) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return str && flag && str.length >= flag.length && str.indexOf(flag) == str.length - flag.length;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* trim the start and end of flag in str.
|
||||||
|
* @param flag a string to trim.
|
||||||
|
*/
|
||||||
|
function system_string_trim(str, flag) {
|
||||||
|
if (!flag || !flag.length || typeof flag != "string") {
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
|
||||||
|
while (system_string_startswith(str, flag)) {
|
||||||
|
str = str.slice(flag.length);
|
||||||
|
}
|
||||||
|
|
||||||
|
while (system_string_endswith(str, flag)) {
|
||||||
|
str = str.slice(0, str.length - flag.length);
|
||||||
|
}
|
||||||
|
|
||||||
|
return str;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* array sort asc, for example:
|
||||||
|
* [a, b] in [10, 11, 9]
|
||||||
|
* then sort to: [9, 10, 11]
|
||||||
|
* Usage, for example:
|
||||||
|
obj.data.data.sort(function(a, b){
|
||||||
|
return array_sort_asc(a.metadata.meta_id, b.metadata.meta_id);
|
||||||
|
});
|
||||||
|
* @see: http://blog.csdn.net/win_lin/article/details/17994347
|
||||||
|
* @remark, if need desc, use -1*array_sort_asc(a,b)
|
||||||
|
*/
|
||||||
|
function array_sort_asc(elem_a, elem_b) {
|
||||||
|
if (elem_a > elem_b) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
return (elem_a < elem_b)? -1 : 0;
|
||||||
|
}
|
||||||
|
function array_sort_desc(elem_a, elem_b) {
|
||||||
|
return -1 * array_sort_asc(elem_a, elem_b);
|
||||||
|
}
|
||||||
|
function system_array_sort_asc(elem_a, elem_b) {
|
||||||
|
return array_sort_asc(elem_a, elem_b);
|
||||||
|
}
|
||||||
|
function system_array_sort_desc(elem_a, elem_b) {
|
||||||
|
return -1 * array_sort_asc(elem_a, elem_b);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* parse the query string to object.
|
||||||
|
* parse the url location object as: host(hostname:http_port), pathname(dir/filename)
|
||||||
|
* for example, url http://192.168.1.168:1980/ui/players.html?vhost=player.vhost.com&app=test&stream=livestream
|
||||||
|
* parsed to object:
|
||||||
|
{
|
||||||
|
host : "192.168.1.168:1980",
|
||||||
|
hostname : "192.168.1.168",
|
||||||
|
http_port : 1980,
|
||||||
|
pathname : "/ui/players.html",
|
||||||
|
dir : "/ui",
|
||||||
|
filename : "/players.html",
|
||||||
|
|
||||||
|
vhost : "player.vhost.com",
|
||||||
|
app : "test",
|
||||||
|
stream : "livestream"
|
||||||
|
}
|
||||||
|
* @see: http://blog.csdn.net/win_lin/article/details/17994347
|
||||||
|
*/
|
||||||
|
function parse_query_string(){
|
||||||
|
var obj = {};
|
||||||
|
|
||||||
|
// add the uri object.
|
||||||
|
// parse the host(hostname:http_port), pathname(dir/filename)
|
||||||
|
obj.host = window.location.host;
|
||||||
|
obj.hostname = window.location.hostname;
|
||||||
|
obj.http_port = (window.location.port == "")? 80:window.location.port;
|
||||||
|
obj.pathname = window.location.pathname;
|
||||||
|
if (obj.pathname.lastIndexOf("/") <= 0) {
|
||||||
|
obj.dir = "/";
|
||||||
|
obj.filename = "";
|
||||||
|
} else {
|
||||||
|
obj.dir = obj.pathname.slice(0, obj.pathname.lastIndexOf("/"));
|
||||||
|
obj.filename = obj.pathname.slice(obj.pathname.lastIndexOf("/"));
|
||||||
|
}
|
||||||
|
|
||||||
|
// pure user query object.
|
||||||
|
obj.user_query = {};
|
||||||
|
|
||||||
|
// parse the query string.
|
||||||
|
var query_string = String(window.location.search).replace(" ", "").split("?")[1];
|
||||||
|
if(query_string === undefined){
|
||||||
|
query_string = String(window.location.hash).replace(" ", "").split("#")[1];
|
||||||
|
if(query_string === undefined){
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
__fill_query(query_string, obj);
|
||||||
|
|
||||||
|
return obj;
|
||||||
|
}
|
||||||
|
|
||||||
|
function __fill_query(query_string, obj) {
|
||||||
|
// pure user query object.
|
||||||
|
obj.user_query = {};
|
||||||
|
|
||||||
|
if (query_string.length === 0) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// split again for angularjs.
|
||||||
|
if (query_string.indexOf("?") >= 0) {
|
||||||
|
query_string = query_string.split("?")[1];
|
||||||
|
}
|
||||||
|
|
||||||
|
var queries = query_string.split("&");
|
||||||
|
for (var i = 0; i < queries.length; i++) {
|
||||||
|
var elem = queries[i];
|
||||||
|
|
||||||
|
var query = elem.split("=");
|
||||||
|
obj[query[0]] = query[1];
|
||||||
|
obj.user_query[query[0]] = query[1];
|
||||||
|
}
|
||||||
|
|
||||||
|
// alias domain for vhost.
|
||||||
|
if (obj.domain) {
|
||||||
|
obj.vhost = obj.domain;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* parse the rtmp url,
|
||||||
|
* for example: rtmp://demo.srs.com:1935/live...vhost...players/livestream
|
||||||
|
* @return object {server, port, vhost, app, stream}
|
||||||
|
* for exmaple, rtmp_url is rtmp://demo.srs.com:1935/live...vhost...players/livestream
|
||||||
|
* parsed to object:
|
||||||
|
{
|
||||||
|
server: "demo.srs.com",
|
||||||
|
port: 1935,
|
||||||
|
vhost: "players",
|
||||||
|
app: "live",
|
||||||
|
stream: "livestream"
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
function parse_rtmp_url(rtmp_url) {
|
||||||
|
// @see: http://stackoverflow.com/questions/10469575/how-to-use-location-object-to-parse-url-without-redirecting-the-page-in-javascri
|
||||||
|
var a = document.createElement("a");
|
||||||
|
a.href = rtmp_url.replace("rtmp://", "http://")
|
||||||
|
.replace("webrtc://", "http://")
|
||||||
|
.replace("rtc://", "http://");
|
||||||
|
|
||||||
|
var vhost = a.hostname;
|
||||||
|
var app = a.pathname.substring(1, a.pathname.lastIndexOf("/"));
|
||||||
|
var stream = a.pathname.slice(a.pathname.lastIndexOf("/") + 1);
|
||||||
|
|
||||||
|
// parse the vhost in the params of app, that srs supports.
|
||||||
|
app = app.replace("...vhost...", "?vhost=");
|
||||||
|
if (app.indexOf("?") >= 0) {
|
||||||
|
var params = app.slice(app.indexOf("?"));
|
||||||
|
app = app.slice(0, app.indexOf("?"));
|
||||||
|
|
||||||
|
if (params.indexOf("vhost=") > 0) {
|
||||||
|
vhost = params.slice(params.indexOf("vhost=") + "vhost=".length);
|
||||||
|
if (vhost.indexOf("&") > 0) {
|
||||||
|
vhost = vhost.slice(0, vhost.indexOf("&"));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// when vhost equals to server, and server is ip,
|
||||||
|
// the vhost is __defaultVhost__
|
||||||
|
if (a.hostname === vhost) {
|
||||||
|
var re = /^(\d+)\.(\d+)\.(\d+)\.(\d+)$/;
|
||||||
|
if (re.test(a.hostname)) {
|
||||||
|
vhost = "__defaultVhost__";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// parse the schema
|
||||||
|
var schema = "rtmp";
|
||||||
|
if (rtmp_url.indexOf("://") > 0) {
|
||||||
|
schema = rtmp_url.slice(0, rtmp_url.indexOf("://"));
|
||||||
|
}
|
||||||
|
|
||||||
|
var port = a.port;
|
||||||
|
if (!port) {
|
||||||
|
if (schema === 'http') {
|
||||||
|
port = 80;
|
||||||
|
} else if (schema === 'https') {
|
||||||
|
port = 443;
|
||||||
|
} else if (schema === 'rtmp') {
|
||||||
|
port = 1935;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
var ret = {
|
||||||
|
url: rtmp_url,
|
||||||
|
schema: schema,
|
||||||
|
server: a.hostname, port: port,
|
||||||
|
vhost: vhost, app: app, stream: stream
|
||||||
|
};
|
||||||
|
__fill_query(a.search, ret);
|
||||||
|
|
||||||
|
// For webrtc API, we use 443 if page is https, or schema specified it.
|
||||||
|
if (!ret.port) {
|
||||||
|
if (schema === 'webrtc' || schema === 'rtc') {
|
||||||
|
if (ret.user_query.schema === 'https') {
|
||||||
|
ret.port = 443;
|
||||||
|
} else if (window.location.href.indexOf('https://') === 0) {
|
||||||
|
ret.port = 443;
|
||||||
|
} else {
|
||||||
|
// For WebRTC, SRS use 1985 as default API port.
|
||||||
|
ret.port = 1985;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* get the agent.
|
||||||
|
* @return an object specifies some browser.
|
||||||
|
* for example, get_browser_agents().MSIE
|
||||||
|
* @see: http://blog.csdn.net/win_lin/article/details/17994347
|
||||||
|
*/
|
||||||
|
function get_browser_agents() {
|
||||||
|
var agent = navigator.userAgent;
|
||||||
|
|
||||||
|
/**
|
||||||
|
WindowsPC platform, Win7:
|
||||||
|
chrome 31.0.1650.63:
|
||||||
|
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36
|
||||||
|
(KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
|
||||||
|
firefox 23.0.1:
|
||||||
|
Mozilla/5.0 (Windows NT 6.1; WOW64; rv:23.0) Gecko/20100101
|
||||||
|
Firefox/23.0
|
||||||
|
safari 5.1.7(7534.57.2):
|
||||||
|
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2
|
||||||
|
(KHTML, like Gecko) Version/5.1.7 Safari/534.57.2
|
||||||
|
opera 15.0.1147.153:
|
||||||
|
Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36
|
||||||
|
(KHTML, like Gecko) Chrome/28.0.1500.95 Safari/537.36
|
||||||
|
OPR/15.0.1147.153
|
||||||
|
360 6.2.1.272:
|
||||||
|
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64;
|
||||||
|
Trident/6.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729;
|
||||||
|
.NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C;
|
||||||
|
.NET4.0E)
|
||||||
|
IE 10.0.9200.16750(update: 10.0.12):
|
||||||
|
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; WOW64;
|
||||||
|
Trident/6.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729;
|
||||||
|
.NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.2; .NET4.0C;
|
||||||
|
.NET4.0E)
|
||||||
|
*/
|
||||||
|
|
||||||
|
return {
|
||||||
|
// platform
|
||||||
|
Android: agent.indexOf("Android") != -1,
|
||||||
|
Windows: agent.indexOf("Windows") != -1,
|
||||||
|
iPhone: agent.indexOf("iPhone") != -1,
|
||||||
|
// Windows Browsers
|
||||||
|
Chrome: agent.indexOf("Chrome") != -1,
|
||||||
|
Firefox: agent.indexOf("Firefox") != -1,
|
||||||
|
QQBrowser: agent.indexOf("QQBrowser") != -1,
|
||||||
|
MSIE: agent.indexOf("MSIE") != -1,
|
||||||
|
// Android Browsers
|
||||||
|
Opera: agent.indexOf("Presto") != -1,
|
||||||
|
MQQBrowser: agent.indexOf("MQQBrowser") != -1
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* format relative seconds to HH:MM:SS,
|
||||||
|
* for example, 210s formated to 00:03:30
|
||||||
|
* @see: http://blog.csdn.net/win_lin/article/details/17994347
|
||||||
|
* @usage relative_seconds_to_HHMMSS(210)
|
||||||
|
*/
|
||||||
|
function relative_seconds_to_HHMMSS(seconds){
|
||||||
|
var date = new Date();
|
||||||
|
date.setTime(Number(seconds) * 1000);
|
||||||
|
|
||||||
|
var ret = padding(date.getUTCHours(), 2, '0')
|
||||||
|
+ ":" + padding(date.getUTCMinutes(), 2, '0')
|
||||||
|
+ ":" + padding(date.getUTCSeconds(), 2, '0');
|
||||||
|
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* format absolute seconds to HH:MM:SS,
|
||||||
|
* for example, 1389146480s (2014-01-08 10:01:20 GMT+0800) formated to 10:01:20
|
||||||
|
* @see: http://blog.csdn.net/win_lin/article/details/17994347
|
||||||
|
* @usage absolute_seconds_to_HHMMSS(new Date().getTime() / 1000)
|
||||||
|
*/
|
||||||
|
function absolute_seconds_to_HHMMSS(seconds){
|
||||||
|
var date = new Date();
|
||||||
|
date.setTime(Number(seconds) * 1000);
|
||||||
|
|
||||||
|
var ret = padding(date.getHours(), 2, '0')
|
||||||
|
+ ":" + padding(date.getMinutes(), 2, '0')
|
||||||
|
+ ":" + padding(date.getSeconds(), 2, '0');
|
||||||
|
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* format absolute seconds to YYYY-mm-dd,
|
||||||
|
* for example, 1389146480s (2014-01-08 10:01:20 GMT+0800) formated to 2014-01-08
|
||||||
|
* @see: http://blog.csdn.net/win_lin/article/details/17994347
|
||||||
|
* @usage absolute_seconds_to_YYYYmmdd(new Date().getTime() / 1000)
|
||||||
|
*/
|
||||||
|
function absolute_seconds_to_YYYYmmdd(seconds) {
|
||||||
|
var date = new Date();
|
||||||
|
date.setTime(Number(seconds) * 1000);
|
||||||
|
|
||||||
|
var ret = date.getFullYear()
|
||||||
|
+ "-" + padding(date.getMonth() + 1, 2, '0')
|
||||||
|
+ "-" + padding(date.getDate(), 2, '0');
|
||||||
|
|
||||||
|
return ret;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* parse the date in str to Date object.
|
||||||
|
* @param str the date in str, format as "YYYY-mm-dd", for example, 2014-12-11
|
||||||
|
* @returns a date object.
|
||||||
|
* @usage YYYYmmdd_parse("2014-12-11")
|
||||||
|
*/
|
||||||
|
function YYYYmmdd_parse(str) {
|
||||||
|
var date = new Date();
|
||||||
|
date.setTime(Date.parse(str));
|
||||||
|
return date;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* async refresh function call. to avoid multiple call.
|
||||||
|
* @remark AsyncRefresh is for jquery to refresh the speicified pfn in a page;
|
||||||
|
* if angularjs, use AsyncRefresh2 to change pfn, cancel previous request for angularjs use singleton object.
|
||||||
|
* @param refresh_interval the default refresh interval ms.
|
||||||
|
* @see: http://blog.csdn.net/win_lin/article/details/17994347
|
||||||
|
* the pfn can be implements as following:
|
||||||
|
var async_refresh = new AsyncRefresh(pfn, 3000);
|
||||||
|
function pfn() {
|
||||||
|
if (!async_refresh.refresh_is_enabled()) {
|
||||||
|
async_refresh.request(100);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
$.ajax({
|
||||||
|
type: 'GET', async: true, url: 'xxxxx',
|
||||||
|
complete: function(){
|
||||||
|
if (!async_refresh.refresh_is_enabled()) {
|
||||||
|
async_refresh.request(0);
|
||||||
|
} else {
|
||||||
|
async_refresh.request(async_refresh.refresh_interval);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
success: function(res){
|
||||||
|
// if donot allow refresh, directly return.
|
||||||
|
if (!async_refresh.refresh_is_enabled()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// render the res.
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
function AsyncRefresh(pfn, refresh_interval) {
|
||||||
|
this.refresh_interval = refresh_interval;
|
||||||
|
|
||||||
|
this.__handler = null;
|
||||||
|
this.__pfn = pfn;
|
||||||
|
|
||||||
|
this.__enabled = true;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* disable the refresher, the pfn must check the refresh state.
|
||||||
|
*/
|
||||||
|
AsyncRefresh.prototype.refresh_disable = function() {
|
||||||
|
this.__enabled = false;
|
||||||
|
}
|
||||||
|
AsyncRefresh.prototype.refresh_enable = function() {
|
||||||
|
this.__enabled = true;
|
||||||
|
}
|
||||||
|
AsyncRefresh.prototype.refresh_is_enabled = function() {
|
||||||
|
return this.__enabled;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* start new async request
|
||||||
|
* @param timeout the timeout in ms.
|
||||||
|
* user can use the refresh_interval of the AsyncRefresh object,
|
||||||
|
* which initialized in constructor.
|
||||||
|
*/
|
||||||
|
AsyncRefresh.prototype.request = function(timeout) {
|
||||||
|
if (this.__handler) {
|
||||||
|
clearTimeout(this.__handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
this.__handler = setTimeout(this.__pfn, timeout);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* async refresh v2, support cancellable refresh, and change the refresh pfn.
|
||||||
|
* @remakr for angularjs. if user only need jquery, maybe AsyncRefresh is better.
|
||||||
|
* @see: http://blog.csdn.net/win_lin/article/details/17994347
|
||||||
|
* Usage:
|
||||||
|
bsmControllers.controller('CServers', ['$scope', 'MServer', function($scope, MServer){
|
||||||
|
async_refresh2.refresh_change(function(){
|
||||||
|
// 获取服务器列表
|
||||||
|
MServer.servers_load({}, function(data){
|
||||||
|
$scope.servers = data.data.servers;
|
||||||
|
async_refresh2.request();
|
||||||
|
});
|
||||||
|
}, 3000);
|
||||||
|
|
||||||
|
async_refresh2.request(0);
|
||||||
|
}]);
|
||||||
|
bsmControllers.controller('CStreams', ['$scope', 'MStream', function($scope, MStream){
|
||||||
|
async_refresh2.refresh_change(function(){
|
||||||
|
// 获取流列表
|
||||||
|
MStream.streams_load({}, function(data){
|
||||||
|
$scope.streams = data.data.streams;
|
||||||
|
async_refresh2.request();
|
||||||
|
});
|
||||||
|
}, 3000);
|
||||||
|
|
||||||
|
async_refresh2.request(0);
|
||||||
|
}]);
|
||||||
|
*/
|
||||||
|
function AsyncRefresh2() {
|
||||||
|
/**
|
||||||
|
* the function callback before call the pfn.
|
||||||
|
* the protype is function():bool, which return true to invoke, false to abort the call.
|
||||||
|
* null to ignore this callback.
|
||||||
|
*
|
||||||
|
* for example, user can abort the refresh by find the class popover:
|
||||||
|
* async_refresh2.on_before_call_pfn = function() {
|
||||||
|
* if ($(".popover").length > 0) {
|
||||||
|
* async_refresh2.request();
|
||||||
|
* return false;
|
||||||
|
* }
|
||||||
|
* return true;
|
||||||
|
* };
|
||||||
|
*/
|
||||||
|
this.on_before_call_pfn = null;
|
||||||
|
|
||||||
|
// use a anonymous function to call, and check the enabled when actually invoke.
|
||||||
|
this.__call = {
|
||||||
|
pfn: null,
|
||||||
|
timeout: 0,
|
||||||
|
__enabled: false,
|
||||||
|
__handler: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
// singleton
|
||||||
|
var async_refresh2 = new AsyncRefresh2();
|
||||||
|
/**
|
||||||
|
* initialize or refresh change. cancel previous request, setup new request.
|
||||||
|
* @param pfn a function():void to request after timeout. null to disable refresher.
|
||||||
|
* @param timeout the timeout in ms, to call pfn. null to disable refresher.
|
||||||
|
*/
|
||||||
|
AsyncRefresh2.prototype.initialize = function(pfn, timeout) {
|
||||||
|
this.refresh_change(pfn, timeout);
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* stop refresh, the refresh pfn is set to null.
|
||||||
|
*/
|
||||||
|
AsyncRefresh2.prototype.stop = function() {
|
||||||
|
this.__call.__enabled = false;
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* restart refresh, use previous config.
|
||||||
|
*/
|
||||||
|
AsyncRefresh2.prototype.restart = function() {
|
||||||
|
this.__call.__enabled = true;
|
||||||
|
this.request(0);
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* change refresh pfn, the old pfn will set to disabled.
|
||||||
|
*/
|
||||||
|
AsyncRefresh2.prototype.refresh_change = function(pfn, timeout) {
|
||||||
|
// cancel the previous call.
|
||||||
|
if (this.__call.__handler) {
|
||||||
|
clearTimeout(this.__handler);
|
||||||
|
}
|
||||||
|
this.__call.__enabled = false;
|
||||||
|
|
||||||
|
// setup new call.
|
||||||
|
this.__call = {
|
||||||
|
pfn: pfn,
|
||||||
|
timeout: timeout,
|
||||||
|
__enabled: true,
|
||||||
|
__handler: null
|
||||||
|
};
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* start new request, we never auto start the request,
|
||||||
|
* user must start new request when previous completed.
|
||||||
|
* @param timeout [optional] if not specified, use the timeout in initialize or refresh_change.
|
||||||
|
*/
|
||||||
|
AsyncRefresh2.prototype.request = function(timeout) {
|
||||||
|
var self = this;
|
||||||
|
var this_call = this.__call;
|
||||||
|
|
||||||
|
// clear previous timeout.
|
||||||
|
if (this_call.__handler) {
|
||||||
|
clearTimeout(this_call.__handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
// override the timeout
|
||||||
|
if (timeout == undefined) {
|
||||||
|
timeout = this_call.timeout;
|
||||||
|
}
|
||||||
|
|
||||||
|
// if user disabled refresher.
|
||||||
|
if (this_call.pfn == null || timeout == null) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this_call.__handler = setTimeout(function(){
|
||||||
|
// cancelled by refresh_change, ignore.
|
||||||
|
if (!this_call.__enabled) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
// callback if the handler installled.
|
||||||
|
if (self.on_before_call_pfn) {
|
||||||
|
if (!self.on_before_call_pfn()) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// do the actual call.
|
||||||
|
this_call.pfn();
|
||||||
|
}, timeout);
|
||||||
|
}
|
||||||
|
|
||||||
@@ -24,6 +24,5 @@ export default {
|
|||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #2c3e50;
|
color: #2c3e50;
|
||||||
margin-top: 60px;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -1,20 +1,26 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<h1>call_room</h1>
|
<h1>call_room</h1>
|
||||||
<video id="rtc_media_player" width="310" autoplay muted controls></video>
|
<van-cell-group>
|
||||||
|
<van-field v-model="value" label="文本" placeholder="请输入用户名" />
|
||||||
|
</van-cell-group>
|
||||||
|
<video ref="video" id="rtc_media_player" width="310" autoplay muted controls></video>
|
||||||
|
<van-button type="primary" @click="playVideo">主要按钮</van-button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
/* eslint-disable */
|
||||||
export default {
|
export default {
|
||||||
name: "call_room",
|
name: "call_room",
|
||||||
data() {
|
data() {
|
||||||
return {};
|
return {
|
||||||
|
value:"webrtc://119.45.242.222/live/livestream123",
|
||||||
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
// eslint-disable-next-line no-undef
|
|
||||||
let player = new SrsRtcPlayerAsync();
|
let player = new SrsRtcPlayerAsync();
|
||||||
var url = 'webrtc://192.168.2.180/live/test123';
|
var url = 'webrtc://119.45.242.222/live/livestream123';
|
||||||
|
|
||||||
player.play(url).then(function(session){
|
player.play(url).then(function(session){
|
||||||
console.log(session);
|
console.log(session);
|
||||||
@@ -28,7 +34,46 @@ export default {
|
|||||||
});
|
});
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {}
|
methods: {
|
||||||
|
playVideo(){
|
||||||
|
let sdk=null;
|
||||||
|
const video = this.$refs.video;
|
||||||
|
video.srcObject=null;
|
||||||
|
|
||||||
|
var query = parse_query_string();
|
||||||
|
|
||||||
|
srs_init_rtc("#txt_url", this.value);
|
||||||
|
|
||||||
|
if (sdk) {
|
||||||
|
sdk.close();
|
||||||
|
}
|
||||||
|
sdk = new SrsRtcPlayerAsync();
|
||||||
|
|
||||||
|
// https://webrtc.org/getting-started/remote-streams
|
||||||
|
this.rtcSteam=sdk.stream
|
||||||
|
|
||||||
|
video.srcObject = sdk.stream;
|
||||||
|
video.onloadedmetadata = function (e) {
|
||||||
|
video.play();
|
||||||
|
};
|
||||||
|
|
||||||
|
// $('#rtc_media_player').prop('srcObject', sdk.stream);
|
||||||
|
// Optional callback, SDK will add track to stream.
|
||||||
|
// sdk.ontrack = function (event) { console.log('Got track', event); sdk.stream.addTrack(event.track); };
|
||||||
|
|
||||||
|
// For example: webrtc://r.ossrs.net/live/livestream
|
||||||
|
var url = this.value
|
||||||
|
sdk.play(url).then(function(session){
|
||||||
|
// $('#sessionid').html(session.sessionid);
|
||||||
|
// $('#simulator-drop').attr('href', session.simulator + '?drop=1&username=' + session.sessionid);
|
||||||
|
}).catch(function (reason) {
|
||||||
|
sdk.close();
|
||||||
|
$('#rtc_media_player').hide();
|
||||||
|
console.error(reason);
|
||||||
|
});
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
@@ -1,148 +1,533 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="hd_map">
|
<div id="content">
|
||||||
<div id="icon" style="display: none"><img style="width: 40px;height: 40px" src="../assets/map/icon_paishuibeng_h_3.png"></div>
|
<div id="map" ref="map" style="width: 100vw; height: 100vh"/>
|
||||||
<div id="map2" ref="roadmap" style="width: 100%;height: 100%">
|
<div id="overlay-box"/>
|
||||||
</div>
|
|
||||||
<div class="addAlarmPoint" v-if="page=='addAlarmPoint'">
|
<div class="addAlarmPoint" v-if="page=='addAlarmPoint'">
|
||||||
<div class="addAlarmPointNext" @click="addAlarmPointNextAction">下一步</div>
|
<div class="addAlarmPointNext" @click="addAlarmPointNextAction">下一步</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="mobileHomePageExpandBtn" v-if="page=='mobileHomePage'">
|
||||||
|
<van-icon name="expand-o" color="white" @click="switchFullScreen"/>
|
||||||
|
</div>
|
||||||
|
<!--
|
||||||
|
<div class="pcPlanningPath" v-if="page=='pcPlanningPath'">
|
||||||
|
<div class="pcPlanningPathNext" @click="clearPcPlanningPath">清空重新绘制</div>
|
||||||
|
</div>
|
||||||
|
-->
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {OL as ol, api, PlottingLayer, FeatureOperatorEvent, PlotTypes} from 'plot-ol/plottingol'
|
import "ol/ol.css";
|
||||||
import { Notify,Dialog } from 'vant';
|
import TileLayer from "ol/layer/Tile";
|
||||||
import service from "../utils/service"
|
import VectorLayer from "ol/layer/Vector";
|
||||||
|
import VectorSource from "ol/source/Vector";
|
||||||
|
import XYZ from "ol/source/XYZ";
|
||||||
|
import {Map, View, Feature} from "ol";
|
||||||
|
import {Icon, Fill, Stroke, Style, Circle} from "ol/style";
|
||||||
|
import Overlay from "ol/Overlay";
|
||||||
|
import {Point, LineString} from "ol/geom.js";
|
||||||
|
import {getVectorContext} from "ol/render";
|
||||||
|
import axios from "axios";
|
||||||
|
import TileWMS from "ol/source/TileWMS"
|
||||||
|
import {Notify, Dialog} from 'vant';
|
||||||
|
import * as interaction from 'ol/interaction'; // 交互
|
||||||
|
import {OL as ol} from "plot-ol/plottingol";
|
||||||
|
import GeoJSON from 'ol/format/GeoJSON'
|
||||||
|
import service from "@/utils/service";
|
||||||
|
import {appInit,getStatisFileUrl} from "../utils/publicFun";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "hd_map",
|
|
||||||
data() {
|
data() {
|
||||||
// const loadMap = new api.LoadMap("http://172.16.2.2:8600/geoserver", "30efbafe-d218-4d77-8200-0207246924be");
|
|
||||||
const loadMap = new api.LoadMap(process.env.VUE_APP_MAP_URL, process.env.VUE_APP_MAP_AUTHKEY);
|
|
||||||
return {
|
return {
|
||||||
map2: null,
|
map: {},
|
||||||
loadMap: loadMap,
|
pointLayer: {},
|
||||||
selectPoint: [], //选择的点位
|
canAddPoints: false,
|
||||||
center: [12497018.585823221, 2476783.2447665134],
|
coordinate: [],
|
||||||
icon: require("../assets/map.png"),
|
route: new LineString([[12496610.1929, 2476571.7426], [12496623.829, 2476586.2505]]),
|
||||||
page: null
|
route1: new LineString([[113.95113841271974, 22.568523240293505], [113.94452944970705, 22.563351941312792], [113.95188943124391, 22.559317898954394], [113.94467965341188, 22.555326771940233]]),
|
||||||
|
geometryMove: {},
|
||||||
|
featureMove: {},
|
||||||
|
styles: {
|
||||||
|
route: new Style({
|
||||||
|
stroke: new Stroke({
|
||||||
|
width: 6,
|
||||||
|
color: [237, 212, 0, 0.8],
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
icon: new Style({
|
||||||
|
image: new Icon({
|
||||||
|
anchor: [0.5, 1],
|
||||||
|
src: "https://openlayers.org/en/v4.6.5/examples/data/icon.png",
|
||||||
|
scale: 1, //设置大小
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
featureMove: new Style({
|
||||||
|
image: new Circle({
|
||||||
|
radius: 7,
|
||||||
|
fill: new Fill({color: "black"}),
|
||||||
|
stroke: new Stroke({
|
||||||
|
color: "white",
|
||||||
|
width: 2,
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
vectorLayer: {},
|
||||||
|
distance: 0,
|
||||||
|
lastTime: 0,
|
||||||
|
speed: 0.1,
|
||||||
|
page: null,
|
||||||
|
selectPoint: [],
|
||||||
|
drawPlanningPathLayer: null,
|
||||||
|
draw: null,
|
||||||
|
snap: null,
|
||||||
|
pcDrawType: ""
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
console.log(process.env.NODE_ENV)
|
|
||||||
console.log(process.env.NODE_ENV)
|
|
||||||
console.log(process.env.NODE_ENV)
|
|
||||||
console.log(process.env.NODE_ENV)
|
|
||||||
console.log(process.env.NODE_ENV)
|
|
||||||
console.log(this.$route.query.page)
|
|
||||||
this.page = this.$route.query.page;
|
this.page = this.$route.query.page;
|
||||||
|
this.initMap();
|
||||||
this.init();
|
|
||||||
switch (this.page) {
|
switch (this.page) {
|
||||||
case "addAlarmPoint":
|
case "addAlarmPoint":
|
||||||
console.log("新增报警点");
|
console.log("新增报警点");
|
||||||
this.PageAddAlarmPoint()
|
this.PageAddAlarmPoint()
|
||||||
break
|
break
|
||||||
|
case "pcPlanningPath":
|
||||||
|
this.pcDrawType = "LineString";
|
||||||
|
this.pcPlanningPath()
|
||||||
|
break
|
||||||
|
case "pcDrawArea":
|
||||||
|
this.pcDrawType = "Polygon"
|
||||||
|
this.pcPlanningPath();
|
||||||
|
break
|
||||||
|
case "mobileHomePage":
|
||||||
|
appInit(500).then((e) => {
|
||||||
|
console.log("获取到token，开始执行后续")
|
||||||
|
console.log(e)
|
||||||
|
this.queryAlarmList();
|
||||||
|
this.queryAllEquipment();
|
||||||
|
}).then((e) => {
|
||||||
|
console.error(e)
|
||||||
|
})
|
||||||
|
break
|
||||||
default:
|
default:
|
||||||
console.log("未匹配到page参数")
|
console.log("未匹配到page参数")
|
||||||
this.queryAlarmList()
|
this.planningPath()
|
||||||
this.queryAllEquipment()
|
// this.queryAlarmList()
|
||||||
|
// this.queryAllEquipment()
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
init() {
|
PageAddAlarmPoint() {
|
||||||
// console.log(this.$utils.getUrlParam("page"))
|
this.canAddPoints = true;
|
||||||
//限制地图移动范围
|
this.clickMap();
|
||||||
const extent = [12482643.010892345, 2470943.170650934, 12505548.591601802, 2482396.032222487];
|
|
||||||
//地图中心点
|
|
||||||
let center = "ol.proj.transform([112.26173, 21.70896], 'EPSG:4326', 'EPSG:3857')"
|
|
||||||
center = [12497018.585823221, 2476783.2447665134];
|
|
||||||
// 初始化地图参数
|
|
||||||
const option = {
|
|
||||||
target: 'map2',
|
|
||||||
layers: [
|
|
||||||
{
|
|
||||||
type: 'WMTS',
|
|
||||||
layerName: 'china:yangjianghedian_dt',
|
|
||||||
projection: 'EPSG:3857',
|
|
||||||
version: '1.0.0',
|
|
||||||
format: 'image/png'
|
|
||||||
},
|
},
|
||||||
{
|
|
||||||
type: 'WMS',
|
|
||||||
layerName: 'china:yangjianghedian'
|
|
||||||
}
|
|
||||||
],
|
|
||||||
view: {
|
|
||||||
extent: extent,
|
|
||||||
center: center,
|
|
||||||
zoom: 16,
|
|
||||||
minZoom: 14
|
|
||||||
}
|
|
||||||
}
|
|
||||||
this.map2 = this.loadMap.init(option);
|
|
||||||
|
|
||||||
//载入点位
|
showHistory() {
|
||||||
const markerOption = {
|
var _list = [[113.94755498147583, 22.565597285534384], [113.9468468782959, 22.563151110912802], [113.9487566111145, 22.56018995216036], [113.95017281747437, 22.55748628547335]]
|
||||||
markers: [{coordinates: this.center}],
|
console.log(_list)
|
||||||
source: 'EPSG:4326', //源坐标系
|
|
||||||
destination: 'EPSG:3857', //目标坐标系
|
},
|
||||||
style: new ol.style.Style({
|
clearPointsLayers() {
|
||||||
image: new ol.style.Icon({
|
this.coordinate = []
|
||||||
src: this.icon
|
this.map.removeLayer(this.pointLayer);
|
||||||
})
|
this.pointLayer = {};
|
||||||
|
if (Object.keys(this.pointLayer).length == 0) {
|
||||||
|
// 创建图层
|
||||||
|
this.pointLayer = new VectorLayer({
|
||||||
|
source: new VectorSource(),
|
||||||
|
});
|
||||||
|
// 图层添加到地图上
|
||||||
|
this.map.addLayer(this.pointLayer);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
initMap() {
|
||||||
|
|
||||||
|
this.geometryMove = new Point(this.route.getFirstCoordinate());
|
||||||
|
|
||||||
|
this.featureMove = new Feature({
|
||||||
|
type: "featureMove",
|
||||||
|
geometry: this.geometryMove,
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(this.route)
|
||||||
|
|
||||||
|
this.vectorLayer = new VectorLayer({
|
||||||
|
source: new VectorSource({
|
||||||
|
features: [
|
||||||
|
new Feature({
|
||||||
|
type: "route",
|
||||||
|
geometry: this.route,
|
||||||
}),
|
}),
|
||||||
}
|
this.featureMove,
|
||||||
this.loadMap.loadMarkerFromData(markerOption);
|
new Feature({
|
||||||
|
type: "icon",
|
||||||
|
geometry: new Point(this.route.getFirstCoordinate()),
|
||||||
|
}),
|
||||||
|
new Feature({
|
||||||
|
type: "icon",
|
||||||
|
geometry: new Point(this.route.getLastCoordinate()),
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
style: (feature) => {
|
||||||
|
return this.styles[feature.get("type")];
|
||||||
},
|
},
|
||||||
queryAllEquipment(){
|
});
|
||||||
service.get(`/sys/equipment/pageList`,{
|
|
||||||
params:{
|
const wmsLayer = new TileLayer({
|
||||||
pageNo:1,
|
source: new TileWMS({
|
||||||
pageSize:50
|
// 设置 Geoserver 服务的 URL
|
||||||
|
url: process.env.VUE_APP_MAP_URL + "/wms",
|
||||||
|
// 设置请求参数
|
||||||
|
params: {
|
||||||
|
// 指定要获取的图层名称
|
||||||
|
LAYERS: "china:yangjianghedian",
|
||||||
|
// 设置为平铺模式获取
|
||||||
|
TILED: true
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
this.map = new Map({
|
||||||
|
target: "map",
|
||||||
|
layers: [
|
||||||
|
new TileLayer({
|
||||||
|
source: new XYZ({
|
||||||
|
url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
wmsLayer
|
||||||
|
],
|
||||||
|
|
||||||
|
view: new View({
|
||||||
|
projection: "EPSG:4326",
|
||||||
|
center: [112.26173, 21.70896],
|
||||||
|
zoom: 15,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
// this.map.addLayer(this.vectorLayer);
|
||||||
},
|
},
|
||||||
queryAlarmList(){
|
/**
|
||||||
service.get(`/api/alarm/list`,{
|
* 点击地图添加摄像头要素
|
||||||
params:{
|
*/
|
||||||
sendStatus:1,
|
clickMap() {
|
||||||
pageNo:1,
|
|
||||||
pageSize:50
|
this.map.on("click", (e) => {
|
||||||
|
if (this.canAddPoints) {
|
||||||
|
this.addPoints(e.coordinate);
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
planningPath() {
|
||||||
|
|
||||||
|
axios({
|
||||||
|
method: "post",
|
||||||
|
url: process.env.VUE_APP_MAP_URL + "/wfs?authkey=" + process.env.VUE_APP_MAP_AUTHKEY,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'text/xml'
|
||||||
|
},
|
||||||
|
data: `<GetFeature xmlns="http://www.opengis.net/wfs" service="WFS" version="1.1.0"
|
||||||
|
outputFormat="application/json"
|
||||||
|
viewParams="points:12496603.063359383#2476576.2207514597@12497163.153583003#2477213.6636166913@12497590.025377853#2477169.2574819643@12497545.869867127#2477020.727166339@12496603.063359383#2476576.2207514597"
|
||||||
|
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||||
|
xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd">
|
||||||
|
<Query typeName="china:planning-path" xmlns:china="www.shgis.com"/>
|
||||||
|
</GetFeature>`,
|
||||||
|
}).then(res => {
|
||||||
|
// console.log(res.data.features)
|
||||||
|
|
||||||
|
let pathList = [];
|
||||||
|
res.data.features.map((item, index) => {
|
||||||
|
pathList.push(item.geometry.coordinates[0])
|
||||||
|
pathList.push(item.geometry.coordinates[1])
|
||||||
|
// console.log(item.geometry.coordinates[0])
|
||||||
|
// console.log(item.geometry.coordinates[0])
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|
||||||
|
const route = new LineString(pathList)
|
||||||
|
|
||||||
|
const geometryMove = new Point(route.getFirstCoordinate());
|
||||||
|
|
||||||
|
const featureMove = new Feature({
|
||||||
|
type: "featureMove",
|
||||||
|
geometry: geometryMove,
|
||||||
|
});
|
||||||
|
|
||||||
|
const vectorLayer = new VectorLayer({
|
||||||
|
source: new VectorSource({
|
||||||
|
features: [
|
||||||
|
new Feature({
|
||||||
|
type: "route",
|
||||||
|
geometry: route,
|
||||||
|
}),
|
||||||
|
featureMove,
|
||||||
|
new Feature({
|
||||||
|
type: "icon",
|
||||||
|
geometry: new Point(route.getFirstCoordinate()),
|
||||||
|
}),
|
||||||
|
new Feature({
|
||||||
|
type: "icon",
|
||||||
|
geometry: new Point(route.getLastCoordinate()),
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
style: (feature) => {
|
||||||
|
return this.styles[feature.get("type")];
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(route.getFirstCoordinate())
|
||||||
|
console.log(route.getLastCoordinate())
|
||||||
|
this.map.addLayer(vectorLayer)
|
||||||
|
})
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 根据经纬度坐标添加摄像头要素
|
||||||
|
*/
|
||||||
|
addPoints(coordinate) {
|
||||||
|
console.log(coordinate)
|
||||||
|
if (this.selectPoint.length > 0) {
|
||||||
|
|
||||||
|
this.coordinate = []
|
||||||
|
this.map.removeLayer(this.pointLayer);
|
||||||
|
this.pointLayer = {};
|
||||||
|
if (Object.keys(this.pointLayer).length == 0) {
|
||||||
|
// 创建图层
|
||||||
|
this.pointLayer = new VectorLayer({
|
||||||
|
source: new VectorSource(),
|
||||||
|
});
|
||||||
|
// 图层添加到地图上
|
||||||
|
this.map.addLayer(this.pointLayer);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
this.selectPoint = coordinate;
|
||||||
|
this.coordinate = coordinate;
|
||||||
|
console.log(JSON.stringify(this.coordinate))
|
||||||
|
if (Object.keys(this.pointLayer).length == 0) {
|
||||||
|
// 创建图层
|
||||||
|
this.pointLayer = new VectorLayer({
|
||||||
|
source: new VectorSource(),
|
||||||
|
});
|
||||||
|
// 图层添加到地图上
|
||||||
|
this.map.addLayer(this.pointLayer);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 创建feature要素，一个feature就是一个点坐标信息
|
||||||
|
const feature = new Feature({
|
||||||
|
geometry: new Point(coordinate),
|
||||||
|
});
|
||||||
|
// 设置要素的图标
|
||||||
|
feature.setStyle(
|
||||||
|
new Style({
|
||||||
|
// 设置图片效果
|
||||||
|
image: new Icon({
|
||||||
|
src: getStatisFileUrl("/map/icon_paishuibeng_h_2.png"),
|
||||||
|
// anchor: [0.5, 0.5],
|
||||||
|
scale: 0.4,
|
||||||
|
}),
|
||||||
|
})
|
||||||
|
);
|
||||||
|
// 要素添加到地图图层上
|
||||||
|
|
||||||
|
this.pointLayer.getSource().addFeature(feature);
|
||||||
|
|
||||||
|
// 设置文字信息
|
||||||
|
// this.addText(coordinate);
|
||||||
|
},
|
||||||
|
addText(coordinate) {
|
||||||
|
const overlayBox = document.getElementById("overlay-box"); //获取一个div
|
||||||
|
const oSpan = document.createElement("span"); //创建一个span
|
||||||
|
oSpan.contentEditable = true; //设置文字是否可编辑
|
||||||
|
oSpan.id = coordinate[0]; //创建一个id
|
||||||
|
let pText = document.createTextNode("摄像头" + coordinate[0].toFixed(2)); //创建span的文本信息
|
||||||
|
oSpan.appendChild(pText); //将文本信息添加到span
|
||||||
|
overlayBox.appendChild(oSpan); //将span添加到div中
|
||||||
|
let textInfo = new Overlay({
|
||||||
|
position: coordinate, //设置位置
|
||||||
|
element: document.getElementById(coordinate[0]),
|
||||||
|
offset: [-25, 30], //设置偏移
|
||||||
|
});
|
||||||
|
this.map.addOverlay(textInfo);
|
||||||
|
},
|
||||||
|
|
||||||
|
moveFeature(e) {
|
||||||
|
let time = e.frameState.time;
|
||||||
|
this.distance =
|
||||||
|
(this.distance + (this.speed * (time - this.lastTime)) / 1000) % 1; //%2表示：起止止起；%1表示：起止起止
|
||||||
|
|
||||||
|
this.lastTime = time;
|
||||||
|
|
||||||
|
const currentCoordinate = this.route.getCoordinateAt(
|
||||||
|
this.distance > 1 ? 2 - this.distance : this.distance
|
||||||
|
);
|
||||||
|
this.geometryMove.setCoordinates(currentCoordinate);
|
||||||
|
const vectorContext = getVectorContext(e);
|
||||||
|
vectorContext.setStyle(this.styles.featureMove);
|
||||||
|
vectorContext.drawGeometry(this.geometryMove);
|
||||||
|
this.map.render();
|
||||||
|
},
|
||||||
|
startAnimation() {
|
||||||
|
this.lastTime = Date.now();
|
||||||
|
this.vectorLayer.on("postrender", this.moveFeature);
|
||||||
|
this.featureMove.setGeometry(null); //必须用null，不能用{}
|
||||||
|
},
|
||||||
|
|
||||||
|
stopAnimation() {
|
||||||
|
this.featureMove.setGeometry(this.geometryMove);
|
||||||
|
this.vectorLayer.un("postrender", this.moveFeature);
|
||||||
},
|
},
|
||||||
addAlarmPointNextAction() {
|
addAlarmPointNextAction() {
|
||||||
if(this.selectPoint.length==0){
|
if (this.selectPoint.length == 0) {
|
||||||
Dialog({ message: '请先选择点位' });
|
Dialog({message: '请先选择点位'});
|
||||||
}
|
}
|
||||||
const result = JSON.stringify(this.selectPoint)
|
const result = JSON.stringify(this.selectPoint)
|
||||||
location.href = "uniwebview://action?function=addAlarmPoint¶ms1=" + result;
|
location.href = "uniwebview://action?function=addAlarmPoint¶ms1=" + result;
|
||||||
},
|
},
|
||||||
PageAddAlarmPoint() {
|
pcPlanningPath() {
|
||||||
//获取点击的点位信息
|
//https://blog.csdn.net/Raccon_/article/details/127491268
|
||||||
const _this = this;
|
|
||||||
const element = document.getElementById('icon');
|
console.log("pcPlanningPath")
|
||||||
element.style.display="block"
|
// const interaction = this.map
|
||||||
const popup = new ol.Overlay({
|
// .getInteractions()
|
||||||
element: element,
|
// .getArray()
|
||||||
positioning: 'bottom-center',
|
// .find(interaction => {
|
||||||
stopEvent: false,
|
// return interaction instanceof ol.interaction.DoubleClickZoom;
|
||||||
|
// });
|
||||||
|
// // 移除原始地图双击事件
|
||||||
|
// this.map.removeInteraction(interaction);
|
||||||
|
|
||||||
|
|
||||||
|
// 矢量地图源
|
||||||
|
let vectorSource = new VectorSource();
|
||||||
|
// 矢量地图
|
||||||
|
this.drawPlanningPathLayer = new VectorLayer({
|
||||||
|
source: vectorSource,
|
||||||
|
style: new Style({
|
||||||
|
stroke: new Stroke({
|
||||||
|
width: 6,
|
||||||
|
color: [237, 212, 0, 0.8],
|
||||||
|
}),
|
||||||
|
})
|
||||||
});
|
});
|
||||||
this.map2.addOverlay(popup);
|
|
||||||
this.map2.on('singleclick', function (evt) {
|
let modify = new interaction.Modify({
|
||||||
popup.setPosition(evt.coordinate);
|
source: vectorSource
|
||||||
_this.selectPoint = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
|
});
|
||||||
|
|
||||||
|
this.map.addInteraction(modify);
|
||||||
|
|
||||||
|
// 绘制图形类型
|
||||||
|
// Point 点
|
||||||
|
// LineString 线
|
||||||
|
// Polygon 多边形
|
||||||
|
// Circle 圆
|
||||||
|
|
||||||
|
this.draw = new interaction.Draw({
|
||||||
|
source: vectorSource,
|
||||||
|
type: this.pcDrawType
|
||||||
|
});
|
||||||
|
|
||||||
|
this.map.addInteraction(this.draw);
|
||||||
|
|
||||||
|
// 创建一个Snap控件，并加入到Map对象中
|
||||||
|
this.snap = new interaction.Snap({
|
||||||
|
source: vectorSource
|
||||||
|
});
|
||||||
|
this.map.addLayer(this.drawPlanningPathLayer);
|
||||||
|
|
||||||
|
this.map.addInteraction(this.snap);
|
||||||
|
|
||||||
|
this.draw.on('drawend', (e) => {
|
||||||
|
Dialog.confirm({
|
||||||
|
title: '绘制完成',
|
||||||
|
message: '取消则会重新绘制',
|
||||||
|
})
|
||||||
|
.then(() => {
|
||||||
|
// on confirm
|
||||||
|
console.log(this.drawPlanningPathLayer.getSource().getFeatures())
|
||||||
|
const featureGeoJson = JSON.parse(new GeoJSON().writeFeature(e.feature))
|
||||||
|
console.log(featureGeoJson.geometry.coordinates)
|
||||||
|
|
||||||
|
window.parent.postMessage(JSON.stringify(featureGeoJson.geometry.coordinates), "*");
|
||||||
|
|
||||||
|
})
|
||||||
|
.catch(() => {
|
||||||
|
// on cancel
|
||||||
|
this.drawPlanningPathLayer.getSource().clear();
|
||||||
|
// this.map.removeLayer(this.drawPlanningPathLayer)
|
||||||
|
// this.map.addLayer(this.drawPlanningPathLayer)
|
||||||
|
});
|
||||||
|
// this.map.removeInteraction(draw); // 在此处清除交互会触发地图默认的双击放大
|
||||||
|
});
|
||||||
|
|
||||||
|
},
|
||||||
|
clearPcPlanningPath() {
|
||||||
|
|
||||||
|
},
|
||||||
|
queryAllEquipment() {
|
||||||
|
service.get(`/sys/equipment/pageList`, {
|
||||||
|
params: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 50
|
||||||
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
queryAlarmList() {
|
||||||
|
service.get(`/api/alarm/list`, {
|
||||||
|
params: {
|
||||||
|
sendStatus: 1,
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 50
|
||||||
}
|
}
|
||||||
}
|
})
|
||||||
|
},
|
||||||
|
switchFullScreen() {
|
||||||
|
location.href = "uniwebview://action?function=switchBigScreen"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less">
|
||||||
|
// 非核心已删除
|
||||||
|
#content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
#map {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-touch .ol-control button {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.actionList {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0px;
|
||||||
|
left: 0px;
|
||||||
|
height: 200px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-around;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.addAlarmPoint {
|
.addAlarmPoint {
|
||||||
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
@@ -163,24 +548,33 @@ export default {
|
|||||||
color: white;
|
color: white;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
<style>
|
.pcPlanningPath {
|
||||||
@import '~plot-ol/ol.css';
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
.ol-touch .ol-control button {
|
left: 0;
|
||||||
font-size: 26px;
|
width: 100%;
|
||||||
}
|
height: 30px;
|
||||||
|
display: flex;
|
||||||
.hd_map {
|
flex-direction: row;
|
||||||
width: 100vw;
|
justify-content: center;
|
||||||
height: 100vh;
|
z-index: 100;
|
||||||
position: absolute;
|
|
||||||
}
|
.pcPlanningPathNext {
|
||||||
|
width: 80%;
|
||||||
#map2 {
|
height: 30px;
|
||||||
width: 100vw;
|
line-height: 30px;
|
||||||
height: 100vh;
|
background-color: #369FFF;
|
||||||
}
|
border-radius: 20px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.mobileHomePageExpandBtn {
|
||||||
|
position: fixed;
|
||||||
|
top: 20px;
|
||||||
|
right: 30px;
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
299
hd-glasses-app/src/pages/hd_map2.vue
Normal file
299
hd-glasses-app/src/pages/hd_map2.vue
Normal file
@@ -0,0 +1,299 @@
|
|||||||
|
<template>
|
||||||
|
<div class="hd_map">
|
||||||
|
<div id="icon" style="display: none"><img style="width: 40px;height: 40px"
|
||||||
|
src="../assets/map/icon_paishuibeng_h_3.png"></div>
|
||||||
|
<div id="map2" ref="roadmap" style="width: 100%;height: 100%">
|
||||||
|
</div>
|
||||||
|
<div class="addAlarmPoint" v-if="page=='addAlarmPoint'">
|
||||||
|
<div class="addAlarmPointNext" @click="addAlarmPointNextAction">下一步</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import {OL as ol, api, PlottingLayer, FeatureOperatorEvent, PlotTypes,TrackingLayer} from 'plot-ol/plottingol'
|
||||||
|
import {Notify, Dialog} from 'vant';
|
||||||
|
import service from "../utils/service"
|
||||||
|
import axios from "axios";
|
||||||
|
import {Circle, Fill, Icon, Stroke, Style} from "ol/style";
|
||||||
|
import {Feature} from "ol";
|
||||||
|
import {Point} from "ol/geom";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "hd_map",
|
||||||
|
data() {
|
||||||
|
// const loadMap = new api.LoadMap("http://172.16.2.2:8600/geoserver", "30efbafe-d218-4d77-8200-0207246924be");
|
||||||
|
const loadMap = new api.LoadMap(process.env.VUE_APP_MAP_URL, process.env.VUE_APP_MAP_AUTHKEY);
|
||||||
|
return {
|
||||||
|
map2: null,
|
||||||
|
loadMap: loadMap,
|
||||||
|
selectPoint: [], //选择的点位
|
||||||
|
center: [12497018.585823221, 2476783.2447665134],
|
||||||
|
icon: require("../assets/map.png"),
|
||||||
|
page: null,
|
||||||
|
styles: {
|
||||||
|
route: new ol.style.Style({
|
||||||
|
stroke: new ol.style.Stroke({
|
||||||
|
width: 6,
|
||||||
|
color: [237, 212, 0, 0.8],
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
icon: new ol.style.Style({
|
||||||
|
image: new Icon({
|
||||||
|
anchor: [0.5, 1],
|
||||||
|
src: "https://openlayers.org/en/v4.6.5/examples/data/icon.png",
|
||||||
|
scale: 1, //设置大小
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
featureMove: new ol.style.Style({
|
||||||
|
image: new ol.style.Circle({
|
||||||
|
radius: 7,
|
||||||
|
fill: new ol.style.Fill({color: "black"}),
|
||||||
|
stroke: new ol.style.Stroke({
|
||||||
|
color: "white",
|
||||||
|
width: 2,
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
console.log(process.env.NODE_ENV)
|
||||||
|
console.log(process.env.NODE_ENV)
|
||||||
|
console.log(process.env.NODE_ENV)
|
||||||
|
console.log(process.env.NODE_ENV)
|
||||||
|
console.log(process.env.NODE_ENV)
|
||||||
|
console.log(this.$route.query.page)
|
||||||
|
this.page = this.$route.query.page;
|
||||||
|
|
||||||
|
this.init();
|
||||||
|
switch (this.page) {
|
||||||
|
case "addAlarmPoint":
|
||||||
|
console.log("新增报警点");
|
||||||
|
this.PageAddAlarmPoint()
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
console.log("未匹配到page参数")
|
||||||
|
this.planningPath()
|
||||||
|
// this.queryAlarmList()
|
||||||
|
// this.queryAllEquipment()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init() {
|
||||||
|
// console.log(this.$utils.getUrlParam("page"))
|
||||||
|
//限制地图移动范围
|
||||||
|
const extent = [12482643.010892345, 2470943.170650934, 12505548.591601802, 2482396.032222487];
|
||||||
|
//地图中心点
|
||||||
|
let center = "ol.proj.transform([112.26173, 21.70896], 'EPSG:4326', 'EPSG:3857')"
|
||||||
|
center = [12497018.585823221, 2476783.2447665134];
|
||||||
|
// center = [12497590.025377853, 2477169.2574819643];
|
||||||
|
// 初始化地图参数
|
||||||
|
const option = {
|
||||||
|
target: 'map2',
|
||||||
|
layers: [
|
||||||
|
{
|
||||||
|
type: 'WMTS',
|
||||||
|
layerName: 'china:yangjianghedian_dt',
|
||||||
|
projection: 'EPSG:3857',
|
||||||
|
version: '1.0.0',
|
||||||
|
format: 'image/png'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: 'WMS',
|
||||||
|
layerName: 'china:yangjianghedian'
|
||||||
|
}
|
||||||
|
],
|
||||||
|
view: {
|
||||||
|
extent: extent,
|
||||||
|
center: center,
|
||||||
|
zoom: 16,
|
||||||
|
// minZoom: 14
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.map2 = this.loadMap.init(option);
|
||||||
|
|
||||||
|
//载入点位
|
||||||
|
const markerOption = {
|
||||||
|
markers: [{coordinates: this.center}],
|
||||||
|
source: 'EPSG:4326', //源坐标系
|
||||||
|
destination: 'EPSG:3857', //目标坐标系
|
||||||
|
style: new ol.style.Style({
|
||||||
|
image: new ol.style.Icon({
|
||||||
|
src: this.icon
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
}
|
||||||
|
this.loadMap.loadMarkerFromData(markerOption);
|
||||||
|
|
||||||
|
|
||||||
|
},
|
||||||
|
queryAllEquipment() {
|
||||||
|
service.get(`/sys/equipment/pageList`, {
|
||||||
|
params: {
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 50
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
queryAlarmList() {
|
||||||
|
service.get(`/api/alarm/list`, {
|
||||||
|
params: {
|
||||||
|
sendStatus: 1,
|
||||||
|
pageNo: 1,
|
||||||
|
pageSize: 50
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
addAlarmPointNextAction() {
|
||||||
|
if (this.selectPoint.length == 0) {
|
||||||
|
Dialog({message: '请先选择点位'});
|
||||||
|
}
|
||||||
|
const result = JSON.stringify(this.selectPoint)
|
||||||
|
location.href = "uniwebview://action?function=addAlarmPoint¶ms1=" + result;
|
||||||
|
},
|
||||||
|
PageAddAlarmPoint() {
|
||||||
|
//获取点击的点位信息
|
||||||
|
const _this = this;
|
||||||
|
const element = document.getElementById('icon');
|
||||||
|
element.style.display = "block"
|
||||||
|
const popup = new ol.Overlay({
|
||||||
|
element: element,
|
||||||
|
positioning: 'bottom-center',
|
||||||
|
stopEvent: false,
|
||||||
|
});
|
||||||
|
this.map2.addOverlay(popup);
|
||||||
|
this.map2.on('singleclick', function (evt) {
|
||||||
|
popup.setPosition(evt.coordinate);
|
||||||
|
_this.selectPoint = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
|
||||||
|
})
|
||||||
|
},
|
||||||
|
planningPath() {
|
||||||
|
|
||||||
|
axios({
|
||||||
|
method: "post",
|
||||||
|
url: process.env.VUE_APP_MAP_URL + "/wfs?authkey=" + process.env.VUE_APP_MAP_AUTHKEY,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'text/xml'
|
||||||
|
},
|
||||||
|
data: `<GetFeature xmlns="http://www.opengis.net/wfs" service="WFS" version="1.1.0"
|
||||||
|
outputFormat="application/json"
|
||||||
|
viewParams="points:12496603.063359383#2476576.2207514597@12497163.153583003#2477213.6636166913@12497590.025377853#2477169.2574819643@12497545.869867127#2477020.727166339@12496603.063359383#2476576.2207514597"
|
||||||
|
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||||
|
xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd">
|
||||||
|
<Query typeName="china:planning-path" xmlns:china="www.shgis.com"/>
|
||||||
|
</GetFeature>`,
|
||||||
|
}).then(res => {
|
||||||
|
// console.log(res.data.features)
|
||||||
|
|
||||||
|
let pathList = [];
|
||||||
|
const trackingLayer = new TrackingLayer(this.map2);
|
||||||
|
trackingLayer.addFeature('polygon')
|
||||||
|
|
||||||
|
res.data.features.map((item, index) => {
|
||||||
|
if(index==1){
|
||||||
|
trackingLayer.beginTrack(item.geometry.coordinates[0][0],item.geometry.coordinates[0][1])
|
||||||
|
}else {
|
||||||
|
item.geometry.coordinates.map(item1=>{
|
||||||
|
trackingLayer.updateTrack(item1[0],item1[1])
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
if (index < 50) {
|
||||||
|
pathList.push(item.geometry.coordinates[0])
|
||||||
|
pathList.push(item.geometry.coordinates[1])
|
||||||
|
}
|
||||||
|
// console.log(item.geometry.coordinates[0])
|
||||||
|
// console.log(item.geometry.coordinates[0])
|
||||||
|
})
|
||||||
|
return;
|
||||||
|
console.log(pathList)
|
||||||
|
|
||||||
|
const route = new ol.geom.LineString(pathList)
|
||||||
|
|
||||||
|
console.log(route)
|
||||||
|
console.log(route.getFirstCoordinate)
|
||||||
|
console.log(route.getLastCoordinate())
|
||||||
|
|
||||||
|
const geometryMove = new ol.geom.Point(route.getFirstCoordinate());
|
||||||
|
|
||||||
|
const featureMove = new ol.Feature({
|
||||||
|
type: "featureMove",
|
||||||
|
geometry: geometryMove,
|
||||||
|
});
|
||||||
|
|
||||||
|
const layer = new ol.layer.Vector({
|
||||||
|
source: new ol.source.Vector({
|
||||||
|
feature: [
|
||||||
|
new ol.Feature({
|
||||||
|
type: "route",
|
||||||
|
geometry: route
|
||||||
|
}),
|
||||||
|
featureMove,
|
||||||
|
new ol.Feature({
|
||||||
|
type: "icon",
|
||||||
|
geometry: new ol.geom.Point(route.getFirstCoordinate()),
|
||||||
|
}),
|
||||||
|
new ol.Feature({
|
||||||
|
type: "icon",
|
||||||
|
geometry: new ol.geom.Point(route.getLastCoordinate()),
|
||||||
|
}),
|
||||||
|
]
|
||||||
|
}),
|
||||||
|
style: (feature) => {
|
||||||
|
return this.styles[feature.get("type")];
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
this.map2.addLayer(layer)
|
||||||
|
console.warn(pathList)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.addAlarmPoint {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 100;
|
||||||
|
|
||||||
|
.addAlarmPointNext {
|
||||||
|
width: 80%;
|
||||||
|
height: 80px;
|
||||||
|
line-height: 80px;
|
||||||
|
background-color: #369FFF;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 26px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style>
|
||||||
|
@import '~plot-ol/ol.css';
|
||||||
|
|
||||||
|
.ol-touch .ol-control button {
|
||||||
|
font-size: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hd_map {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
#map2 {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
@@ -19,6 +19,9 @@
|
|||||||
<van-grid-item>
|
<van-grid-item>
|
||||||
<van-button size="mini" type="primary" @click="stopAnimation()">结束沿轨迹运动</van-button>
|
<van-button size="mini" type="primary" @click="stopAnimation()">结束沿轨迹运动</van-button>
|
||||||
</van-grid-item>
|
</van-grid-item>
|
||||||
|
<van-grid-item>
|
||||||
|
<van-button size="mini" type="primary" @click="planningPath()">planningPath</van-button>
|
||||||
|
</van-grid-item>
|
||||||
</van-grid>
|
</van-grid>
|
||||||
<br/>
|
<br/>
|
||||||
</div>
|
</div>
|
||||||
@@ -36,7 +39,13 @@ import { Icon, Fill, Stroke, Style, Circle } from "ol/style";
|
|||||||
import Overlay from "ol/Overlay";
|
import Overlay from "ol/Overlay";
|
||||||
import {Point, LineString} from "ol/geom.js";
|
import {Point, LineString} from "ol/geom.js";
|
||||||
import { getVectorContext } from "ol/render";
|
import { getVectorContext } from "ol/render";
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
import {OL as ol} from "plot-ol/plottingol";
|
||||||
export default {
|
export default {
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
@@ -44,7 +53,8 @@ export default {
|
|||||||
pointLayer: {},
|
pointLayer: {},
|
||||||
canAddPoints: false,
|
canAddPoints: false,
|
||||||
coordinate: [],
|
coordinate: [],
|
||||||
route: new LineString([[113.95113841271974,22.568523240293505],[113.94452944970705,22.563351941312792],[113.95188943124391,22.559317898954394],[113.94467965341188,22.555326771940233]]),
|
route: new LineString([[12496610.1929, 2476571.7426],[12496623.829, 2476586.2505]]),
|
||||||
|
route1: new LineString([[113.95113841271974,22.568523240293505],[113.94452944970705,22.563351941312792],[113.95188943124391,22.559317898954394],[113.94467965341188,22.555326771940233]]),
|
||||||
geometryMove: {},
|
geometryMove: {},
|
||||||
featureMove: {},
|
featureMove: {},
|
||||||
styles: {
|
styles: {
|
||||||
@@ -109,6 +119,9 @@ export default {
|
|||||||
type: "featureMove",
|
type: "featureMove",
|
||||||
geometry: this.geometryMove,
|
geometry: this.geometryMove,
|
||||||
});
|
});
|
||||||
|
|
||||||
|
console.log(this.route)
|
||||||
|
|
||||||
this.vectorLayer = new VectorLayer({
|
this.vectorLayer = new VectorLayer({
|
||||||
source: new VectorSource({
|
source: new VectorSource({
|
||||||
features: [
|
features: [
|
||||||
@@ -144,13 +157,13 @@ export default {
|
|||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
view: new View({
|
view: new View({
|
||||||
projection: "EPSG:4326",
|
projection: "EPSG:3857",
|
||||||
center: [113.948306, 22.562039],
|
center: [12497018.585823221, 2476783.2447665134],
|
||||||
zoom: 16,
|
zoom: 12,
|
||||||
}),
|
}),
|
||||||
});
|
});
|
||||||
|
|
||||||
this.map.addLayer(this.vectorLayer);
|
// this.map.addLayer(this.vectorLayer);
|
||||||
},
|
},
|
||||||
/**
|
/**
|
||||||
* 点击地图添加摄像头要素
|
* 点击地图添加摄像头要素
|
||||||
@@ -163,6 +176,72 @@ export default {
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
planningPath() {
|
||||||
|
|
||||||
|
axios({
|
||||||
|
method: "post",
|
||||||
|
url: process.env.VUE_APP_MAP_URL + "/wfs?authkey=" + process.env.VUE_APP_MAP_AUTHKEY,
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'text/xml'
|
||||||
|
},
|
||||||
|
data: `<GetFeature xmlns="http://www.opengis.net/wfs" service="WFS" version="1.1.0"
|
||||||
|
outputFormat="application/json"
|
||||||
|
viewParams="points:12496603.063359383#2476576.2207514597@12497163.153583003#2477213.6636166913@12497590.025377853#2477169.2574819643@12497545.869867127#2477020.727166339@12496603.063359383#2476576.2207514597"
|
||||||
|
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
|
||||||
|
xsi:schemaLocation="http://www.opengis.net/wfs http://schemas.opengis.net/wfs/1.1.0/wfs.xsd">
|
||||||
|
<Query typeName="china:planning-path" xmlns:china="www.shgis.com"/>
|
||||||
|
</GetFeature>`,
|
||||||
|
}).then(res => {
|
||||||
|
// console.log(res.data.features)
|
||||||
|
|
||||||
|
let pathList=[];
|
||||||
|
res.data.features.map((item,index) => {
|
||||||
|
if(index<50){
|
||||||
|
pathList.push(item.geometry.coordinates[0])
|
||||||
|
pathList.push(item.geometry.coordinates[1])
|
||||||
|
}
|
||||||
|
// console.log(item.geometry.coordinates[0])
|
||||||
|
// console.log(item.geometry.coordinates[0])
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
const route=new LineString(pathList)
|
||||||
|
|
||||||
|
const geometryMove = new Point(route.getFirstCoordinate());
|
||||||
|
|
||||||
|
const featureMove = new Feature({
|
||||||
|
type: "featureMove",
|
||||||
|
geometry: geometryMove,
|
||||||
|
});
|
||||||
|
|
||||||
|
const vectorLayer = new VectorLayer({
|
||||||
|
source: new VectorSource({
|
||||||
|
features: [
|
||||||
|
new Feature({
|
||||||
|
type: "route",
|
||||||
|
geometry: route,
|
||||||
|
}),
|
||||||
|
featureMove,
|
||||||
|
new Feature({
|
||||||
|
type: "icon",
|
||||||
|
geometry: new Point(route.getFirstCoordinate()),
|
||||||
|
}),
|
||||||
|
new Feature({
|
||||||
|
type: "icon",
|
||||||
|
geometry: new Point(route.getLastCoordinate()),
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
style: (feature) => {
|
||||||
|
return this.styles[feature.get("type")];
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log(route.getFirstCoordinate())
|
||||||
|
console.log(route.getLastCoordinate())
|
||||||
|
this.map.addLayer(vectorLayer)
|
||||||
|
})
|
||||||
|
},
|
||||||
/**
|
/**
|
||||||
* 根据经纬度坐标添加摄像头要素
|
* 根据经纬度坐标添加摄像头要素
|
||||||
*/
|
*/
|
||||||
@@ -267,11 +346,25 @@ export default {
|
|||||||
bottom: 0px;
|
bottom: 0px;
|
||||||
left: 0px;
|
left: 0px;
|
||||||
height: 200px;
|
height: 200px;
|
||||||
width: 100%;
|
width: 100vw;
|
||||||
|
|
||||||
|
.addAlarmPoint {
|
||||||
|
width: 100%;
|
||||||
|
height: 100px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
justify-content: space-around;
|
justify-content: center;
|
||||||
flex-wrap: wrap;
|
z-index: 100;
|
||||||
|
|
||||||
|
.addAlarmPointNext {
|
||||||
|
width: 80%;
|
||||||
|
height: 80px;
|
||||||
|
line-height: 80px;
|
||||||
|
background-color: #369FFF;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 26px;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -16,11 +16,11 @@ const router = new Router({
|
|||||||
path: '/map',
|
path: '/map',
|
||||||
name: 'map',
|
name: 'map',
|
||||||
component: () => import('../pages/map.vue') //路由懒加载(按需加载)
|
component: () => import('../pages/map.vue') //路由懒加载(按需加载)
|
||||||
}, {
|
},{
|
||||||
path: '/call_room',
|
path: '/call_room',
|
||||||
name: 'call_room',
|
name: 'call_room',
|
||||||
component: () => import('../pages/call_room.vue')
|
component: () => import('../pages/call_room.vue')
|
||||||
}, {
|
},{
|
||||||
path: '/hd_map',
|
path: '/hd_map',
|
||||||
name: 'hd_map',
|
name: 'hd_map',
|
||||||
component: () => import('../pages/hd_map.vue')
|
component: () => import('../pages/hd_map.vue')
|
||||||
|
|||||||
@@ -1,9 +1,13 @@
|
|||||||
|
export function getStatisFileUrl(file){
|
||||||
|
return process.env.VUE_APP_STATIC_FILE_Prefix+file
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* getUrlKey 截取地址栏参数
|
* getUrlKey 截取地址栏参数
|
||||||
* @param value
|
* @param value
|
||||||
* @returns {String}
|
* @returns {String}
|
||||||
*/
|
*/
|
||||||
const getUrlParam = (name) => {
|
export function getUrlParam(name) {
|
||||||
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
|
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
|
||||||
let url = window.location.href.split('#')[0];
|
let url = window.location.href.split('#')[0];
|
||||||
let search = url.split('?')[1];
|
let search = url.split('?')[1];
|
||||||
@@ -18,6 +22,22 @@ const getUrlParam = (name) => {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export function appInit(ms) {
|
||||||
getUrlParam,
|
return new Promise((resolve, reject) => {
|
||||||
};
|
var i = 0;
|
||||||
|
let timer = setInterval(() => {
|
||||||
|
var hd_token = localStorage.getItem("hd_token")
|
||||||
|
i = i + 1;
|
||||||
|
if (i > 10) {
|
||||||
|
reject("error")
|
||||||
|
}
|
||||||
|
if (hd_token) {
|
||||||
|
clearInterval(timer)
|
||||||
|
timer = null
|
||||||
|
resolve("ok")
|
||||||
|
}
|
||||||
|
}, ms);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -11,8 +11,7 @@ let service = axios.create({
|
|||||||
// 添加请求拦截器（Interceptors）
|
// 添加请求拦截器（Interceptors）
|
||||||
service.interceptors.request.use(function (config) {
|
service.interceptors.request.use(function (config) {
|
||||||
// 发送请求之前做写什么
|
// 发送请求之前做写什么
|
||||||
let token = localStorage.getItem("token");
|
let token = localStorage.getItem("hd_token");
|
||||||
token="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2OTc1NDg5NjUsInVzZXJuYW1lIjoiem56cTEifQ.-qgy6DGCWvMTJYE8rDPvABa7S-heeh_rb9Pf4WTxEe0"
|
|
||||||
// 如果有
|
// 如果有
|
||||||
if(token){
|
if(token){
|
||||||
// 放在请求头（token跟后端沟通，他需要什么该成什么就可以了）
|
// 放在请求头（token跟后端沟通，他需要什么该成什么就可以了）
|
||||||
|
|||||||
1
hs-im-server/.gitignore
vendored
1
hs-im-server/.gitignore
vendored
@@ -2,3 +2,4 @@
|
|||||||
/logs
|
/logs
|
||||||
/im-service/target
|
/im-service/target
|
||||||
/im-common/target
|
/im-common/target
|
||||||
|
/build
|
||||||
|
|||||||
@@ -91,6 +91,26 @@
|
|||||||
<orderEntry type="library" name="Maven: commons-logging:commons-logging:1.2" level="project" />
|
<orderEntry type="library" name="Maven: commons-logging:commons-logging:1.2" level="project" />
|
||||||
<orderEntry type="library" name="Maven: commons-codec:commons-codec:1.14" level="project" />
|
<orderEntry type="library" name="Maven: commons-codec:commons-codec:1.14" level="project" />
|
||||||
<orderEntry type="library" name="Maven: org.apache.commons:commons-lang3:3.12.0" level="project" />
|
<orderEntry type="library" name="Maven: org.apache.commons:commons-lang3:3.12.0" level="project" />
|
||||||
|
<orderEntry type="library" name="Maven: io.minio:minio:8.4.5" level="project" />
|
||||||
|
<orderEntry type="library" name="Maven: com.carrotsearch.thirdparty:simple-xml-safe:2.7.1" level="project" />
|
||||||
|
<orderEntry type="library" name="Maven: com.google.guava:guava:30.1.1-jre" level="project" />
|
||||||
|
<orderEntry type="library" name="Maven: com.google.guava:failureaccess:1.0.1" level="project" />
|
||||||
|
<orderEntry type="library" name="Maven: com.google.guava:listenablefuture:9999.0-empty-to-avoid-conflict-with-guava" level="project" />
|
||||||
|
<orderEntry type="library" name="Maven: com.google.code.findbugs:jsr305:3.0.2" level="project" />
|
||||||
|
<orderEntry type="library" name="Maven: org.checkerframework:checker-qual:3.8.0" level="project" />
|
||||||
|
<orderEntry type="library" name="Maven: com.google.errorprone:error_prone_annotations:2.5.1" level="project" />
|
||||||
|
<orderEntry type="library" name="Maven: com.google.j2objc:j2objc-annotations:1.3" level="project" />
|
||||||
|
<orderEntry type="library" name="Maven: com.fasterxml.jackson.core:jackson-annotations:2.11.1" level="project" />
|
||||||
|
<orderEntry type="library" name="Maven: com.fasterxml.jackson.core:jackson-core:2.11.1" level="project" />
|
||||||
|
<orderEntry type="library" name="Maven: com.fasterxml.jackson.core:jackson-databind:2.11.1" level="project" />
|
||||||
|
<orderEntry type="library" name="Maven: org.bouncycastle:bcprov-jdk15on:1.69" level="project" />
|
||||||
|
<orderEntry type="library" name="Maven: org.apache.commons:commons-compress:1.21" level="project" />
|
||||||
|
<orderEntry type="library" name="Maven: org.xerial.snappy:snappy-java:1.1.8.4" level="project" />
|
||||||
|
<orderEntry type="library" name="Maven: com.squareup.okhttp3:okhttp:4.9.0" level="project" />
|
||||||
|
<orderEntry type="library" name="Maven: com.squareup.okio:okio:2.8.0" level="project" />
|
||||||
|
<orderEntry type="library" name="Maven: org.jetbrains.kotlin:kotlin-stdlib-common:1.3.72" level="project" />
|
||||||
|
<orderEntry type="library" name="Maven: org.jetbrains.kotlin:kotlin-stdlib:1.3.72" level="project" />
|
||||||
|
<orderEntry type="library" name="Maven: org.jetbrains:annotations:13.0" level="project" />
|
||||||
<orderEntry type="library" name="Maven: ch.qos.logback:logback-classic:1.2.3" level="project" />
|
<orderEntry type="library" name="Maven: ch.qos.logback:logback-classic:1.2.3" level="project" />
|
||||||
<orderEntry type="library" name="Maven: org.slf4j:slf4j-api:1.7.30" level="project" />
|
<orderEntry type="library" name="Maven: org.slf4j:slf4j-api:1.7.30" level="project" />
|
||||||
<orderEntry type="library" name="Maven: ch.qos.logback:logback-core:1.2.3" level="project" />
|
<orderEntry type="library" name="Maven: ch.qos.logback:logback-core:1.2.3" level="project" />
|
||||||
@@ -115,9 +135,6 @@
|
|||||||
<orderEntry type="library" name="Maven: org.jboss.marshalling:jboss-marshalling-river:2.0.11.Final" level="project" />
|
<orderEntry type="library" name="Maven: org.jboss.marshalling:jboss-marshalling-river:2.0.11.Final" level="project" />
|
||||||
<orderEntry type="library" name="Maven: org.jboss.marshalling:jboss-marshalling:2.0.11.Final" level="project" />
|
<orderEntry type="library" name="Maven: org.jboss.marshalling:jboss-marshalling:2.0.11.Final" level="project" />
|
||||||
<orderEntry type="library" name="Maven: com.fasterxml.jackson.dataformat:jackson-dataformat-yaml:2.11.1" level="project" />
|
<orderEntry type="library" name="Maven: com.fasterxml.jackson.dataformat:jackson-dataformat-yaml:2.11.1" level="project" />
|
||||||
<orderEntry type="library" name="Maven: com.fasterxml.jackson.core:jackson-core:2.11.1" level="project" />
|
|
||||||
<orderEntry type="library" name="Maven: com.fasterxml.jackson.core:jackson-databind:2.11.1" level="project" />
|
|
||||||
<orderEntry type="library" name="Maven: com.fasterxml.jackson.core:jackson-annotations:2.11.1" level="project" />
|
|
||||||
<orderEntry type="library" name="Maven: net.bytebuddy:byte-buddy:1.10.13" level="project" />
|
<orderEntry type="library" name="Maven: net.bytebuddy:byte-buddy:1.10.13" level="project" />
|
||||||
<orderEntry type="library" name="Maven: org.jodd:jodd-bean:5.1.6" level="project" />
|
<orderEntry type="library" name="Maven: org.jodd:jodd-bean:5.1.6" level="project" />
|
||||||
<orderEntry type="library" name="Maven: org.jodd:jodd-core:5.1.6" level="project" />
|
<orderEntry type="library" name="Maven: org.jodd:jodd-core:5.1.6" level="project" />
|
||||||
|
|||||||
@@ -89,6 +89,23 @@
|
|||||||
<version>1.0.0-SNAPSHOT</version>
|
<version>1.0.0-SNAPSHOT</version>
|
||||||
</dependency>
|
</dependency>
|
||||||
|
|
||||||
|
|
||||||
|
<dependency>
|
||||||
|
<groupId>io.minio</groupId>
|
||||||
|
<artifactId>minio</artifactId>
|
||||||
|
<exclusions>
|
||||||
|
<exclusion>
|
||||||
|
<groupId>com.squareup.okhttp3</groupId>
|
||||||
|
<artifactId>okhttp</artifactId>
|
||||||
|
</exclusion>
|
||||||
|
</exclusions>
|
||||||
|
</dependency>
|
||||||
|
|
||||||
|
<dependency>
|
||||||
|
<groupId>com.squareup.okhttp3</groupId>
|
||||||
|
<artifactId>okhttp</artifactId>
|
||||||
|
</dependency>
|
||||||
|
|
||||||
</dependencies>
|
</dependencies>
|
||||||
|
|
||||||
<build>
|
<build>
|
||||||
|
|||||||
@@ -226,6 +226,25 @@
|
|||||||
<version>${feign.version}</version>
|
<version>${feign.version}</version>
|
||||||
</dependency>
|
</dependency>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- 对象存储 MinIO -->
|
||||||
|
<dependency>
|
||||||
|
<groupId>io.minio</groupId>
|
||||||
|
<artifactId>minio</artifactId>
|
||||||
|
<version>8.4.5</version>
|
||||||
|
<exclusions>
|
||||||
|
<exclusion>
|
||||||
|
<groupId>com.squareup.okhttp3</groupId>
|
||||||
|
<artifactId>okhttp</artifactId>
|
||||||
|
</exclusion>
|
||||||
|
</exclusions>
|
||||||
|
</dependency>
|
||||||
|
<dependency>
|
||||||
|
<groupId>com.squareup.okhttp3</groupId>
|
||||||
|
<artifactId>okhttp</artifactId>
|
||||||
|
<version>4.9.0</version>
|
||||||
|
</dependency>
|
||||||
|
|
||||||
</dependencies>
|
</dependencies>
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user