leaflet 自定义点位弹窗样式

最新推荐文章于 2024-05-19 00:00:00 发布

流氓也是种气质 _Cookie

最新推荐文章于 2024-05-19 00:00:00 发布

阅读量669

点赞数

文章标签： leaflet

本文链接：https://blog.csdn.net/qq_37550440/article/details/130923125

版权

效果图：

<div class="stationPopBox">
    <div class="stationName">${i.name}</div>
    <div class="stationInfo">
      <div class="baseInfo">
        <div class="imgBox"></div>
        <span>监测日期：</span>
        <span>${i.monitoringTime ? i.monitoringTime : '-'}</span>
      </div>
      <div class="baseInfo">
        <div class="imgBox"></div>
        <span>所属区县：</span>
        <span>${i.districtName ? i.districtName : '-'}</span>
      </div>
     <div class="baseInfo">
        <div class="imgBox"></div>
        <span>管理级别：</span>
        <span>${i.level == 1 ? "国控" : i.level == 2 ? "市控" : i.level == 3 ? "国标站" : i.level == 4 ? "微站" : "-"}</span>
     </div>



.leaflet-fade-anim .leaflet-map-pane .leaflet-popup{
  background:url("../../assets/images/airImages/stationPopBg.png")!important;
  width: 667px!important;
  height: 624px!important;
}
.leaflet-popup-content-wrapper, .leaflet-popup-tip{
  background:transparent!important;
  margin: 30px 25px;
  color: #b0bcbb!important;
  box-shadow: none!important;
}
.leaflet-popup-content{
  width: 100%!important;
  margin: 0!important;
}
.stationPopBox .stationName{
  font-size: 30px;
  color: #fff;
  font-weight: bolder;
  height: 70px;
  display: flex;
  align-items: center;
  padding-left: 40px;
}
.stationInfo{
  padding: 30px 40px 0 40px;
}
.stationInfo .baseInfo{
  display: flex;
  align-items: center;
  margin-bottom: 17px;
  font-size: 28px;
}
.stationInfo .baseInfo .imgBox{
  margin-right: 10px;
  background: url("../../assets/images/airImages/popIcon.png");
  width: 25px;
  height: 25px;
}
.factorInfoBox{
  display: flex;
  flex-wrap: wrap;
  padding: 0 40px;
  font-size: 28px;
}
.factorInfoBox >div{
  flex: 0 0 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}
.factorInfoBox >div>span:nth-of-type(1){
  width: 70px;
  text-align: right;
}
.factorInfoBox >div>span:nth-of-type(2){
  width: 130px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  margin-left: 20px;
}
.leaflet-container a.leaflet-popup-close-button {
  top: 51px!important;
  right: 60px!important;
  height: 30px!important;
  font: 53px/24px Tahoma, Verdana, sans-serif!important;
  color: transparent!important;
}}