Skip to content

Z
zh-baseversion-project
Commit ddd93da8 authored by 纪泽龙's avatar 纪泽龙
Browse files
Options

脉冲线上图以及过滤功能

parent 0a3ac116
Hide whitespace changes
Inline Side-by-side
Showing with 174 additions and 19 deletions
zh-baseversion-web/public/index.html
View file @ ddd93da8
......@@ -15,6 +15,7 @@
</script>
<!-- <script src="https://webapi.amap.com/maps?v=2.0&key=72306333e96c7806b856a9bc69afc402&plugin=Map3D,AMap.DistrictSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MouseTool,AMap.ControlBar,AMap.CircleEditor,AMap.PolyEditor"></script> -->
<script src="https://webapi.amap.com/maps?v=2.0&key=49fcb156d466062435d7d33437099582&plugin=Map3D,AMap.DistrictSearch,AMap.Scale,AMap.OverView,AMap.ToolBar,AMap.MouseTool,AMap.ControlBar,AMap.CircleEditor,AMap.PolyEditor"></script>
<script src="https://webapi.amap.com/loca?v=2.0.0&key=49fcb156d466062435d7d33437099582"></script>
<script src="h5player/h5player.min.js"></script>
<style>
html,
......
zh-baseversion-web/src/utils/mapClass/map.js
View file @ ddd93da8
/*
* @Author: your name
* @Date: 2022-01-11 13:45:12
* @LastEditTime: 2024-07-26 17:23:07
* @LastEditTime: 2024-07-30 17:11:11
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/utils/mapClass.js
......@@ -1209,14 +1209,13 @@ export class EditorMap {
anchor: "middle-left",
// offset: [20, -10],
offset: [20, 0],
});
this.infowindow.open(this.map);
}
// 地图上add管道
addMediumPipeLine(objData, component, mediumConponent) {
addMediumPipeLine(objData, component, mediumConponent, search = false) {
const { path, pipePressure, iconType, id } = objData;
// 根据压力获取颜色
const color = pipeColor[pipePressure];
......@@ -1225,6 +1224,7 @@ export class EditorMap {
path: eval(path),
strokeWeight: objData.strokeWeight || 3,
strokeColor: color,
strokeOpacity: .1,
extData: objData,
cursor: "pointer",
});
......@@ -1235,7 +1235,11 @@ export class EditorMap {
this.pipeArr[iconType] = [];
}
this.pipeArr[iconType].push(pipe);
this.searchDevice = pipe;
// 当是搜索的时候
if (search) {
this.searchDevice = pipe;
}
if (pipePressure == 1) {
this.searchDevice.com = mediumConponent;
this.pipeEvent(pipe, mediumConponent);
......@@ -1754,11 +1758,10 @@ export class EditorMap {
// options.strokeWeight =4;
this.searchDevice.setOptions(options);
}
markerClicked(lnglat,com) {
console.log(this.searchDevice.getExtData())
markerClicked(lnglat, com) {
console.log(this.searchDevice.getExtData());
this.markerClick(this.searchDevice, com);
this.map.panTo(lnglat);
}
clearSearchDevice() {
if (this.searchDevice) {
......
zh-baseversion-web/src/utils/mapClass/mapLoca.js 0 → 100644
View file @ ddd93da8
/*
* @Author: 纪泽龙 jizelong@qq.com
* @Date: 2024-07-30 15:09:53
* @LastEditors: 纪泽龙 jizelong@qq.com
* @LastEditTime: 2024-07-30 17:41:05
* @FilePath: /zh-baseversion-web/src/utils/mapClass/mapLoca.js
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
*/
import { pipeColor, svgUrl, svgAlarm } from "@/utils/mapClass/config.js";
export class LocalLine {
loca = null;
layerCompanyArr = {};
layer = null;
geo = null;
headColors = [
"#179CB7",
"#20B156",
"#FF9939",
"#FF0000",
"#E06AC4",
"#223F9B",
"#F15C1A",
"#7A0FA6",
];
constructor(map, geoJsonArr) {
// return;
this.loca = new Loca.Container({
map,
});
// return this.loca;
}
init(geoJsonArr){
geoJsonArr.forEach((item) => {
let layer = new Loca.PulseLineLayer({
// loca,
zIndex: 10,
opacity: 1,
visible: true,
zooms: [2, 22],
});
layer.d = item.d
if (!this.layerCompanyArr[item.d.iconType]) {
this.layerCompanyArr[item.d.iconType] = [];
}
this.layerCompanyArr[item.d.iconType].push(layer);
const geo = new Loca.GeoJSONSource({
data: item,
});
layer.setSource(geo);
layer.setStyle({
altitude: 0,
lineWidth: 3,
// 脉冲头颜色
headColor: (_, feature) => {
return this.headColors[feature.properties.type - 1];
},
// 脉冲尾颜色
trailColor: "rgba(128, 128, 128, 0.5)",
// 脉冲长度，0.25 表示一段脉冲占整条路的 1/4
interval: 0.25,
// 脉冲线的速度，几秒钟跑完整段路
duration: 5000,
});
// console.log('this.loca.add', this.layer)
this.loca.add(layer);
this.loca.animate.start();
});
}
show() {
// this.layer.show();
}
hide() {
// this.layer.hids();
}
allfilter(companyArr, typeArr) {
for (let pipeItem in this.layerCompanyArr) {
this.layerCompanyArr[pipeItem].forEach((pipe) => {
const data = pipe.d;
if (
companyArr.indexOf(data.companyType + "") >= 0 &&
typeArr.indexOf(1) >= 0
) {
pipe.show();
} else {
pipe.hide();
}
});
}
}
}
zh-baseversion-web/src/views/bigWindow/index.vue
View file @ ddd93da8
<!--
* @Author: your name
* @Date: 2022-01-11 13:44:17
* @LastEditTime: 2024-07-26 17:41:09
* @LastEditTime: 2024-07-30 17:40:21
* @LastEditors: 纪泽龙 jizelong@qq.com
* @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
* @FilePath: /test/hello-world/src/views/Home.vue
......@@ -118,6 +118,7 @@
<script>
// @ is an alias to /src
import { EditorMap } from "@/utils/mapClass/map";
import { LocalLine } from "@/utils/mapClass/mapLoca";
import { mapGetters, mapActions } from "vuex";
import { listDetectorInfo } from "@/api/detector/detectorInfo";
import {
......@@ -274,6 +275,7 @@ export default {
// 报警轮询timer
alarmTimer: null,
geoJsonArr: [],
};
},
......@@ -317,6 +319,7 @@ export default {
},
this
);
this.LocalLine = new LocalLine(this.map.map);
getUserProfile().then((response) => {
var user = response.data;
......@@ -380,6 +383,7 @@ export default {
false
).then((res) => {
// 先查一下，然后开启定时器
return;
this.userAlarm();
this.alarmTimer = setInterval(() => {
this.userAlarm();
......@@ -410,7 +414,12 @@ export default {
}
const lnglat = { lng: path[0], lat: path[1] };
this.map.addMediumPipeLine(deviceDetail, Line, MediumPressureLineVue);
this.map.addMediumPipeLine(
deviceDetail,
Line,
MediumPressureLineVue,
true
);
this.map.pipeClicked(lnglat);
} else {
// 1.阀井 iconType=3
......@@ -436,8 +445,12 @@ export default {
5: VideoView,
18: yhqUser,
};
this.map.addDevice(deviceDetail, deviceCom[deviceDetail.iconType],true);
this.map.markerClicked(lnglat,deviceCom[deviceDetail.iconType]);
this.map.addDevice(
deviceDetail,
deviceCom[deviceDetail.iconType],
true
);
this.map.markerClicked(lnglat, deviceCom[deviceDetail.iconType]);
}
},
leftRightBarChange() {
......@@ -487,9 +500,38 @@ export default {
},
// 管道上图
addMediumPipeLine(data, component, mediumComponent) {
console.log("管道的数据", data);
data.data.forEach((item, index) => {
if (item.path) {
const geoJson = {
type: "FeatureCollection",
d: item,
features: [
{
type: "Feature",
properties: {
type: item.pipePressure,
},
geometry: {
type: "LineString",
coordinates: eval(item.path),
},
},
],
};
this.geoJsonArr.push(geoJson);
}
});
// this.LocalLine = new LocalLine(this.map.map, );
this.LocalLine.init(this.geoJsonArr)
for (let comp in data) {
data[comp].forEach((pipe) => {
this.map.addMediumPipeLine(pipe, component, mediumComponent);
if (pipe.path) {
this.map.addMediumPipeLine(pipe, component, mediumComponent);
}
});
}
},
......@@ -533,11 +575,18 @@ export default {
return httpFunc().then((res) => {
// 给用户加icontype
console.log("管道", res.data);
if (res.data && !res.data[0].iconType) {
res.data.forEach((item) => {
item.iconType = 1;
});
}
// if (res.data && !res.data[0].iconType) {
res.data.forEach((item) => {
item.iconType = 1;
});
// }
res.data.forEach((item) => {
if (item.companyType == 0) {
item.companyType = 21;
}
});
// 根据数据格式不同，赋值不同，如果是个数组，就用res，如果不是就用res.data
let config = {};
if (Array.isArray(res)) {
......@@ -651,6 +700,8 @@ export default {
// return;
this.selarr = [...arr];
this.map.allfilter(this.selarr, this.selarr1);
this.LocalLine.allfilter(this.selarr, this.selarr1);
this.map.infowindowClose();
this.show = false;
this.$refs.mychild2.choice(this.selarr);
......@@ -693,6 +744,8 @@ export default {
}
// this.map.companyFilter(this.selarr);
this.map.allfilter(this.selarr, this.selarr1);
this.LocalLine.allfilter(this.selarr, this.selarr1);
this.$refs.mychild2.choice(this.selarr);
this.$refs.mychild.choice(this.selarr);
},
......@@ -707,6 +760,7 @@ export default {
this.selarr1 = [...selarr1];
console.log(this.selarr, this.selarr1);
this.map.allfilter(this.selarr, this.selarr1);
this.LocalLine.allfilter(this.selarr, this.selarr1);
},
//用户的设备center
getDetectorInfoList(httpFunc, queryParams, title) {
......
zh-baseversion-web/vue.config.js
View file @ ddd93da8
......@@ -35,9 +35,9 @@ module.exports = {
// detail: https://cli.vuejs.org/config/#devserver-proxy
[process.env.VUE_APP_BASE_API]: {
target: `http://localhost:8905/gassafety`,
// target: `http://localhost:8905/gassafety`,
// target: `http://27.128.233.145:8905/gassafety`,
// target: ` http://36.138.180.82:8905/gassafety`,
target: `http://36.138.180.82:8905/gassafety`,
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment