hsai/im-system
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

准备接入minIO

Browse Source
This commit is contained in:
luojie
2023-10-19 17:27:15 +08:00
parent 69983054dc
commit bf48ed20fc
21 changed files with 1942 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
hd-glasses-app/src/App.vue
View File

@@ -24,6 +24,5 @@ export default {
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

25
hd-glasses-app/src/assets/reset.css
View File

@@ -1,25 +0,0 @@
@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}
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}
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{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
address,cite,dfn,em,i,optgroup,var{font-style:normal}
table{border-collapse:collapse;border-spacing:0;text-align:left}
caption,th{text-align:inherit}
ul,ol,menu{list-style:none}
fieldset,img{border:0}
img,object,input,textarea,button,select{vertical-align:middle}
article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}
textarea{overflow:auto;resize:vertical}
input,textarea,button,select,a{outline:0 none;border: none;}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
mark{background-color:transparent}
a,ins,s,u,del{text-decoration:none}
sup,sub{vertical-align:baseline}
html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
a {color: #25a4bb;text-decoration: none;}

55
hd-glasses-app/src/pages/call_room.vue
View File

@@ -1,20 +1,26 @@
<template>
<div>
<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>
</template>
<script>
/* eslint-disable */
export default {
name: "call_room",
data() {
return {};
return {
value:"webrtc://119.45.242.222/live/livestream123",
};
},
mounted() {
// eslint-disable-next-line no-undef
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){
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>

640
hd-glasses-app/src/pages/hd_map.vue
View File

@@ -1,148 +1,533 @@
<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 id="content">
<div id="map" ref="map" style="width: 100vw; height: 100vh"/>
<div id="overlay-box"/>
<div class="addAlarmPoint" v-if="page=='addAlarmPoint'">
<div class="addAlarmPointNext" @click="addAlarmPointNextAction">下一步</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>
</template>
<script>
import {OL as ol, api, PlottingLayer, FeatureOperatorEvent, PlotTypes} from 'plot-ol/plottingol'
import { Notify,Dialog } from 'vant';
import service from "../utils/service"
import "ol/ol.css";
import TileLayer from "ol/layer/Tile";
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 {
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
map: {},
pointLayer: {},
canAddPoints: false,
coordinate: [],
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: {},
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() {
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();
this.initMap();
switch (this.page) {
case "addAlarmPoint":
console.log("新增报警点");
this.PageAddAlarmPoint()
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:
console.log("未匹配到page参数")
this.queryAlarmList()
this.queryAllEquipment()
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];
// 初始化地图参数
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);
PageAddAlarmPoint() {
this.canAddPoints = true;
this.clickMap();
},
//载入点位
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
})
showHistory() {
var _list = [[113.94755498147583, 22.565597285534384], [113.9468468782959, 22.563151110912802], [113.9487566111145, 22.56018995216036], [113.95017281747437, 22.55748628547335]]
console.log(_list)
},
clearPointsLayers() {
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);
}
},
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,
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")];
},
});
const wmsLayer = new TileLayer({
source: new TileWMS({
// 设置 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);
},
/**
* 点击地图添加摄像头要素
*/
clickMap() {
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);
}
this.loadMap.loadMarkerFromData(markerOption);
// 创建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);
},
queryAllEquipment(){
service.get(`/sys/equipment/pageList`,{
params:{
pageNo:1,
pageSize:50
}
})
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);
},
queryAlarmList(){
service.get(`/api/alarm/list`,{
params:{
sendStatus:1,
pageNo:1,
pageSize:50
}
})
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() {
if(this.selectPoint.length==0){
Dialog({ message: '请先选择点位' });
}
const result = JSON.stringify(this.selectPoint)
location.href = "uniwebview://action?function=addAlarmPoint&params1=" + result;
if (this.selectPoint.length == 0) {
Dialog({message: '请先选择点位'});
}
const result = JSON.stringify(this.selectPoint)
location.href = "uniwebview://action?function=addAlarmPoint&params1=" + 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,
pcPlanningPath() {
//https://blog.csdn.net/Raccon_/article/details/127491268
console.log("pcPlanningPath")
// const interaction = this.map
// .getInteractions()
// .getArray()
// .find(interaction => {
// 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) {
popup.setPosition(evt.coordinate);
_this.selectPoint = ol.proj.transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326');
let modify = new interaction.Modify({
source: vectorSource
});
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>
<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 {
position: fixed;
bottom: 0;
left: 0;
@@ -163,24 +548,33 @@ export default {
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;
}
.pcPlanningPath {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
display: flex;
flex-direction: row;
justify-content: center;
z-index: 100;
.pcPlanningPathNext {
width: 80%;
height: 30px;
line-height: 30px;
background-color: #369FFF;
border-radius: 20px;
font-size: 16px;
color: white;
}
}
.mobileHomePageExpandBtn {
position: fixed;
top: 20px;
right: 30px;
z-index: 100;
}
</style>

299
hd-glasses-app/src/pages/hd_map2.vue Normal file
View 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&params1=" + 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>

113
hd-glasses-app/src/pages/map.vue
View File

@@ -19,6 +19,9 @@
<van-grid-item>
<van-button size="mini" type="primary" @click="stopAnimation()">结束沿轨迹运动</van-button>
</van-grid-item>
<van-grid-item>
<van-button size="mini" type="primary" @click="planningPath()">planningPath</van-button>
</van-grid-item>
</van-grid>
<br/>
</div>
@@ -36,7 +39,13 @@ 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 {OL as ol} from "plot-ol/plottingol";
export default {
data() {
return {
@@ -44,7 +53,8 @@ export default {
pointLayer: {},
canAddPoints: false,
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: {},
featureMove: {},
styles: {
@@ -109,6 +119,9 @@ export default {
type: "featureMove",
geometry: this.geometryMove,
});
console.log(this.route)
this.vectorLayer = new VectorLayer({
source: new VectorSource({
features: [
@@ -144,13 +157,13 @@ export default {
}),
],
view: new View({
projection: "EPSG:4326",
center: [113.948306, 22.562039],
zoom: 16,
projection: "EPSG:3857",
center: [12497018.585823221, 2476783.2447665134],
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;
left: 0px;
height: 200px;
width: 100%;
width: 100vw;
display: flex;
flex-direction: row;
justify-content: space-around;
flex-wrap: wrap;
.addAlarmPoint {
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>

4
hd-glasses-app/src/router/index.js
View File

@@ -16,11 +16,11 @@ const router = new Router({
path: '/map',
name: 'map',
component: () => import('../pages/map.vue') //路由懒加载(按需加载)
}, {
},{
path: '/call_room',
name: 'call_room',
component: () => import('../pages/call_room.vue')
}, {
},{
path: '/hd_map',
name: 'hd_map',
component: () => import('../pages/hd_map.vue')

28
hd-glasses-app/src/utils/publicFun.js
View File

@@ -1,9 +1,13 @@
export function getStatisFileUrl(file){
return process.env.VUE_APP_STATIC_FILE_Prefix+file
}
/**
* getUrlKey 截取地址栏参数
* @param value
* @returns {String}
*/
const getUrlParam = (name) => {
export function getUrlParam(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)');
let url = window.location.href.split('#')[0];
let search = url.split('?')[1];
@@ -18,6 +22,22 @@ const getUrlParam = (name) => {
}
export default {
getUrlParam,
};
export function appInit(ms) {
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);
})
}

3
hd-glasses-app/src/utils/service.js
View File

@@ -11,8 +11,7 @@ let service = axios.create({
// 添加请求拦截器（Interceptors）
service.interceptors.request.use(function (config) {
// 发送请求之前做写什么
let token = localStorage.getItem("token");
token="eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2OTc1NDg5NjUsInVzZXJuYW1lIjoiem56cTEifQ.-qgy6DGCWvMTJYE8rDPvABa7S-heeh_rb9Pf4WTxEe0"
let token = localStorage.getItem("hd_token");
// 如果有
if(token){
// 放在请求头（token跟后端沟通，他需要什么该成什么就可以了）