地图优化

This commit is contained in:
2023-11-24 17:39:04 +08:00
parent 5a5f97c357
commit ca660f9513
11 changed files with 2225 additions and 99 deletions

View File

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