epmet-oper-gov/src/views/modules/visual/components/screen-map/index.vue

<template>
  <div class="div_content_map">
    <!-- <div>
      <el-input v-model="input_lat"></el-input>
      <el-input v-model="input_lon"></el-input>
      <el-button @click="showPosition"></el-button>
    </div> -->

    <!-- <div id="mouse-position"
         style="
        color: #fff;
        position: absolute;
        bottom:10px;
        right:10px;
        z-index: 10000000;
        width: 200px;
        line-height: 30px;
        background: rgba(0,0,0,0.5);
    "> 

  </div>-->

    <div class="div_map"
         :id="mapId"
         :ref="mapId"></div>
    <div id="popup"
         style="display: none"
         class="ol-popup">
      <a href="#"
         id="popup-closer"
         class="ol-popup-closer"></a>
      <div id="popup-content"
           class="popup-content"></div>
      <a href="#"
         id="popup-goMore"
         class="popup-goMore">更多>>>></a>
    </div>
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile.js";
import XYZ from "ol/source/XYZ.js";
import VectorLayer from "ol/layer/Vector.js";
import VectorSource from "ol/source/Vector.js";
import GeoJSON from "ol/format/GeoJSON.js";
import Point from "ol/geom/Point.js";
import Feature from "ol/Feature.js";
import Overlay from "ol/Overlay";
import { Select, DoubleClickZoom } from "ol/interaction.js";
import { getCenter, boundingExtent } from "ol/extent.js";
import { Circle as CircleStyle, Icon, Fill, Stroke, Style, Text } from "ol/style.js";
import { altKeyOnly, click, pointerMove } from "ol/events/condition";
import { getDistance } from "ol/sphere";

import MousePosition from "ol/control/MousePosition";
import { createStringXY } from "ol/coordinate";
import { defaults as defaultControls } from "ol/control";
import { mapGetters } from "vuex";
import { Loading } from "element-ui"; //引入Loading服务

import { requestPost } from "@/js/dai/request";
var centerPointGlobal = [120.38945519, 36.0722275];

let loading; //加载动画

let map;
let mapView;
let gaodeMapLayer; //背景地图图层
let polygonLayer; //区域多边形标注图层
let polygonSource; //标注多边形

let polIconLayer; // 区域icon标注图层
let polIconSource; // icon

let iconLayer; // icon图层
let iconSource; // icon

let select; //选中标注

let iconTextsStyle = {
  textAlign: undefined,
  font: "18px Arial",
  //fontFamily: "Courier New, monospace",
  // fontWeight: "bold",
  text: "",
  backgroundFill: new Fill({
    color: "rgba(0, 146, 238, 0.75)",
    // color: textColorArray[feature.values_.colorIndex]
  }),
  padding: [4, 10, 4, 10],
  //text: "变电站名称",
  fill: new Fill({ color: "#ffffff" }),
  // stroke: new Stroke({ color: "#ffffff", width: 3 }),
  offsetY: -30,
  offsetX: -50,
  overflow: true,
};

let polygonColorArray = [
  "rgba(210, 2, 2, 0.24)",
  "rgba(43, 231, 253, 0.25)",
  "rgba(183, 185, 0, 0.16)",
];

//icon文字样式
let createTextStyle = function (feature) {
  if (iconTextsStyle) {
    let iconTextsStyles = { ...iconTextsStyle };
    iconTextsStyles.text = (feature.values_ && feature.values_.name) || feature.name;
    return new Text({ ...iconTextsStyles });
  } else {
    return null;
  }
};
//多边形标注样式
var polygonStyleFunction = (function () {
  return function (feature) {
    return new Style({
      fill: new Fill({
        // color: [255, 255, 255, 0.3]
        color: feature.values_.fillColor,
      }),
      stroke: new Stroke({
        color: feature.values_.color,
        width: 2,
      }),

      // text: createTextStyle(feature)
    });
  };
})();

const vueGis = {
  name: "HomeMap",
  data () {
    return {
      centerPoint: [], //中心点位置
      zoom: 14, //缩放范围：区14
      minZoom: 1, //最小缩放
      overlay: null,
      showPopup: false,
      mapInfo: {},

      polygonArray: [
        {
          agencyLevel: "grid",
          coordinates:
            "120.37421528296863,36.085017737014525,120.37551227771064,36.08181339174796,120.38108173804676,36.08303409283569,120.3852397566111,36.08318668276358,120.38539234391965,36.090816077003794,120.37410084117755,36.09096866431234,120.37421528296863,36.085017737014525",
          id: "2a278c0ceb863359d263fda7aabf6752",
          latitude: 36.072227,
          level: "grid",
          longitude: 120.389455,
          name: "第三网格",
        },
        {
          agencyLevel: "grid",
          coordinates:
            "120.38577111171519,36.095762169637716,120.38544318588274,36.08317796726519,120.39339541546589,36.08080049372144,120.40122467708379,36.08026761565102,120.40188052874869,36.08276805856732,120.39929810296697,36.086990119140545,120.39757648953199,36.08981849070392,120.39901116927089,36.0943274884915,120.3977404524482,36.096418022709926,120.38577111171519,36.095762169637716",
          id: "94227891bc4ad5f40cb95081761592d9",
          latitude: 36.072227,
          level: "grid",
          longitude: 120.389455,
          name: "南宁第二网格",
        },
        {
          agencyLevel: "grid",
          coordinates:
            "120.3736430792519,36.09505039184175,120.373948253869,36.09119754789451,120.38543049205646,36.09115940106737,120.38577381481036,36.0960803587938,120.3736430792519,36.09505039184175",
          id: "a772a325e022484ef53e4a7d679726f1",
          latitude: 36.072227,
          level: "grid",
          longitude: 120.389455,
          name: "南宁第一网格",
        },
      ],

      iconArrays: [],
      // iconTextStyle: {},

      //policon图标样式
      polIconUrlArray: [
        "https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a219130b6bc74b0b80b5ddb0fce0892a.png",
        "https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/a775d15e62374350b80e5cdf1912a4eb.png",
        "https://elink-esua-epdc.oss-cn-qingdao.aliyuncs.com/epmet/test/20211116/884efcf6d6b44224a7fda599dd1b14cb.png",
      ],
      //icon图标样式
      iconUrlArray: [],
      iconTextColor: "#ffffff",
      distanceMax: null, //显示的坐标距离中心点的范围

      input_lat: null,
      input_lon: null,

      isChangeCenter: true, //是否根据多边形改变数组
    };
  },
  async mounted () { },
  methods: {
    showPosition () {
      let array = [this.input_lat, this.input_lon];
      map.getView().setCenter(array);
    },
    //加载地图:地图基本信息，多边形区域信息，多边形icon
    loadMap (
      mapInfo,
      polygonArray,
      polIconUrlArray,
      iconArrays,
      iconUrlArray,
      iconTextStyle,
      distanceMax
    ) {
      this.mapInfo = mapInfo;
      this.polygonArray = polygonArray;
      this.polIconUrlArray = polIconUrlArray || [];
      this.iconArrays = iconArrays;
      this.iconUrlArray = iconUrlArray;
      iconTextsStyle = iconTextStyle || iconTextsStyle;
      this.distanceMax = distanceMax;

      // iconArrays.forEach(item => {
      //   console.log(item.type, item.urlIndex, item.latitude, item.longitude)
      // });

      //初始化地图
      this.initMap()
      if (this.showPolIconLayer) {
        console.log("showPolIconLayer++++++++++++++++++++++", this.showPolIconLayer);
        //初始化多边形标注图层
        this.initPolIconLayer();
        //加载当前园区的标注
        // this.loadPolIcon()
      }
      if (this.showPolygonLayer) {
        //初始化多边形标注图层
        this.initPolygonLayer();
        //加载当前园区的标注
        this.loadPolygon();
      }

      if (this.showIconLayer) {
        //初始化icon图层
        this.initIconLayer();
        this.loadIcon();
      }

      if (this.isAddOpenlay) {
        //初始化icon图层
        this.addOverlay();
      }

      this.addMapClick();
    },

    //刷新地图:地图信息，多边形数组，标注数组，是否根据多边形改变中心点
    async refreshMap (mapInfo, polygonArray, iconArrays, isChangeCenter) {
      this.mapInfo = mapInfo;
      this.polygonArray = [];
      this.polygonArray = polygonArray;
      this.iconArrays = iconArrays;
      this.isChangeCenter = isChangeCenter;
      if (iconSource) {
        iconSource.clear();
      }
      if (polygonSource) {
        polygonSource.clear();
      }
      if (polIconSource) {
        polIconSource.clear();
      }
      this.initPolIconLayer();

      if (this.showPolygonLayer) {
        this.initPolygonLayer();
        //加载当前园区的标注
        this.loadPolygon();
      }
      if (this.showPolIconLayer) {
        this.initIconLayer();
        //加载当前园区的标注
        // this.loadPolIcon()
      }

      if (this.showIconLayer) {
        this.loadIcon();
      }
      this.setMapLocation();
      // gaodeMapLayer.getSource().changed()
    },

    //加载区域多边形
    loadPolygon () {
      polygonSource.clear(); //清空多边形标注
      // iconSource.clear()
      let featureData = []; //多边形数据数据

      if (this.polygonArray && this.polygonArray.length > 0) {
        //判断是否存在下级标注
        let oneData = {};

        this.polygonArray.forEach((polygonItem) => {
          if (polygonItem.coordinates && polygonItem.coordinates !== "") {
            //如果有坐标

            oneData = {
              type: "Feature",

              properties: { ...polygonItem },
              geometry: {
                type: "Polygon",
                coordinates: [],
              },
            };
            let coorArray = polygonItem.coordinates.split(","); //坐标数组

            let itemArray = []; //单个点位的[lon,lat]，数组
            let tempPolygonArray = []; //整个多边形的[[lon,lat],[lon,lat],[lon,lat]]数组

            coorArray.forEach((item, index) => {
              itemArray.push(item);
              if (index % 2 == 0) {
                //偶
              } else {
                //奇
                tempPolygonArray.push(itemArray);
                itemArray = [];
              }
            });
            oneData.geometry.coordinates.push(tempPolygonArray);
            featureData.push(oneData);
          }
        });
      }

      if (featureData && featureData.length > 0) {
        var geojsonObject = {
          type: "FeatureCollection",
          features: featureData,
        };
        let feature = new GeoJSON().readFeatures(geojsonObject);

        polygonSource.addFeatures(feature);

        if (this.showPolIconLayer) {
          this.loadPolIcon(feature);
        }
      }
    },

    //加载区域多边形的icon
    loadPolIcon (feature) {
      polIconSource.clear();
      let polyIconFeatures = [];
      console.log("feature-----", feature);
      feature.forEach((oneIcon) => {
        var extent = boundingExtent(oneIcon.getGeometry().getCoordinates()[0]); //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
        // var center = getCenter(extent);   //获取边界区域的中心位置
        //添加标注
        let x = (parseFloat(extent[0]) + parseFloat(extent[2])) / 2;
        let y = (parseFloat(extent[1]) + parseFloat(extent[3])) / 2;

        let polyIcon = new Feature({
          geometry: new Point([x, y]),
          id: oneIcon.id_,
          properties: {
            type: "icon",
            id: oneIcon.id_,
          },
        });
        console.log('oneIcon----ddd', oneIcon)
        let polyIconStyle = new Style({
          image: new Icon({
            // anchor: [0.5, 0.5],
            // imgSize: [32, 32],
            scale: this.areaScale,
            src: this.polIconUrlArray[0],
          }),
          text: createTextStyle(oneIcon),
        });

        polyIcon.setStyle(polyIconStyle);
        polyIconFeatures.push(polyIcon);
      });
      polIconSource.addFeatures(polyIconFeatures);
    },

    //加载icon图标
    loadIcon () {
      iconSource.clear(); //清空多边形标注
      if (this.iconArrays && this.iconArrays.length > 0) {
        let iconFeatures = [];

        this.iconArrays.forEach((oneIcon, index) => {
          //添加标注

          let iconItem = new Feature({
            geometry: new Point([oneIcon.longitude, oneIcon.latitude]),
            id: oneIcon.id,
            properties: {
              type: "icon",
              info: { ...oneIcon },
            },
          });
          console.log('oneIcon----', oneIcon)
          let iconStyle = new Style({
            image: new Icon({
              // anchor: [0.5, 0.5],
              // imgSize: [32, 32],
              // scale: 0.5,
              // src: oneIcon.urlIndex && this.iconUrlArray[oneIcon.urlIndex] || this.iconUrlArray[0] || this.iconUrlArray[0]
              src: (oneIcon.urlIndex && this.iconUrlArray[oneIcon.urlIndex]) || (oneIcon.index &&this.iconUrlArray[oneIcon.index]) || this.iconUrlArray[0]
            }),
            // text: createTextStyle(oneIcon)
          });

          iconItem.setStyle(iconStyle);

          if (this.distanceMax) {
            if (
              this.computedDistance(oneIcon.longitude, oneIcon.latitude, this.distanceMax)
            ) {
              iconFeatures.push(iconItem);
            }
          } else {
            iconFeatures.push(iconItem);
          }
        });

        iconSource.addFeatures(iconFeatures);
      }
    },

    //计算和中心点距离
    computedDistance (lon, lat, max) {
      let c1 = [2];
      c1[0] = lon;
      c1[1] = lat;
      let distance = getDistance(this.centerPoint, c1);
      // console.log(distance)
      return distance < max || distance === max;

      // debugger
      //   return
      // var wgs84Sphere = new ol.Sphere(6378137);
      // wgs84Sphere.haversineDistance([120.21592590991689, 30.210793016606],[120.21670777384473, 30.211168525868086]);
    },

    //初始化地图
    initMap () {
      this.firstCentermap();
      gaodeMapLayer = new TileLayer({
        title: "地图",
        source: new XYZ({
          //指定url瓦片
          url:
            "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
          wrapX: true, //x方向平铺，也可以选择false
        }),
        zIndex: 20,
      });

      mapView = new View({
        //中心点坐标
        center: this.centerPoint,
        // projection: 'EPSG:3857',
        projection: "EPSG:4326",
        zoom: this.zoom,
        minZoom: this.minZoom,
      });

      //初始化map和地图底图
      //创建地图容器
      map = new Map({
        layers: [gaodeMapLayer],
        //加载瓦片图层数据
        view: mapView,
        target: this.mapId,
        //目标加载到map中
      });

      var mousePositionControl = new MousePosition({
        coordinateFormat: createStringXY(6), //获取位置
        projection: "EPSG:4326",
        className: "custom-mouse-position",
        target: document.getElementById("mouse-position"), //将位置数据放到那里
        undefinedHTML: "&nbsp",
      });
      map.addControl(mousePositionControl);

      //去除双击放大效果
      const dblClickInteraction = map
        .getInteractions()
        .getArray()
        .find((interaction) => {
          return interaction instanceof DoubleClickZoom;
        });
      map.removeInteraction(dblClickInteraction);
    },
    //设置地图定位的中心点和缩放级别
    setMapLocation () {
      if (!this.isChangeCenter) {
        return false;
      }
      // debugger
      if (!this.zoom) {
        this.setZoom(this.mapInfo.agencyLevel);
      }
      this.centerPoint = [];

      //如果存在中心点（返回时赋值）
      if (this.center && this.center.length > 0) {
        this.centerPoint = this.center;
        this.centerFlag = "point";
        this.center = [];
      } else if (polygonLayer.getSource().getFeatures()[0]) {
        //如果是初次进入,存在下级组织
        this.centerFlag = "flag_polygon";
      } else if (this.mapInfo.longitude && this.mapInfo.latitude) {
        this.centerPoint.push(this.mapInfo.longitude);
        this.centerPoint.push(this.mapInfo.latitude);
        this.centerFlag = "point";
      } else {
        this.centerPoint = centerPointGlobal;
        this.centerFlag = "point";
      }
      // debugger
      if (this.centerFlag === "flag_parent") {
        let parentFeatures = parentLayer.getSource().getFeatures()[0];
        let polygon = parentFeatures.getGeometry();
        map.getView().fit(polygon, map.getSize());
        this.zoom = map.getView().getZoom() - 1;
      } else if (this.centerFlag === "flag_polygon") {
        let polygonFeatures = polygonLayer.getSource().getFeatures()[0];
        let polygon = polygonFeatures.getGeometry();
        map.getView().fit(polygon, map.getSize());
        this.zoom = map.getView().getZoom() - 1;
      } else {
        mapView.setCenter(this.centerPoint);
      }
      mapView.setZoom(this.zoom);
    },
    firstCentermap () {
      if (this.mapInfo.longitude && this.mapInfo.latitude) {
        this.centerPoint = [];
        this.centerPoint.push(this.mapInfo.longitude);
        this.centerPoint.push(this.mapInfo.latitude);
      } else {
        this.centerPoint = centerPointGlobal;
      }

      this.setZoom(this.mapInfo.agencyLevel);
    },

    //根据组织层级设置缩放级别
    setZoom (level) {
      if (level === "district") {
        this.zoom = 11;
      } else if (level === "street") {
        this.zoom = 12;
      } else if (level === "community") {
        this.zoom = 13;
      }
    },

    //初始化多边形标注图层
    initPolygonLayer () {
      polygonSource = new VectorSource({
        // features: (new GeoJSON()).readFeatures(geojsonObject)
        wrapX: false,
      });

      polygonLayer = new VectorLayer({
        source: polygonSource,
        style: polygonStyleFunction,
        zIndex: 50,
      });
      let that = this;
      //选中多边形后的样式
      var overlayStyle = (function () {
        return function (feature) {
          var styles = {};
          styles["Polygon"] = [
            new Style({
              stroke: new Stroke({
                color: "#ec9000",
                width: 2,
              }),
            }),

            new Style({
              fill: new Fill({
                color: "rgba(0, 0, 255, 0.1)",
              }),
            }),
            new Style({
              // text: createTextStyle(feature) // 报错 暂时注掉 zhaotongyao 2022.05.19
            }),
          ];
          styles["MultiPolygon"] = styles["Polygon"];
          return styles[feature.getGeometry().getType()];
        };
      })();
      // select = new Select({
      //   style: overlayStyle
      // });
      // 有BUG 加入多边形选中样式时，如果同时存在icon层和多边形层，点击icon会使icon消失 ---zhaotongyao 2022.06.01

      // map.addLayer(polygonLayer);
      // map.addInteraction(select);
      select = new Select({
        style: overlayStyle
      });


      map.addLayer(polygonLayer)
      if (this.$route.path == '/main-shuju/visual-communityParty-gridParty' || this.$route.path == '/main-shuju/visual-communityParty-community') { // 2022.6.9 网格党建平面图 联建单位分析页面 点位点击以后会消失，屏蔽这段代码以后可以解决
         console.log('去掉默认点击')
      } else {
          map.addInteraction(select);
      }
    },

    //初始化多边形icon图层
    initPolIconLayer () {
      polIconSource = new VectorSource({
        //features: (new GeoJSON()).readFeatures(geojsonObject)
        wrapX: false,
      });

      polIconLayer = new VectorLayer({
        source: polIconSource,
        zIndex: 70,
      });

      map.addLayer(polIconLayer);
    },

    //初始化icon图层
    initIconLayer () {
      iconSource = new VectorSource({
        //features: (new GeoJSON()).readFeatures(geojsonObject)
        wrapX: false,
      });

      iconLayer = new VectorLayer({
        source: iconSource,
        zIndex: 90,
      });

      map.addLayer(iconLayer);
      // select = new Select({ condition: click, });

      // map.addInteraction(select);

      // select.on('select', e => {
      //   this.$emit('clickFeature', e)
      // });
    },

    //添加覆盖层
    addOverlay () {
      // 使用变量存储弹窗所需的 DOM 对象
      var container = document.getElementById("popup");
      var closer = document.getElementById("popup-closer");
      var content = document.getElementById("popup-content");
      var goMore = document.getElementById("popup-goMore")
        ? document.getElementById("popup-goMore")
        : null;

      // 创建一个弹窗 Overlay 对象
      this.overlay = new Overlay({
        element: container, //绑定 Overlay 对象和 DOM 对象的
        autoPan: true, // 定义弹出窗口在边缘点击时候可能不完整 设置自动平移效果
        autoPanAnimation: {
          duration: 250, //自动平移效果的动画时间 9毫秒
        },
        zIndex: 100,
      });
      // 将弹窗添加到 map 地图中
      map.addOverlay(this.overlay);
      let _that = this;

      /**
       * 为弹窗添加一个响应关闭的函数
       */
      closer.onclick = function () {
        _that.overlay.setPosition(undefined);
        closer.blur();
        return false;
      };
      if (goMore) {
        goMore.onclick = function () {
          _that.$emit("lookMore");
        };
      }
    },

    //注册地图点击事件
    addMapClick () {
      let _that = this;

      map.on("click", function (evt) {
        const feature = map.forEachFeatureAtPixel(evt.pixel, function (feature) {
          return feature;
        });
        if (feature) {
          // console.log(feature)
          if (_that.clickType === "back") {
            _that.$emit("clickFeature", feature);
          } else if (_that.clickType === "popup") {
            _that.$emit("clickFeature", feature);
          } else {
            console.log("此处没有标注");
          }
        }
      });
    },

    handleShowPopup (showData, coordinate, isShowMore) {
      if (isShowMore) {
        document.getElementById("popup-goMore").style.display = "block";
      } else {
        document.getElementById("popup-goMore").style.display = "none";
      }
      console.log(this.overlay.getElement());
      let content = document.getElementById("popup-content");
      this.overlay.getElement().style.display = "block";
      this.overlay.getElement().parentNode.style.display = "block";
      this.overlay.getElement().parentNode.parentNode.style.display = "block";
      content.innerHTML = showData;
      this.overlay.setPosition(coordinate);
      //把 overlay 显示到指定的 x,y坐标
    },
    // 关闭弹窗
    handleClosePopup () {
      this.overlay.setPosition(undefined);
      document.getElementById("popup-closer").blur();
      return false;
    },

    //取随机数
    getRndBetween (lowerLimit, upperLimit) {
      return Math.floor(Math.random() * (upperLimit - lowerLimit + 1)) + lowerLimit;
    },

    //开启加载动画
    startLoading () {
      loading = Loading.service({
        lock: true, //是否锁定
        text: "正在加载……", //加载中需要显示的文字
        background: "rgba(0,0,0,.7)", //背景颜色
      });
    },

    //结束加载动画
    endLoading () {
      //clearTimeout(timer);
      if (loading) {
        loading.close();
      }
    },
  },
  props: {
    mapId: {
      type: String,
      default: "map",
    },
    //是否显示多边形图层
    showPolygonLayer: {
      type: Boolean,
      default: false,
    },
    //是否显示多边形icon图层
    showPolIconLayer: {
      type: Boolean,
      default: false,
    },

    //是否显示标注
    showIconLayer: {
      type: Boolean,
      default: false,
    },
    //是否添加弹出框图层
    isAddOpenlay: {
      type: Boolean,
      default: false,
    },

    //点击地图事件类型,back:返回，popup:弹出层
    clickType: {
      type: String,
      default: "back",
    },
    areaScale: {
      type: Number,
      default: 0.5,
    },
  },
  computed: {
    mapHeight () {
      return this.clientHeight - 120;
    },

    ...mapGetters(["clientHeight"]),
  },
  components: {},
};
export default vueGis;
</script>

<style lang="scss" src="@/assets/scss/modules/visual/basicInfoMain.scss" scoped></style>

<style lang="scss">
.div_content_map {
  .ol-viewport {
    border-radius: 5px;
  }
  .div_map {
    box-sizing: border-box;
    width: 100%;
    // padding: 10px 5px 13px;
    // margin-top: 8px;
    height: 100%;
    color: #fff;
  }
}
.ol-overlaycontainer-stopevent {
  display: none;
}
.ol-popup {
  position: absolute;
  background-color: #1257c9;
  -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
  padding: 15px;
  border-radius: 10px;
  border: 1px solid #1257c9;
  bottom: 12px;
  left: -50px;
  text-align: left;
}
.ol-popup:after,
.ol-popup:before {
  top: 100%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}
.ol-popup:after {
  border-top-color: 1257c9;
  border-width: 10px;
  left: 48px;
  margin-left: -10px;
}
.ol-popup:before {
  border-top-color: #1257c9;
  border-width: 11px;
  left: 48px;
  margin-left: -11px;
}
.ol-popup-closer {
  text-decoration: none;
  position: absolute;
  top: 2px;
  right: 8px;
}
.popup-content {
  width: 300px;
}
.popup-goMore {
  margin: 20px 0;
}
.ol-popup-closer:after {
  content: "✖";
  // color: rgba(1, 17, 104, 1);
  color: #fff;
}
</style>