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

地图优化

Browse Source
This commit is contained in:
rowger
2023-11-24 17:39:04 +08:00
parent 5a5f97c357
commit ca660f9513
11 changed files with 2225 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
hd-glasses-app/.env.hd
View File

@@ -3,5 +3,4 @@ VUE_APP_MAP_AUTHKEY='30efbafe-d218-4d77-8200-0207246924be'
VUE_APP_API="https://172.16.3.19/znzq" VUE_APP_API="https://172.16.3.19/znzq"
VUE_APP_STATIC_FILE_Prefix='//172.16.3.19/static_file' VUE_APP_STATIC_FILE_Prefix='//172.16.3.19/static_file'
VUE_APP_SRS_URL='webrtc://172.16.3.19/' VUE_APP_SRS_URL='webrtc://172.16.3.19/'
VUE_APP_IM_API_URL='https://172.16.3.19/im_api/v1' VUE_APP_IM_API_URL='https://172.16.3.19/im_api/v1'

1
hd-glasses-app/.env.prod
View File

@@ -3,5 +3,4 @@ VUE_APP_MAP_AUTHKEY='30efbafe-d218-4d77-8200-0207246924be'
VUE_APP_API="https://172.16.3.19/znzq" VUE_APP_API="https://172.16.3.19/znzq"
VUE_APP_STATIC_FILE_Prefix='//172.16.3.19/static_file' VUE_APP_STATIC_FILE_Prefix='//172.16.3.19/static_file'
VUE_APP_SRS_URL='webrtc://172.16.3.19/' VUE_APP_SRS_URL='webrtc://172.16.3.19/'
VUE_APP_IM_API_URL='https://172.16.3.19/im_api/v1' VUE_APP_IM_API_URL='https://172.16.3.19/im_api/v1'

2
hd-glasses-app/public/index.html
View File

@@ -3,7 +3,7 @@
<head> <head>
<script type="text/javascript" src="./vconsole.min.js"></script> <script type="text/javascript" src="./vconsole.min.js"></script>
<script> <script>
// var vConsole = new VConsole(); var vConsole = new VConsole();
console.log('Hello world'); console.log('Hello world');
</script> </script>
<meta charset="utf-8"> <meta charset="utf-8">

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

@@ -18,7 +18,9 @@
<div class="alarmDetailsOverlayWrapper" @click.stop> <div class="alarmDetailsOverlayWrapper" @click.stop>
<div class="alarmDetailsBox"> <div class="alarmDetailsBox">
<div class="title">{{ alarmDetailsData.title }}</div> <div class="title">{{ alarmDetailsData.title }}</div>
<div class="alarmDetailsBoxItem"><span>报警类型:</span><span>{{ alarmDetailsData.alarmCategory_dictText }}</span> <div class="alarmDetailsBoxItem"><span>报警类型:</span><span>{{
alarmDetailsData.alarmCategory_dictText
}}</span>
</div> </div>
<div class="alarmDetailsBoxItem"><span>报警时间:</span><span>{{ alarmDetailsData.createTime }}</span></div> <div class="alarmDetailsBoxItem"><span>报警时间:</span><span>{{ alarmDetailsData.createTime }}</span></div>
<div class="alarmDetailsBoxItem"><span>警情内容:</span><span>{{ alarmDetailsData.msgContent }}</span></div> <div class="alarmDetailsBoxItem"><span>警情内容:</span><span>{{ alarmDetailsData.msgContent }}</span></div>
@@ -125,7 +127,7 @@ export default {
planningVectorLayer: {}, planningVectorLayer: {},
parentPostMessageData: [], parentPostMessageData: [],
isCanDraw: true, isCanDraw: true,
from:"" from: ""
}; };
}, },
mounted() { mounted() {
@@ -136,7 +138,7 @@ export default {
this.from = getUrlParam("from"); this.from = getUrlParam("from");
this.token = getUrlParam("token") this.token = getUrlParam("token")
if (this.token !=null) { if (this.token != null) {
localStorage.setItem("hd_token", this.token) localStorage.setItem("hd_token", this.token)
} }
@@ -162,15 +164,16 @@ export default {
this.pcDrawType = "LineString"; this.pcDrawType = "LineString";
window.addEventListener('message', (event) => { window.addEventListener('message', (event) => {
this.isCanDraw = false this.isCanDraw = false
console.log(event.data)
if (this.parentPostMessageData.length == 0) { if (this.parentPostMessageData.length == 0) {
try { if (event.data instanceof Array) {
console.error(event.data)
}catch (e) {
}
this.map.removeLayer(this.drawPlanningPathLayer); this.map.removeLayer(this.drawPlanningPathLayer);
this.parentPostMessageData = event.data; this.parentPostMessageData = event.data;
this.drawPcPostMessageDataLayer() this.drawPcPostMessageDataLayer()
} else {
this.isCanDraw = true;
}
} }
}); });
//处理ok //处理ok
@@ -182,12 +185,12 @@ export default {
this.isCanDraw = false this.isCanDraw = false
if (this.parentPostMessageData.length == 0) { if (this.parentPostMessageData.length == 0) {
if(event.data instanceof Array){ if (event.data instanceof Array) {
this.map.removeLayer(this.drawPlanningPathLayer); this.map.removeLayer(this.drawPlanningPathLayer);
this.parentPostMessageData = event.data; this.parentPostMessageData = event.data;
this.drawPcPostMessageDataLayer() this.drawPcPostMessageDataLayer()
}else { } else {
this.isCanDraw=true; this.isCanDraw = true;
} }
} }
@@ -292,7 +295,6 @@ export default {
} }
var style = ''; var style = '';
var format = 'image/png'; var format = 'image/png';
var layerName = 'china:yangjianghedian_dt'; var layerName = 'china:yangjianghedian_dt';
@@ -307,7 +309,7 @@ export default {
'SERVICE': 'WMTS', 'SERVICE': 'WMTS',
'FORMAT': format 'FORMAT': format
}; };
var url = process.env.VUE_APP_MAP_URL + "/gwc/service/wmts?authkey=" + process.env.VUE_APP_MAP_AUTHKEY+"&" var url = process.env.VUE_APP_MAP_URL + "/gwc/service/wmts?authkey=" + process.env.VUE_APP_MAP_AUTHKEY + "&"
for (var param in params) { for (var param in params) {
if (baseParams.indexOf(param.toUpperCase()) < 0) { if (baseParams.indexOf(param.toUpperCase()) < 0) {
url = url + param + '=' + params[param] + '&'; url = url + param + '=' + params[param] + '&';
@@ -554,9 +556,9 @@ export default {
const result = JSON.stringify(center) const result = JSON.stringify(center)
if(this.from=="pc"){ if (this.from == "pc") {
window.parent.postMessage(result, "*"); window.parent.postMessage(result, "*");
}else { } else {
location.href = "uniwebview://action?function=addAlarmPoint&params1=" + result; location.href = "uniwebview://action?function=addAlarmPoint&params1=" + result;
} }
@@ -625,6 +627,7 @@ export default {
}) })
.then(() => { .then(() => {
if (this.pcDrawType == "Polygon") {
// on confirm // on confirm
const featureGeoJson = JSON.parse(new GeoJSON().writeFeature(e.feature)) const featureGeoJson = JSON.parse(new GeoJSON().writeFeature(e.feature))
@@ -642,6 +645,22 @@ export default {
window.parent.postMessage(JSON.stringify([pointList]), "*"); window.parent.postMessage(JSON.stringify([pointList]), "*");
} else if (this.pcDrawType == "LineString") {
// on confirm
const featureGeoJson = JSON.parse(new GeoJSON().writeFeature(e.feature))
let pointList = []
featureGeoJson.geometry.coordinates.map(item => {
const _item1 = ol.proj.transform(item, 'EPSG:3857', 'EPSG:4326');
pointList.push(_item1)
})
window.parent.postMessage(JSON.stringify(pointList), "*");
}
}) })
.catch(() => { .catch(() => {
// on cancel // on cancel
@@ -742,7 +761,7 @@ export default {
data: record, data: record,
type: 'alarm' type: 'alarm'
}); });
const alarmCategory_dictText=record.alarmCategory_dictText||"未知类型" const alarmCategory_dictText = record.alarmCategory_dictText || "未知类型"
//临时智慧所，小红旗 //临时智慧所，小红旗
if (record.alarmCategory == "1706273001850601474") { if (record.alarmCategory == "1706273001850601474") {
// 设置要素的图标 // 设置要素的图标
@@ -756,7 +775,7 @@ export default {
}), }),
text: new Text({ text: new Text({
testAlign: 'center', testAlign: 'center',
text: [_index.toString(), 'bold 16px sans-serif', '\n','',alarmCategory_dictText, 'italic 16px sans-serif'], text: [_index.toString(), 'bold 16px sans-serif', '\n', '', alarmCategory_dictText, 'italic 16px sans-serif'],
font: 'bold 20px 微软雅黑', font: 'bold 20px 微软雅黑',
fill: new Fill({ fill: new Fill({
color: '#ffa502', color: '#ffa502',
@@ -777,7 +796,7 @@ export default {
}), }),
text: new Text({ text: new Text({
testAlign: 'center', testAlign: 'center',
text: [_index.toString(), 'bold 16px sans-serif', '\n','',alarmCategory_dictText, 'italic 16px sans-serif'], text: [_index.toString(), 'bold 16px sans-serif', '\n', '', alarmCategory_dictText, 'italic 16px sans-serif'],
font: 'bold 20px 微软雅黑', font: 'bold 20px 微软雅黑',
fill: new Fill({ fill: new Fill({
color: '#ffa502', color: '#ffa502',
@@ -794,7 +813,7 @@ export default {
} }
//设备相关 //设备相关
if (type == 'equipment') { if (type == 'equipment') {
let alarmNum=record.alarmNum||0; let alarmNum = record.alarmNum || 0;
// 模拟数据 // 模拟数据
// record.isOnline="true"; // record.isOnline="true";
// alarmNum=0; // alarmNum=0;
@@ -824,7 +843,7 @@ export default {
}), }),
text: new Text({ text: new Text({
testAlign: 'center', testAlign: 'center',
text: [record.equipmentName, 'bold 16px sans-serif', '\n',''], text: [record.equipmentName, 'bold 16px sans-serif', '\n', ''],
font: 'bold 20px 微软雅黑', font: 'bold 20px 微软雅黑',
fill: new Fill({ fill: new Fill({
color: 'rgb(155, 155, 155)', color: 'rgb(155, 155, 155)',
@@ -837,7 +856,7 @@ export default {
if (record.isOnline == "true") { if (record.isOnline == "true") {
// 未接受告警数量为0，全部都接受 绿色 // 未接受告警数量为0，全部都接受 绿色
if(alarmNum==0){ if (alarmNum == 0) {
feature.setStyle( feature.setStyle(
new Style({ new Style({
// 设置图片效果 // 设置图片效果
@@ -848,7 +867,7 @@ export default {
}), }),
text: new Text({ text: new Text({
testAlign: 'center', testAlign: 'center',
text: [record.equipmentName, 'bold 16px sans-serif', '\n',''], text: [record.equipmentName, 'bold 16px sans-serif', '\n', ''],
font: 'bold 20px 微软雅黑', font: 'bold 20px 微软雅黑',
fill: new Fill({ fill: new Fill({
color: 'rgb(22, 206, 129)', color: 'rgb(22, 206, 129)',
@@ -857,7 +876,7 @@ export default {
}) })
); );
} }
if(alarmNum>0){ if (alarmNum > 0) {
feature.setStyle( feature.setStyle(
new Style({ new Style({
// 设置图片效果 // 设置图片效果
@@ -866,9 +885,9 @@ export default {
// anchor: [0.5, 0.5], // anchor: [0.5, 0.5],
scale: 0.4, scale: 0.4,
}), }),
text:new Text({ text: new Text({
testAlign: 'center', testAlign: 'center',
text: [record.equipmentName, 'bold 16px sans-serif', '\n','',`${alarmNum}条告警未接受`, 'bold 16px sans-serif',], text: [record.equipmentName, 'bold 16px sans-serif', '\n', '', `${alarmNum}条告警未接受`, 'bold 16px sans-serif',],
font: 'bold 16px 微软雅黑', font: 'bold 16px 微软雅黑',
fill: new Fill({ fill: new Fill({
color: 'rgb(54, 159, 255)', color: 'rgb(54, 159, 255)',

1228
hd-glasses-app/src/pages/hd_map_add_point.vue Normal file
View File

File diff suppressed because it is too large Load Diff

769
hd-glasses-app/src/pages/hd_map_patrol_line.vue Normal file
View File

@@ -0,0 +1,769 @@
<template>
<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="iconColorList" v-if="page=='mobileHomePage'&&pageType=='large'">
<div class="iconColorListItem"><span style="background-color: #FF0000"></span>报警点位</div>
<div class="iconColorListItem"><span style="background-color: #369FFF"></span>在线</div>
<div class="iconColorListItem"><span style="background-color: #9B9B9B"></span>离线</div>
<div class="iconColorListItem"><span style="background-color: #16CE81"></span>接收报警</div>
</div>
<van-overlay :show="alarmDetailsOverlay" @click="alarmDetailsOverlay = false" z-index="20">
<div class="alarmDetailsOverlayWrapper" @click.stop>
<div class="alarmDetailsBox">
<div class="title">{{ alarmDetailsData.title }}</div>
<div class="alarmDetailsBoxItem"><span>报警类型:</span><span>{{
alarmDetailsData.alarmCategory_dictText
}}</span>
</div>
<div class="alarmDetailsBoxItem"><span>报警时间:</span><span>{{ alarmDetailsData.createTime }}</span></div>
<div class="alarmDetailsBoxItem"><span>警情内容:</span><span>{{ alarmDetailsData.msgContent }}</span></div>
<div class="alarmDetailsBoxItem"><span>发布人:</span><span>{{ alarmDetailsData.sender }}</span></div>
<div class="alarmDetailsBoxItem"><span>关联设备:</span><span>内容</span></div>
</div>
<div class="btnList">
<div class="btnItem" @click="alarmClickAction(1)">确认</div>
<div class="btnItem" @click="alarmClickAction(2)">导航</div>
</div>
</div>
</van-overlay>
<!--
<div class="pcPlanningPath" v-if="page=='pcPlanningPath'">
<div class="pcPlanningPathNext" @click="clearPcPlanningPath">清空重新绘制</div>
</div>
-->
</div>
</template>
<script>
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, Text} from "ol/style";
import Overlay from "ol/Overlay";
import {Point, LineString, Polygon} from "ol/geom.js";
import {getVectorContext} from "ol/render";
import axios from "axios";
import TileWMS from "ol/source/TileWMS"
import WMTS from "ol/source/WMTS"
import TileGrid from "ol/tilegrid/TileGrid"
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, getUrlParam} from "../utils/publicFun";
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
import {get as getProjection} from 'ol/proj.js';
import {getTopLeft, getWidth} from 'ol/extent.js';
export default {
data() {
return {
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: "",
equipmentLayer: {},
alarmLayer: {},
alarmAnimation: null,
planningTargetPoint: [],
alarmDetailsOverlay: false,
alarmDetailsData: {
alarmCategory_dictText: ""
},
navigationStartPoint: [],
navigationEndPoint: [],
hd_gps_location: [],
pageType: "",
planningVectorLayer: {},
parentPostMessageData: [],
isCanDraw: true,
from: ""
};
},
mounted() {
console.log(location.href)
this.page = getUrlParam("page");
this.pageType = getUrlParam("type");
this.from = getUrlParam("from");
this.token = getUrlParam("token")
if (this.token != null) {
localStorage.setItem("hd_token", this.token)
}
setInterval(() => {
let hd_gps_location = localStorage.getItem("hd_gps_location")
if (hd_gps_location) {
hd_gps_location = hd_gps_location.split(",")
this.hd_gps_location = hd_gps_location
this.navigationStartPoint = this.hd_gps_location
}
}, 2000)
this.initMap();
switch (this.page) {
case "addAlarmPoint":
console.log("新增报警点");
//处理ok
this.PageAddAlarmPoint()
break
case "pcPlanningPath":
this.pcDrawType = "LineString";
window.addEventListener('message', (event) => {
this.isCanDraw = false
console.log(event.data)
if (this.parentPostMessageData.length == 0) {
if (event.data instanceof Array) {
this.drawPatrolRoute(event.data)
} else {
// this.isCanDraw = true;
}
}
});
if(this.pageType=="edit"){
this.PageAddAlarmPoint()
}
break
case "pcDrawArea":
this.pcDrawType = "Polygon"
window.addEventListener('message', (event) => {
this.isCanDraw = false
if (this.parentPostMessageData.length == 0) {
if (event.data instanceof Array) {
this.map.removeLayer(this.drawPlanningPathLayer);
this.parentPostMessageData = event.data;
this.drawPcPostMessageDataLayer()
} else {
this.isCanDraw = true;
}
}
});
//处理ok
this.pcPlanningPath();
break
case "planningPath":
// http://localhost:8080/hd-glasses-app/#/hd_map?page=planningPath&alarmId=1714938284919808002
if (this.$route.query.alarmId == null) {
console.error("告警id不可为空")
}
this.getAlarmDetails(this.$route.query.alarmId)
// this.planningPath()
break
case "mobileHomePage":
// http://localhost:8080/hd-glasses-app/#/hd_map?page=mobileHomePage
appInit(500).then((e) => {
console.log("获取到token，开始执行后续")
console.log(e)
this.queryAlarmList();
this.queryAllEquipment();
this.getAreaList()
setInterval(() => {
this.queryAlarmList();
}, 3500)
setInterval(() => {
this.queryAllEquipment();
}, 5000)
}).then((e) => {
console.error(e)
})
break
default:
console.log("未匹配到page参数")
// this.planningPath()
// this.queryAlarmList()
// this.queryAllEquipment()
}
},
methods: {
PageAddAlarmPoint() {
this.canAddPoints = true;
this.clickMap();
},
showHistory() {
var _list = [[113.94755498147583, 22.565597285534384], [113.9468468782959, 22.563151110912802], [113.9487566111145, 22.56018995216036], [113.95017281747437, 22.55748628547335]]
},
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() {
const wmsLayer_0 = new TileLayer({
source: new TileWMS({
// 设置 Geoserver 服务的 URL
url: process.env.VUE_APP_MAP_URL + "/wms",
params: {
LAYERS: "china:yangjianghedian",
TILED: true
}
})
});
const wmsLayer_1 = new TileLayer({
source: new TileWMS({
// 设置 Geoserver 服务的 URL
url: process.env.VUE_APP_MAP_URL + "/wms",
params: {
LAYERS: "china:yangjianghedian_dt",
TILED: true
}
})
});
// 切片方案（0-18级
const projection = getProjection('EPSG:3857');
const projectionExtent = projection.getExtent();
const size = getWidth(projectionExtent) / 256;
const resolutions = new Array(19);
const matrixIds = new Array(19);
for (let z = 0; z < 19; ++z) {
resolutions[z] = size / Math.pow(2, z);
matrixIds[z] = "EPSG:3857:" + z;
}
var style = '';
var format = 'image/png';
var layerName = 'china:yangjianghedian_dt';
let baseParams = ['VERSION', 'LAYER', 'STYLE', 'TILEMATRIX', 'TILEMATRIXSET', 'SERVICE', 'FORMAT'];
let params = {
'VERSION': '1.0.0',
'LAYER': layerName,
'STYLE': style,
'TILEMATRIX': matrixIds,
'TILEMATRIXSET': projection,
'SERVICE': 'WMTS',
'FORMAT': format
};
var url = process.env.VUE_APP_MAP_URL + "/gwc/service/wmts?authkey=" + process.env.VUE_APP_MAP_AUTHKEY + "&"
for (var param in params) {
if (baseParams.indexOf(param.toUpperCase()) < 0) {
url = url + param + '=' + params[param] + '&';
}
}
url = url.slice(0, -1);
const wmtsLayer_1 = new TileLayer({
opacity: 1, //图层透明度
source: new WMTS({
url: url,
layer: "china:yangjianghedian_dt",
matrixSet: 'EPSG:3857',
format: 'image/png', // 默认：'image/jpeg'
projection: projection,
tileGrid: new WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds,
}),
style: '',
wrapX: 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}",
// }),
// }),
wmtsLayer_1,
wmsLayer_0,
],
view: new View({
resolutions: resolutions,
projection: projection,
center: [12497018.585823221, 2476783.2447665134],
zoom: 16,
}),
});
this.map.on('singleclick', e => {
this.map.forEachFeatureAtPixel(
e.pixel,
(feature) => {
console.log("Feature被点击了")
console.log(feature)
if (feature.values_.type == 'alarm') {
this.alarmDetailsData = feature.values_.data;
this.alarmDetailsOverlay = true;
}
},
{
hitTolerance: 30
}
);
});
},
/**
* 点击地图添加摄像头要素
*/
clickMap() {
this.map.on("click", (e) => {
if (this.canAddPoints) {
this.addPoints(e.coordinate);
}
});
},
planningPath() {
const startPoint = ol.proj.transform(this.navigationStartPoint, 'EPSG:4326', 'EPSG:3857');
const endPoint = ol.proj.transform(this.navigationEndPoint, 'EPSG:4326', 'EPSG:3857');
console.log(startPoint)
console.log(endPoint)
const _points = `${startPoint[0]}#${startPoint[1]}@${endPoint[0]}#${endPoint[1]}`
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:${_points}"
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("================================获取到了导航结果")
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,
});
// this.planningVectorLayer.set('id', 'planningVectorLayer');
//先清空 再清除
this.map.removeLayer(this.planningVectorLayer)
this.planningVectorLayer = 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")];
},
});
this.map.addLayer(this.planningVectorLayer)
})
},
/**
* 根据经纬度坐标添加摄像头要素
*/
addPoints(coordinate) {
console.log("点击触发addPoints")
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);
}
} else {
// 创建图层
this.pointLayer = new VectorLayer({
source: new VectorSource(),
});
// 图层添加到地图上
this.map.addLayer(this.pointLayer);
}
this.selectPoint = coordinate;
this.coordinate = coordinate;
this.addAlarmPointNextAction()
/*
// 创建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);
},
addAlarmPointNextAction() {
if (this.selectPoint.length == 0) {
Dialog({message: '请先选择点位'});
}
// 上传之前将3857转4326
const result = ol.proj.transform(this.selectPoint, 'EPSG:3857', 'EPSG:4326');
window.parent.postMessage(result, "*");
},
drawPatrolRoute(routeList) {
this.map.removeLayer(this.pointLayer);
this.pointLayer = {};
this.pointLayer = new VectorLayer({
source: new VectorSource(),
});
// 图层添加到地图上
this.map.addLayer(this.pointLayer);
let pathList = []
routeList.map((item, index) => {
let fontColor = "black"
let circleColor="black"
if (index == 0 || routeList.length == index + 1) {
fontColor = "#F61115"
circleColor = "#F61115"
}
//打点
const coordinate = ol.proj.transform(item.point, 'EPSG:4326', 'EPSG:3857');
console.log(coordinate)
const feature = new Feature({
geometry: new Point(coordinate),
});
pathList.push(coordinate)
// 设置要素的图标
feature.setStyle(
new Style({
// 设置图片效果
image: new Circle({
radius: 7,
fill: new Fill({color: circleColor}),
stroke: new Stroke({
color: "white",
width: 2,
}),
}),
text: new Text({
testAlign: 'center',
text: item.title,
font: '16px 微软雅黑',
fill: new Fill({
color: fontColor,
}),
offsetY: 20
})
})
);
this.pointLayer.getSource().addFeature(feature);
})
// 要素添加到地图图层上
const route = new LineString(pathList)
let routeFeature = new Feature({
type: "route12",
geometry: route,
})
routeFeature.setStyle(new Style({
stroke: new Stroke({
width: 3,
color: "#FF8910",
}),
}))
this.pointLayer.getSource().addFeature(routeFeature);
}
},
};
</script>
<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;
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;
}
}
.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;
}
.iconColorList {
position: fixed;
bottom: 20px;
left: 30px;
z-index: 2;
text-align: left;
font-size: 16px;
color: #333333;
.iconColorListItem {
display: flex;
flex-direction: row;
justify-content: start;
margin-top: 10px;
}
span {
width: 20px;
height: 20px;
border-radius: 20px;
margin-right: 20px;
display: block;
}
}
.alarmDetailsOverlayWrapper {
background-color: white;
position: fixed;
bottom: 0px;
left: 0px;
width: 100%;
z-index: 999;
display: flex;
flex-direction: column;
justify-content: flex-end;
font-size: 18px !important;
padding-top: 50px;
.alarmDetailsBox {
margin-left: 20px;
.title {
width: 100%;
font-weight: 900;
font-size: 10px;
text-align: left;
}
.alarmDetailsBoxItem {
font-weight: 700;
width: 100%;
text-align: left;
margin-top: 20px;
}
}
.btnList {
margin-top: 20px;
margin-bottom: 20px;
display: flex;
width: 100%;
flex-direction: row;
justify-content: space-around;
.btnItem {
background-color: #369FFF;
border-radius: 10px;
width: 40%;
height: 80px;
line-height: 80px;
color: white;
font-weight: bold;
}
}
}
</style>

72
hd-glasses-app/src/pages/hd_show_current_patrol_history.vue
View File

@@ -65,6 +65,10 @@ import GeoJSON from 'ol/format/GeoJSON'
import service from "@/utils/service"; import service from "@/utils/service";
import {appInit, getStatisFileUrl,GetQueryString,getUrlParam} from "../utils/publicFun"; import {appInit, getStatisFileUrl,GetQueryString,getUrlParam} from "../utils/publicFun";
import dayjs from "dayjs" import dayjs from "dayjs"
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
import {get as getProjection} from 'ol/proj.js';
import {getTopLeft, getWidth} from 'ol/extent.js';
export default { export default {
data() { data() {
@@ -172,8 +176,7 @@ export default {
patrolInstanceId: "", patrolInstanceId: "",
moveIndex: 0, moveIndex: 0,
pointMoveTimer:null, pointMoveTimer:null,
mapZoom:15, mapZoom:15
busId:""
}; };
}, },
mounted() { mounted() {
@@ -320,17 +323,60 @@ export default {
}); });
const wmsLayer_1 = new TileLayer({ // 切片方案（0-18级
source: new TileWMS({ const projection = getProjection('EPSG:3857');
// 设置 Geoserver 服务的 URL const projectionExtent = projection.getExtent();
url: process.env.VUE_APP_MAP_URL + "/wms", const size = getWidth(projectionExtent) / 256;
params: { const resolutions = new Array(19);
LAYERS: "china:yangjianghedian_dt", const matrixIds = new Array(19);
TILED: true for (let z = 0; z < 19; ++z) {
resolutions[z] = size / Math.pow(2, z);
matrixIds[z] = "EPSG:3857:" + z;
} }
var style = '';
var format = 'image/png';
var layerName = 'china:yangjianghedian_dt';
let baseParams = ['VERSION', 'LAYER', 'STYLE', 'TILEMATRIX', 'TILEMATRIXSET', 'SERVICE', 'FORMAT'];
let params = {
'VERSION': '1.0.0',
'LAYER': layerName,
'STYLE': style,
'TILEMATRIX': matrixIds,
'TILEMATRIXSET': projection,
'SERVICE': 'WMTS',
'FORMAT': format
};
var url = process.env.VUE_APP_MAP_URL + "/gwc/service/wmts?authkey=" + process.env.VUE_APP_MAP_AUTHKEY+"&"
for (var param in params) {
if (baseParams.indexOf(param.toUpperCase()) < 0) {
url = url + param + '=' + params[param] + '&';
}
}
url = url.slice(0, -1);
const wmtsLayer_1 = new TileLayer({
opacity: 1, //图层透明度
source: new WMTS({
url: url,
layer: "china:yangjianghedian_dt",
matrixSet: 'EPSG:3857',
format: 'image/png', // 默认：'image/jpeg'
projection: projection,
tileGrid: new WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds,
}),
style: '',
wrapX: true
}) })
}); });
this.map = new Map({ this.map = new Map({
target: "map", target: "map",
layers: [ layers: [
@@ -339,13 +385,14 @@ export default {
// url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}", // url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
// }), // }),
// }), // }),
wmsLayer_1, wmtsLayer_1,
wmsLayer_0, wmsLayer_0,
], ],
view: new View({ view: new View({
projection: "EPSG:3857", resolutions: resolutions,
projection: projection,
center: [12497018.585823221, 2476783.2447665134], center: [12497018.585823221, 2476783.2447665134],
zoom: this.mapZoom, zoom: 16,
}), }),
}); });
this.map.on('singleclick', e => { this.map.on('singleclick', e => {
@@ -1019,7 +1066,6 @@ export default {
this.map.getView().animate({ this.map.getView().animate({
center:startPoint, center:startPoint,
duration:1000, duration:1000,
zoom:this.mapZoom
}) })
} }
_list.push(record.location.split(",")) _list.push(record.location.split(","))

71
hd-glasses-app/src/pages/hd_show_patrol_history.vue
View File

@@ -65,6 +65,11 @@ import GeoJSON from 'ol/format/GeoJSON'
import service from "@/utils/service"; import service from "@/utils/service";
import {appInit, getStatisFileUrl,GetQueryString,getUrlParam} from "../utils/publicFun"; import {appInit, getStatisFileUrl,GetQueryString,getUrlParam} from "../utils/publicFun";
import dayjs from "dayjs" import dayjs from "dayjs"
import WMTSTileGrid from 'ol/tilegrid/WMTS.js';
import {get as getProjection} from 'ol/proj.js';
import {getTopLeft, getWidth} from 'ol/extent.js';
export default { export default {
data() { data() {
@@ -309,17 +314,62 @@ export default {
}); });
const wmsLayer_1 = new TileLayer({
source: new TileWMS({ // 切片方案（0-18级
// 设置 Geoserver 服务的 URL const projection = getProjection('EPSG:3857');
url: process.env.VUE_APP_MAP_URL + "/wms", const projectionExtent = projection.getExtent();
params: { const size = getWidth(projectionExtent) / 256;
LAYERS: "china:yangjianghedian_dt", const resolutions = new Array(19);
TILED: true const matrixIds = new Array(19);
for (let z = 0; z < 19; ++z) {
resolutions[z] = size / Math.pow(2, z);
matrixIds[z] = "EPSG:3857:" + z;
} }
var style = '';
var format = 'image/png';
var layerName = 'china:yangjianghedian_dt';
let baseParams = ['VERSION', 'LAYER', 'STYLE', 'TILEMATRIX', 'TILEMATRIXSET', 'SERVICE', 'FORMAT'];
let params = {
'VERSION': '1.0.0',
'LAYER': layerName,
'STYLE': style,
'TILEMATRIX': matrixIds,
'TILEMATRIXSET': projection,
'SERVICE': 'WMTS',
'FORMAT': format
};
var url = process.env.VUE_APP_MAP_URL + "/gwc/service/wmts?authkey=" + process.env.VUE_APP_MAP_AUTHKEY+"&"
for (var param in params) {
if (baseParams.indexOf(param.toUpperCase()) < 0) {
url = url + param + '=' + params[param] + '&';
}
}
url = url.slice(0, -1);
const wmtsLayer_1 = new TileLayer({
opacity: 1, //图层透明度
source: new WMTS({
url: url,
layer: "china:yangjianghedian_dt",
matrixSet: 'EPSG:3857',
format: 'image/png', // 默认：'image/jpeg'
projection: projection,
tileGrid: new WMTSTileGrid({
origin: getTopLeft(projectionExtent),
resolutions: resolutions,
matrixIds: matrixIds,
}),
style: '',
wrapX: true
}) })
}); });
this.map = new Map({ this.map = new Map({
target: "map", target: "map",
layers: [ layers: [
@@ -328,13 +378,14 @@ export default {
// url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}", // url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
// }), // }),
// }), // }),
wmsLayer_1, wmtsLayer_1,
wmsLayer_0, wmsLayer_0,
], ],
view: new View({ view: new View({
projection: "EPSG:3857", resolutions: resolutions,
projection: projection,
center: [12497018.585823221, 2476783.2447665134], center: [12497018.585823221, 2476783.2447665134],
zoom: this.mapZoom, zoom: 16,
}), }),
}); });
this.map.on('singleclick', e => { this.map.on('singleclick', e => {

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

@@ -16,34 +16,46 @@ 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')
},{ }, {
path: '/hd_map_area', path: '/hd_map_area',
name: 'hd_map_area', name: 'hd_map_area',
component: () => import('../pages/hd_map_area.vue') component: () => import('../pages/hd_map_area.vue')
},{ }, {
path: '/hd_show_patrol_history', path: '/hd_show_patrol_history',
name: 'hd_show_patrol_history', name: 'hd_show_patrol_history',
component: () => import('../pages/hd_show_patrol_history.vue') component: () => import('../pages/hd_show_patrol_history.vue')
},{ }, {
path: '/hd_show_equipment_move_history', path: '/hd_show_equipment_move_history',
name: 'hd_show_equipment_move_history', name: 'hd_show_equipment_move_history',
component: () => import('../pages/hd_show_equipment_move_history.vue') component: () => import('../pages/hd_show_equipment_move_history.vue')
},{ }, {
path: '/hd_show_patrolTmp_history', path: '/hd_show_patrolTmp_history',
name: 'hd_show_patrolTmp_history', name: 'hd_show_patrolTmp_history',
component: () => import('../pages/hd_show_patrolTmp_history.vue') component: () => import('../pages/hd_show_patrolTmp_history.vue')
},{ }, {
path: '/map_test', path: '/map_test',
name: 'map_test', name: 'map_test',
component: () => import('../pages/map_test.vue') component: () => import('../pages/map_test.vue')
}, {
path: '/hd_show_current_patrol_history',
name: 'hd_show_current_patrol_history',
component: () => import('../pages/hd_show_current_patrol_history.vue')
}, {
path: '/hd_map_add_point',
name: 'hd_map_add_point',
component: () => import('../pages/hd_map_add_point.vue')
}, {
path: '/hd_map_patrol_line',
name: 'hd_map_patrol_line',
component: () => import('../pages/hd_map_patrol_line.vue')
} }
] ]
}); });

4
im-uniapp/common/socketTask.js
View File

@@ -44,10 +44,10 @@ export default {
const _data = publicFc.formatMessage(msg) const _data = publicFc.formatMessage(msg)
uni.$emit('onP2PMessage', _data); uni.$emit('onP2PMessage', _data);
store.dispatch('onP2PMessage', _data) store.dispatch('onP2PMessage', _data)
},2000) },500)
}) })
} }
}, 2000); }, 1000);
}, },
onTestMessage: (e) => { onTestMessage: (e) => {

7
im-uniapp/wx/tabbar1/index.vue
View File

@@ -62,7 +62,7 @@
console.log(location.href) console.log(location.href)
if (options.imUserSign) { if (options.imUserSign) {
uni.showLoading({ uni.showLoading({
title: "加载中...", title: "数据加载中...",
mask: true mask: true
}); });
/* /*
@@ -84,11 +84,14 @@
if (uni.getStorageSync("initReady") == 1) { if (uni.getStorageSync("initReady") == 1) {
console.log("==========进入首页 initReady为1，开始跳转") console.log("==========进入首页 initReady为1，开始跳转")
clearInterval(timer) clearInterval(timer)
setTimeout(() => {
uni.hideLoading(); uni.hideLoading();
uni.navigateTo({ uni.navigateTo({
url: '../chatWindow/index?userId=' + options.tuid + '&windowType=' + options url: '../chatWindow/index?userId=' + options.tuid +
'&windowType=' + options
.windowType .windowType
}); });
}, 3000)
} }
}, 500) }, 500)
} }