<template>
<div id="poumianPage">
<div id="map11" ref="rootmap">
<!--属性面板-->
<div class="page-panel mapPanel" id="popuppoumian" v-if="poumianPopVis">
<!-- <a-icon type="close" class="close-icon" @click="closepopup()"/> -->
<div class="panel-head">
<div class="title">{{ bianhaoName }}</div>
</div>
<div class="panel-body">
<div
class="panel-list-item"
v-for="item in realTimeData"
:key="item.key"
>
<div class="label">{{ item.key }}</div>
<div class="value">{{ item.value }}m</div>
</div>
</div>
</div>
</div>
<!-- 暂无数据 -->
<!-- <div class="noData"
v-if="noData">暂无剖面数据
</div> -->
</div>
</template>
<script>
import "ol/ol.css";
import { Point, Polygon, LineString } from "ol/geom";
import { Map, View, Feature } from "ol";
import Overlay from "ol/Overlay.js";
import SourceVector from "ol/source/Vector";
import LayerVector from "ol/layer/Vector";
import Style from "ol/style/Style";
import Fill from "ol/style/Fill";
import Text from "ol/style/Text";
import Stroke from "ol/style/Stroke";
import dragzoom from "ol/interaction/DragZoom";
import DragPan from "ol/interaction/DragPan";
import MouseWheelZoom from "ol/interaction/MouseWheelZoom";
import DoubleClickZoom from "ol/interaction/DoubleClickZoom";
import Icon from "ol/style/Icon";
import { defaults } from "ol/control";
export default {
props: {
reflashData: {
type: Object,
default: () => new Object(),
},
},
data() {
return {
map: null,
pointMin: [0.01, 0.37, 0.41, 0.17],
pointMax: [4.6, 4.7, 4.8, 4.9],
lineMin: [0.3, 0.5, 0.7, 0.8],
lineMax: [1.4, 1.6, 1.8, 2.0],
lineLeng: [30, 10, 28],
pointCoordX: [],
editSource: null,
editVectorLayer: null,
menu_overlay: null,
poumianPopVis: false,
noData: false,
bianhaoName: "",
realTimeData: [],
featurehighlight: null,
Pointfeaturehighlight: null,
mouseCurrentFeature: null,
};
},
mounted() {
let self = this;
/* self.bus.$off("reflashData");
self.bus.$on("reflashData", self.reflashData);*/
},
methods: {
reflashData1({
pointMin,
pointMax,
lineMin,
lineMax,
lineLeng,
pointName,
lineName,
linegeom1,
lineDepth,
}) {
// 没有值时显示暂无数据
if (pointMin.length == 0) {
this.noData = true;
}
///开始赋值
this.pointMin = pointMin;
this.pointMax = pointMax;
this.lineMin = lineMin;
this.lineMax = lineMax;
this.lineLeng = lineLeng;
this.pointName = pointName;
this.lineName = lineName;
this.linegeom1 = linegeom1;
this.lineDepth = lineDepth;
// debugger;
if (!!!this.map) this.createMap();
let timeout = setTimeout(() => {
//开始计算
this.computeData();
clearTimeout(timeout);
}, 1000);
},
//创建地图
createMap() {
// 时间未改变且因子也没变化，只需要重新绘制
this.$nextTick(function () {
setTimeout(() => {
this.map.updateSize();
}, 500);
});
//加载地图自定义图标
var view = new View({
projection: "EPSG:3857", //使用这个坐标系
center: [50, 30],
zoom: 22,
maxZoom: 22,
});
this.map = new Map({
controls: defaults({
attribution: false,
zoom: false,
rotate: false,
}),
target: "map11",
view: view,
});
let pan = null;
this.map.getInteractions().forEach((element) => {
if (element instanceof DragPan) {
pan = element;
pan.setActive(false);
}
if (element instanceof dragzoom) {
pan = element;
pan.setActive(false);
}
if (element instanceof MouseWheelZoom) {
pan = element;
pan.setActive(false);
}
if (element instanceof DoubleClickZoom) {
pan = element;
pan.setActive(false);
}
});
//添加属性面板
this.menu_overlay = new Overlay({
element: document.getElementById("popuppoumian"),
positioning: "bottom-center",
offset: [0, -20],
});
this.menu_overlay.setVisible(false);
this.map.addOverlay(this.menu_overlay);
//鼠标事件
//鼠标移动事件
this.map.on("pointermove", (e) => {
if (e.map.hasFeatureAtPixel(e.pixel)) {
e.map.getTargetElement().style.cursor = "pointer";
} else {
e.map.getTargetElement().style.cursor = "";
}
if (this.menu_overlay) this.menu_overlay.setPosition(undefined);
e.preventDefault();
var pixel = this.map.getEventPixel(e.originalEvent);
var feature = this.map.forEachFeatureAtPixel(
pixel,
function (feature, layer) {
return feature;
}
);
//设置高亮feature为null
if (this.featurehighlight)
this.featurehighlight.setStyle(this.getLineStyle());
if (this.Pointfeaturehighlight)
this.Pointfeaturehighlight.setStyle(this.getDownWhitePipeLineStyle());
//站点
if (feature) {
if (feature.name) {
this.bianhaoName = feature.name;
if (feature.hasOwnProperty("rimElev")) {
this.featurehighlight = feature;
feature.setStyle(this.getHighLightStyle());
this.realTimeData = [
{
key: "底高程",
value: feature.invertElev,
},
{
key: "地面高程",
value: feature.rimElev,
},
];
} else {
this.Pointfeaturehighlight = feature;
feature.setStyle(this.getHighLightPointStyle());
this.realTimeData = [
{
key: "管径",
value: feature.linegeom1,
},
{
key: "管长",
value: feature.lineLeng,
},
{
key: "埋深",
value: feature.lineDepth,
},
];
}
this.poumianPopVis = true;
this.menu_overlay.setPosition([
parseFloat(e.coordinate[0]),
parseFloat(e.coordinate[1]),
]);
}
}
});
//map点击地图图标事件
//鼠标点击事件
this.map.on("click", (e) => {
if (this.menu_overlay) this.menu_overlay.setPosition(undefined);
e.preventDefault();
var pixel = this.map.getEventPixel(e.originalEvent);
var feature = this.map.forEachFeatureAtPixel(
pixel,
function (feature, layer) {
return feature;
}
);
//站点
if (feature) {
if (feature.name) {
if (feature.hasOwnProperty("rimElev")) {
this.HighLightLinecoor(feature.values_.geometry.flatCoordinates);
} else {
this.HighLightPointcoor(feature.values_.geometry.flatCoordinates);
}
}
}
});
},
computeData() {
if (this.editSource) this.editSource.clear();
if (this.editVectorLayer) this.map.removeLayer(this.editVectorLayer);
//新建矢量图层
this.editSource = new SourceVector({
wrapX: false,
});
this.editVectorLayer = new LayerVector({
source: this.editSource,
Declutter: true,
});
this.map.addLayer(this.editVectorLayer);
let dualSum = 0.0;
this.pointCoordX = [];
this.pointCoordX.push(0);
this.pointCoordX.push(
...this.lineLeng.map((length) => (dualSum += length))
);
this.drawJCJpoint(this.pointCoordX);
},
//检查井、管线渲染
drawJCJpoint(pointCoordX) {
//获取Y值最大扩展比例系数
console.log(this.pointMax);
console.log(this.lineMin);
console.log(this.pointMin);
var jcjmax = Math.max(...this.pointMax);
var linezhemin = Math.min(...this.lineMin);
var pointzhemin = Math.min(...this.pointMin);
console.log(jcjmax);
console.log(linezhemin);
console.log(pointzhemin);
var linemax = this.pointCoordX[this.pointCoordX.length - 1];
var cutNum = (jcjmax - pointzhemin) / (linemax * 0.6);
console.log(pointCoordX);
console.log(this.pointName);
for (var i = 0; i < pointCoordX.length; i++) {
var start = [pointCoordX[i], this.pointMin[i] / cutNum];
var end = [pointCoordX[i], this.pointMax[i] / cutNum];
var jcjLine = new LineString([start, end]);
var feature = new Feature(jcjLine);
feature.name = this.pointName[i]; //编号
feature.invertElev = this.pointMin[i]; //节点底高程
feature.rimElev = this.pointMax[i]; //地面高程
feature.setStyle(this.getLineStyle());
this.editSource.addFeature(feature);
}
//绘制管线深色块下面的图层
var downArea = [];
downArea.push([pointCoordX[0], pointzhemin / cutNum]);
for (var k = 0; k < this.lineMin.length; k++) {
console.log([pointCoordX[k], this.lineMin[k]]);
downArea.push([pointCoordX[k], this.lineMin[k] / cutNum]);
}
downArea.push([
pointCoordX[pointCoordX.length - 1],
pointzhemin / cutNum,
]);
downArea.push([pointCoordX[0], pointzhemin / cutNum]);
var polygondown = new Polygon([downArea]);
var featuredown = new Feature(polygondown);
featuredown.setStyle(this.getDownPolygonStyle());
this.editSource.addFeature(featuredown);
//绘制管线深色块上面的图层
var upArea = [];
for (var j = 0; j < this.lineMax.length; j++) {
upArea.push([pointCoordX[j], this.lineMax[j] / cutNum]);
if (j > 0) {
var cor1 = [pointCoordX[j - 1], this.lineMin[j - 1] / cutNum];
var cor2 = [pointCoordX[j - 1], this.lineMax[j - 1] / cutNum];
var cor3 = [pointCoordX[j], this.lineMax[j] / cutNum];
var cor4 = [pointCoordX[j], this.lineMin[j] / cutNum];
var polygonpipeline = new Polygon([[cor1, cor2, cor3, cor4, cor1]]);
var featurepipeline = new Feature(polygonpipeline);
featurepipeline.name = this.lineName[j - 1]; //编号
featurepipeline.linegeom1 = this.linegeom1[j - 1]; //管径
featurepipeline.lineLeng = this.lineLeng[j - 1]; //管长
featurepipeline.lineDepth = this.lineDepth[j - 1]; //管长
featurepipeline.setStyle(this.getDownWhitePipeLineStyle());
this.editSource.addFeature(featurepipeline);
}
}
for (var m = pointCoordX.length - 1; m > -1; m--) {
var point;
if (this.pointMax[m] > this.lineMax[m])
point = [pointCoordX[m], this.pointMax[m] / cutNum];
else point = [pointCoordX[m], this.lineMax[m] / cutNum];
upArea.push(point);
}
var polygonup = new Polygon([upArea]);
var featureup = new Feature(polygonup);
featureup.setStyle(this.getUpPolygonStyle());
this.editSource.addFeature(featureup);
//加载边框
var xmin = 0.0;
var ymin = pointzhemin / cutNum;
var xmax = pointCoordX[pointCoordX.length - 1];
//var ymax=pointCoordX[pointCoordX.length-1]*0.6;
var ymax = jcjmax / cutNum;
for (var i = 0; i < pointCoordX.length; i++) {
console.log(pointCoordX);
console.log(this.lineName);
//检查井编号
console.log("标注位置:" + this.pointName[i]);
console.log([pointCoordX[i], pointzhemin / cutNum]);
if (i > 0 && this.lineLeng[i - 1] < 30 && this.lineLeng[i] < 30)
continue;
var pointmark = new Point([pointCoordX[i], ymin]);
var featuremark = new Feature(pointmark);
featuremark.setStyle(this.getpointMarkStyle(this.pointName[i]));
this.editSource.addFeature(featuremark);
/* var featuremark2 = new Feature(pointmark);
featuremark2.setStyle(this.getpointMarkStyle2(this.pointMin[i]+""))
this.editSource.addFeature(featuremark2) */
if (i > 0) {
//管线编号
console.log("管线标注位置:" + this.lineName[i - 1]);
var linemark = new Point([
(pointCoordX[i - 1] + pointCoordX[i]) / 2,
ymax,
]);
var featurelinemark = new Feature(linemark);
featurelinemark.setStyle(this.getlineMarkStyle(this.lineName[i - 1]));
// this.editSource.addFeature(featurelinemark);
}
}
//绘制边框
var box = new Polygon([
[
[0, ymin],
[xmax, ymin],
[xmax, ymax],
[0, ymax],
[0, ymin],
],
]);
var feature = new Feature(box);
feature.setStyle(this.getboxStyle());
this.editSource.addFeature(feature);
//绘制网格线
//0-xmax pointzhemin-jcjmax
//第一个y=0网上的横条
if (jcjmax > 0 && jcjmax <= 0.5) {
var start1 = [0, jcjmax / cutNum];
var end1 = [pointCoordX[pointCoordX.length - 1], jcjmax / cutNum];
var wgLine1 = new LineString([start1, end1]);
var feature1 = new Feature(wgLine1);
feature1.setStyle(this.getWangeLineStyle());
this.editSource.addFeature(feature1);
var linemark1 = new Point(end1);
var featurelinemark1 = new Feature(linemark1);
featurelinemark1.setStyle(this.getwanggeRightMarkStyle(jcjmax + ""));
this.editSource.addFeature(featurelinemark1);
} else if (jcjmax > 0.5) {
var Num = Math.ceil(jcjmax / 0.5);
var startnum;
if (pointzhemin <= 0) startnum = 0;
else startnum = Math.ceil(pointzhemin / 0.5);
for (var n = startnum; n < Num; n++) {
var start = [0, (n * 0.5) / cutNum];
var end = [pointCoordX[pointCoordX.length - 1], (n * 0.5) / cutNum];
var wgLine = new LineString([start, end]);
var feature = new Feature(wgLine);
feature.setStyle(this.getWangeLineStyle());
this.editSource.addFeature(feature);
var linemark = new Point(end);
var featurelinemark = new Feature(linemark);
featurelinemark.setStyle(this.getwanggeRightMarkStyle(n * 0.5 + ""));
this.editSource.addFeature(featurelinemark);
}
}
//绘制网格线
//0-xmax pointzhemin-jcjmax
//第一个y=0网下的横条 pointzhemin
if (pointzhemin < 0 && pointzhemin >= -0.5) {
var start2 = [0, pointzhemin / cutNum];
var end2 = [pointCoordX[pointCoordX.length - 1], pointzhemin / cutNum];
var wgLine2 = new LineString([start2, end2]);
var feature2 = new Feature(wgLine2);
feature2.setStyle(this.getWangeLineStyle());
this.editSource.addFeature(feature2);
var linemark2 = new Point(end2);
var featurelinemark2 = new Feature(linemark2);
featurelinemark2.setStyle(
this.getwanggeRightMarkStyle(pointzhemin + "")
);
this.editSource.addFeature(featurelinemark2);
} else if (pointzhemin < -0.5) {
var fushu = -pointzhemin;
var Num = Math.ceil(fushu / 0.5);
for (var n = 0; n < Num; n++) {
var start3 = [0, (-n * 0.5) / cutNum];
var end3 = [pointCoordX[pointCoordX.length - 1], (-n * 0.5) / cutNum];
var wgLine3 = new LineString([start3, end3]);
var feature3 = new Feature(wgLine3);
feature3.setStyle(this.getWangeLineStyle());
this.editSource.addFeature(feature3);
var linemark3 = new Point(end3);
var featurelinemark3 = new Feature(linemark3);
featurelinemark3.setStyle(
this.getwanggeRightMarkStyle(-n * 0.5 + "")
);
this.editSource.addFeature(featurelinemark3);
}
}
//绘制网格线
//0-xmax pointzhemin-jcjmax
//第一个x=0网右的竖条 pointzhemin
var maxLen = this.pointCoordX[this.pointCoordX.length - 1];
if (maxLen > 0 && maxLen <= 50) {
var start4 = [maxLen, pointzhemin / cutNum];
var end4 = [maxLen, ymax];
var wgLine4 = new LineString([start4, end4]);
var feature4 = new Feature(wgLine4);
feature4.setStyle(this.getWangeLineStyle());
this.editSource.addFeature(feature4);
var linemark4 = new Point(start4);
var featurelinemark4 = new Feature(linemark4);
featurelinemark4.setStyle(
this.getwanggeTopMarkStyle(maxLen.toFixed(1) + "")
);
this.editSource.addFeature(featurelinemark4);
} else if (maxLen > 50) {
var Num = Math.ceil(maxLen / 50);
for (var n = 0; n < Num; n++) {
var start5 = [n * 50, pointzhemin / cutNum];
var end5 = [n * 50, ymax];
var wgLine5 = new LineString([start5, end5]);
var feature5 = new Feature(wgLine5);
feature5.setStyle(this.getWangeLineStyle());
this.editSource.addFeature(feature5);
var linemark5 = new Point(start5);
var featurelinemark5 = new Feature(linemark5);
featurelinemark5.setStyle(this.getwanggeTopMarkStyle(n * 50 + ""));
this.editSource.addFeature(featurelinemark5);
}
var start6 = [maxLen, pointzhemin / cutNum];
var linemark6 = new Point(start6);
var featurelinemark6 = new Feature(linemark6);
featurelinemark6.setStyle(
this.getwanggeTopMarkStyle(maxLen.toFixed(1) + "")
);
this.editSource.addFeature(featurelinemark6);
}
//加载定位范围的隐藏边框，用于固定视图
/* var xminView=-xmax*0.1;
var yminView=ymin*0.6;
var xmaxView=xmax*1.2
var ymaxView=ymax*1.05
var boxView=new Polygon([[[xminView,ymin+yminView],[xmaxView,ymin+yminView],[xmaxView,ymaxView],[xminView,ymaxView],[xminView,ymin+yminView]]]);
*/
var leftright = xmax * 0.1;
var upbuttom = (ymax - ymin) * 0.1;
/* var xminView=-xmax*0.1;
var xmaxView=xmax*1.2
var yminView=(ymax-ymin)*0.2;
var ymaxView=ymax*1.05 */
var boxView = new Polygon([
[
[-leftright, ymin - upbuttom],
[xmax + leftright, ymin - upbuttom],
[xmax + leftright, ymax + upbuttom],
[-leftright, ymax + upbuttom],
[-leftright, ymin - upbuttom],
],
]);
var featureView = new Feature(boxView);
featureView.setStyle(this.getViewboxStyle());
this.editSource.addFeature(featureView);
//定位地图
var center = featureView.getGeometry().getExtent();
console.log(center);
this.map.getView().fit(center, this.map.getSize());
/* var zoomtag=this.map.getView().getZoom()
this.map.getView().setMaxZoom(zoomtag)
this.map.getView().setMinZoom(zoomtag) */
setTimeout(() => {
this.map.updateSize();
}, 100);
},
getpointMarkStyle2(pointMin) {
console.log(pointMin);
return new Style({
text: new Text({
text: pointMin,
font: "normal 10px 微软雅黑",
fill: new Fill({
color: "aqua",
}),
offsetY: 50,
textAlign: "center",
textBaseline: "bottom",
}),
zIndex: 999999,
});
},
getpointMarkStyle(text) {
return new Style({
text: new Text({
text: text,
font: "normal 10px 微软雅黑",
fill: new Fill({
color: "aqua",
}),
offsetY: 40,
textAlign: "center",
textBaseline: "bottom",
}),
zIndex: 999999,
});
},
getwanggeTopMarkStyle(text) {
return new Style({
text: new Text({
text: text,
font: "normal 10px 微软雅黑",
fill: new Fill({
color: "aqua",
}),
offsetY: 20,
textAlign: "center",
textBaseline: "bottom",
}),
zIndex: 999999,
});
},
getwanggeRightMarkStyle(text) {
return new Style({
text: new Text({
text: text,
font: "normal 10px 微软雅黑",
fill: new Fill({
color: "aqua",
}),
offsetX: 20,
offsetY: 5,
textAlign: "center",
textBaseline: "bottom",
}),
zIndex: 999999,
});
},
getlineMarkStyle(text) {
return new Style({
text: new Text({
text: text,
font: "normal 10px 微软雅黑",
fill: new Fill({
color: "aqua",
}),
offsetY: -20,
textAlign: "center",
textBaseline: "bottom",
}),
zIndex: 999999,
});
},
getUpPolygonStyle() {
return new Style({
stroke: new Stroke({
color: "rgb(33,49,81)",
lineCap: "butt",
width: 3,
}),
fill: new Fill({
color: "rgb(33,49,81)",
}),
zIndex: 999997,
});
},
getDownWhitePipeLineStyle() {
return new Style({
stroke: new Stroke({
color: "black",
lineCap: "butt",
width: 1,
}),
fill: new Fill({
color: "rgb(158,183,235)",
}),
});
},
getDownPolygonStyle() {
return new Style({
stroke: new Stroke({
color: "rgb(33,49,81)",
lineCap: "butt",
width: 3,
}),
fill: new Fill({
color: "rgb(33,49,81)",
}),
zIndex: 999997,
});
},
getboxStyle() {
return new Style({
stroke: new Stroke({
color: "gray",
lineCap: "butt",
width: 2,
}),
});
},
//隐藏样式的边框视角
getViewboxStyle() {
return new Style({});
},
//设置点线面style
getPointStyle() {
return new Style({
image: new Icon({}),
});
},
//网格线
getWangeLineStyle() {
return new Style({
stroke: new Stroke({
color: "#666",
lineCap: "butt",
width: 0.2,
}),
zIndex: 999999999997,
});
},
//检查井线条
getLineStyle() {
return new Style({
stroke: new Stroke({
color: "#0088ff",
lineCap: "butt",
width: 3,
}),
zIndex: 999999999999,
});
},
//高亮面样式
getHighLightPointStyle(feature) {
return new Style({
fill: new Fill({
//矢量图层填充颜色，以及透明度
color: "rgb(0,170,100)",
}),
/* stroke: new Stroke({
color: "#33ffff",
lineCap: "butt",
width: 0.0001,
}), */
zIndex: 9,
});
},
//高亮线样式
getHighLightStyle(feature) {
return new Style({
//填充色
fill: new Fill({
color: "rgb(0,170,100)",
}),
//边线颜色
stroke: new Stroke({
color: "rgb(0,170,100)",
width: 2,
}),
zIndex: 9999999999999,
});
},
},
watch: {
reflashData: {
deep: true,
immediate: true,
handler: function (newV, oldV) {
if (!!newV.pointMin.length) {
let timeout = setTimeout(() => {
clearTimeout(timeout);
this.$nextTick(() => this.reflashData1(newV));
}, 1000);
}
},
},
},
};
</script>
<style lang="scss" scoped>
#poumianPage {
position: relative;
width: 100%;
height: 100%;
}
#map11 {
height: 100%;
width: 100%;
overflow: auto;
position: absolute;
right: 0;
background-color: rgba(255, 255, 255, 0);
}
.page-modal-no-footer {
::v-deep .ant-modal-body {
height: 450px;
}
}
.mapPanel {
position: absolute;
top: 10px;
left: 10px;
width: 100%;
height: 185px;
overflow: auto;
z-index: 99;
.panel-head {
margin-top: 10px;
font-weight: bold;
color: #00eeff;
}
.panel-body {
.label {
color: rgb(164, 226, 93);
}
}
}
.noData {
text-align: center;
font-size: 16px;
color: #fdfdfd;
position: absolute;
top: 40%;
width: 100%;
z-index: 100;
}
.page-panel {
position: absolute;
width: 200px;
padding: 0 15px;
background: rgba(69, 92, 126, 0.7);
color: white;
border: 1px solid #3b5082;
border-top: 2px solid #9c9c9c;
bottom: 30px;
}
.ol-viewport {
background: #07264c !important;
}
</style>
