<template>
<div id="poumianPage">
<div id="map" 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';
import bus from '@/bus';
import { nextTick } from 'vue';
export default {
props: {
reflashData: {
type: Object,
default: () => ({}),
},
cutNumber: {
type: Number,
default: () => 0.17,
},
},
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;
bus.off('reflashData');
bus.on('reflashData', self.reflashData);
},
methods: {
reflashDataMethod({ pointMin, pointMax, lineMin, lineMax, lineLeng, pointName, lineName, linegeom1, lineFlows }) {
// 没有值时显示暂无数据
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.lineFlows = lineFlows;
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: 'map',
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: Number(feature.invertElev).toFixed(2),
},
{
key: '地面高程',
value: Number(feature.rimElev).toFixed(2),
},
];
} else {
this.Pointfeaturehighlight = feature;
feature.setStyle(this.getHighLightPointStyle());
this.realTimeData = [
{
key: '管径',
value: feature.linegeom1,
},
{
key: '管长',
value: feature.lineLeng,
},
];
}
this.poumianPopVis = true;
nextTick(() => {
document.getElementById('popuppoumian').style.left = Number(e.pixel[0]) - 20 + 'px';
});
}
}
});
//map点击地图图标事件
//鼠标点击事件
this.map.on('click', e => {
this.poumianPopVis = true;
e.preventDefault();
var pixel = this.map.getEventPixel(e.originalEvent);
var feature = this.map.forEachFeatureAtPixel(pixel, function (feature, layer) {
return feature;
});
if (feature.name) {
nextTick(() => {
document.getElementById('popuppoumian').style.left = Number(e.pixel[0]) - 20 + 'px';
});
if (!feature.name.includes('-')) {
console.log(feature.name);
bus.emit('selectWallFromPouM', feature.name);
}
}
// //站点
// 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 * this.cutNumber);
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 = [];
let lineFlow = [];
for (var j = 0; j < this.lineMax.length; j++) {
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];
if (cor3[1] > cor2[1]) {
lineFlow.push(1);
} else {
lineFlow.push(0);
}
}
}
let maxLineFlow = this.getArrMostFrequency(lineFlow)[0];
console.log('maxLineFlowmaxLineFlowmaxLineFlowmaxLineFlow', maxLineFlow);
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];
this.lineFlows[j - 1] = maxLineFlow;
var polygonpipeline = new Polygon([[cor1, cor2, cor3, cor4, cor1]]);
var featurepipeline = new Feature(polygonpipeline);
var center = polygonpipeline.getInteriorPoint();
var featuremark = new Feature(center);
featuremark.setStyle(this.getFlowIcon(this.lineFlows[j - 1] == 0 ? 0 : 110));
this.editSource.addFeature(featuremark);
featurepipeline.name = this.lineName[j - 1]; //编号
featurepipeline.linegeom1 = this.linegeom1[j - 1]; //管径
featurepipeline.lineLeng = this.lineLeng[j - 1]; //管长
featurepipeline.name = this.lineName[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.01;
var upbuttom = (ymax - ymin) * 0.2;
/* 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);
},
getArrMostFrequency(arr) {
let maxElement,
maxNum = 1;
let obj = arr.reduce((p, n) => {
p[n] ? p[n]++ : (p[n] = 1);
if (p[n] > maxNum) {
maxElement = n;
maxNum++;
}
return p;
}, {});
return [maxElement, maxNum];
},
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,
});
},
getFlowIcon(rotation = 0) {
return new Style({
image: new Icon({
src: '/images/flow.png',
size: [24, 24],
rotation,
}),
});
},
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: {
handler(newValue, oldValue) {
if (Object.keys(newValue).length) this.$nextTick(() => this.reflashDataMethod(newValue));
},
deep: true,
immediate: true,
},
},
};
</script>
<style lang="scss" scoped>
#poumianPage {
position: relative;
width: 100%;
height: calc(100% - 50px);
top: 40px;
}
#map {
height: 100%;
width: 100%;
overflow: auto;
position: absolute;
right: 0;
background-color: rgba(255, 255, 255, 0);
}
.page-modal-no-footer {
:deep(.ant-modal-body) {
height: 450px;
}
}
.mapPanel {
position: absolute;
top: 10px;
left: 10px;
width: 100%;
height: 150px;
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>
