<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;

      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>