[JavaScript知识库]leaflet图层顺序的解决办法

leaflet图层顺序的解决办法

项目中使用到leaflet这个技术渲染地图 路线 以及图层，但是图层切换之后 高速公路 图层一会有 一会没有
之后考虑到是图层加载顺序的问题 给渲染方法 添加settimeout 定时器 问题得到解决 但是 地图放大 缩小 移动地图还是会出现问题
最终找到官方api 图层置顶 及图层置底问题解决
附上如下代码

给其他图层加上这句 将 其他图层置于底部
rainfall(id, ind) {
      console.log(ind, "打印的降雨");
      this.shzindex = 0
      this.rainfallDestroyLayer(8); // 清除其他图层

      this.dawutulie = false;
      this.center = [39.983, 117.369];
      this.idNumber = id;
      const map = this.$refs.Pmap.mapObject;
      const MySource = wms.Source.extend({});
      this.buttonList[ind].layer = new MySource(
        "http://103.79.201.149:10078/geoserver/tianjinjizhou/wms?",
        {
          transparent: true,
          format: "image/png"
        }
      ).getLayer(`tianjinjizhou:shanhong${this.idNumber}tif`);
      map.addLayer(this.buttonList[ind].layer);
      this.buttonList[ind].layer.bringToBack(); // 将这个图层置于底部
      this.mountTrafficIndex(this.time, ind);
    },
// this.buttonList[ind].layer.bringToBack();

mountTrafficIndex(hour, ind) {
      // this.destroyLayer(hour, ind);
      const map = this.$refs.Pmap.mapObject;
      setTimeout(() => {
        console.log('监听定时器是否执行')
        if (ind < 6) {
          console.log("渲染省道县道");
          const MySource = wms.Source.extend({});
          this.typeSwitchLayer[7].layer = new MySource(
            geoservers + "/geoserver/tianjinjizhou/wms?",
            {
              transparent: true,
              format: "image/png",
              zIndex: 100
            }
          ).getLayer(this.typeSwitchLayer[7].name);
          map.addLayer(this.typeSwitchLayer[7].layer);
          this.typeSwitchLayer[8].layer = new MySource(
            geoservers + "/geoserver/tianjinjizhou/wms?",
            {
              transparent: true,
              format: "image/png"
            }
          ).getLayer(this.typeSwitchLayer[8].name);
          map.addLayer(this.typeSwitchLayer[8].layer);

          this.typeSwitchLayer[9].layer = new MySource(
            geoservers + "/geoserver/highway/wms?",
            {
              transparent: true,
              format: "image/png",
              zIndex: 100,
              cql_filter:
                "date_time='" +
                hour +
                "'and province_code=" +
                this.$route.meta.code +
                ".000000"
            }
          ).getLayer(this.typeSwitchLayer[9].name);
          map.addLayer(this.typeSwitchLayer[9].layer);
        }
      }, 1000);
    },

完整代码如下

<template>
  <div class="warningBigBox">
    <div class="leftBox">
      <div class="leftTop">
        <div class="iconImg">
          <img src="@/assets/images/jiantou.png" alt="">
          <span>降水情景</span>
        </div>
        <div class="buttonBox">
          <div @click="rainfall(item.id,index)" class="buttonItem" :class="idNumber == item.id ? 'checked':''" v-for="(item, index) in buttonList" :key="index">
            {{item.name}}
          </div>

        </div>

      </div>
      <div class="leftTop">
        <div class="iconImg">
          <img src="@/assets/images/jiantou.png" alt="">
          <span>大雾区划 </span>
        </div>
        <div class="buttonBox">
          <div class="buttonItem" @click="heavyFog(item, index)" v-for="(item, index) in buttonWuList" :key="index">
            {{item.name}}
          </div>

        </div>

      </div>
    </div>
    <div class="rightBox">
      <l-map class="lmapcss" ref="Pmap" :center="center" :options="options" :zoom="zoom" :maxBounds="maxBounds" :min-zoom="zoomRange[0]" :max-zoom="zoomRange[1]">
        <l-layer-group>
          <l-tile-layer :url="coverUrl" :z-index="2" />
          <l-wms-tile-layer ref="wms" v-for="item in layers" :key="item.name" :base-url="geoservers + `/geoserver/highway/wms?${item.name === '区县行政区划' ? '' : item.name === '世界行政区划' ? '' : 'cql_filter=province='}` + code" :layers="item.layer" :visible="item.visible" format="image/png" :transparent="true" :z-index="item.num" />
          <!-- 临界降雨量图层 -->
          <!-- <l-wms-tile-layer base-url="http://103.79.201.149:10078/geoserver/tianjinjizhou/wms?" service='WMS' request='GetMap' :layers="`tianjinjizhou:shanhong${idNumber}tif`" format="image/png" :transparent="true" :z-index="shzindex"/> -->

          <!-- 大雾图层 -->
          <l-wms-tile-layer base-url="http://103.79.201.149:10078/geoserver/tianjinjizhou/wms" service='WMS' request='GetMap' :layers="wuLayers" format="image/png" :transparent="true" :z-index="shzindex" />

        </l-layer-group>
        <template>
          <l-flex-control position="bottomright" :bottom="30" :right="5">
            <div class="legend-box" :class="{ 'active': !active }" v-if="dawutulie">
              <p>风险等级</p>
              <ul>
                <li v-for="(list, ind) in roadStatusdw" :key="ind">
                  <span>
                    <i :style="{backgroundColor: list.color}"></i>
                  </span>
                  <span>{{list.title}}</span>
                </li>
              </ul>
            </div>

            <div class="legend-box" :class="{ 'active': !active }" v-else>
              <p>风险等级</p>
              <ul>
                <li v-for="(list, ind) in roadStatus" :key="ind">
                  <span>
                    <i :style="{backgroundColor: list.color}"></i>
                  </span>
                  <span>{{list.title}}</span>
                </li>
              </ul>
            </div>
          </l-flex-control>
        </template>
      </l-map>

      <!-- 社会资讯统计 -->

    </div>
  </div>
</template>

<script>
import { geoservers } from "@/settings.js";
import {
  LMap,
  LLayerGroup,
  LTileLayer,
  LWMSTileLayer,
  LImageOverlay
} from "vue2-leaflet";
import bus from "@/utils/bus";
import wms from "@/lib/leaflet.wms.js";
import LFlexControl from "@/leaflet/LFlexControl";
import LFastMap from "@/leaflet/LFastMap";
import TimeLine from "@/components/TimeLine";
import PieEcharts from "@/components/MyEcharts/pieEcharts";
import infoWindow from "@/components/InfoWindow/index.vue";
import LeftModel from "@/components/LeftModel";
// import { earlyLevel } from '../../utils/earlyLevel.js';
import Vue from "vue";
import axios from "axios";
import {
  getPieData,
  markersData,
  getWeatherData,
  minuteData
} from "@/api/mapPage.js";
var moment = require("moment");
const echarts = require("echarts");
// 幕布
function createCoverUrl() {
  let canvas = document.createElement("CANVAS");
  canvas.width = 1250;
  canvas.height = 800;
  let ctx = canvas.getContext("2d");
  //   ctx.fillStyle = "#050F1A";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  return canvas.toDataURL();
}
export default {
  data() {
    return {
      shzindex: 8,
      dawutulie: true,
      wu_index: "",
      wuLayers: "tianjinjizhou:dawutif",
      // 山洪10  15  20  30  50  100 图层
      buttonList: [
        {
          name: "94mm",
          id: "5",
          layer: null
        },
        {
          name: "113mm",
          id: "10",
          layer: null
        },
        {
          name: "124mm",
          id: "15",
          layer: null
        },
        {
          name: "135mm",
          id: "20",
          layer: null
        },
        {
          name: "153mm",
          id: "30",
          layer: null
        },
        {
          name: "169mm",
          id: "50",
          layer: null
        },
        {
          name: "200mm",
          id: "100",
          layer: null
        }
      ],
      idNumber: "",
      buttonWuList: [{ name: "大雾风险区划", layer: null }],
      zoom: 8.5,
      center: this.$route.meta.center.split(",") || [39.12, 117.2],
      maxBounds: [[3.83703, 53.56362], [73.502355, 135.09567]],
      coverUrl: createCoverUrl(),
      geoservers,
      layers: [
        {
          layer: "highway:world_province",
          name: "世界行政区划",
          visible: true,
          num: 2
        },
        {
          layer: "highway:chinaprovince",
          name: "省级行政区划",
          visible: true,
          num: 3
        },
        {
          layer: "highway:county-21-05_gray",
          name: "区县行政区划",
          visible: true,
          num: 4
        }
      ],
      zoomRange: [6, 16],
      // url: './static/image/shanxi.png',
      // bounds: [[31.42, 105.29], [39.35, 111.15]],
      options: {
        attributionControl: false,
        zoomControl: false
      },
      // 不同类型多选控制
      typeActivate: [false, false, false, false, false, false, false, false],
      showFlag: false,
      pieType: [
        { type: "vis", title: "能见度" },
        { type: "prect", title: "降水量" },
        { type: "uv", title: "极大风速" }
      ],
      labelList: {},
      loading: false,
      pieData: null,
      active: true,
      height: 290,
      roadStatus: [
        { color: "#ccccff", title: "一定风险" },
        { color: "#9883f7", title: "较高风险" },
        { color: "#6145ed", title: "高风险" },
        { color: "#0000e0", title: "极高风险" }
      ],
      roadStatusdw: [
        { color: "#ffebaf", title: "一定风险" },
        { color: "#ffd37f", title: "较高风险" },
        { color: "#ffbb00", title: "高风险" },
        { color: "#e60000", title: "极高风险" }
      ],
      typeSwitchLayer: {
        0: {
          layer: null,
          name: "tianjinjizhou:meteorological_data_real_road_province"
        },
        1: {
          layer: null,
          name: "tianjinjizhou:meteorological_data_real_tg_province"
        },
        2: {
          layer: null,
          name: "tianjinjizhou:meteorological_data_real_prect_province"
        },
        3: {
          layer: null,
          name: "tianjinjizhou:meteorological_data_real_vis_province"
        },
        4: {
          layer: null,
          name: "tianjinjizhou:meteorological_data_real_ta_province"
        },
        5: {
          layer: null,
          name: "tianjinjizhou:meteorological_data_real_uv_province"
        },
        // 降水道路图层，暂时没有
        6: {
          layer: null,
          name: "tianjinjizhou:meteorological_data_real_uv_province"
        },
        7: {
          layer: null,
          name: "tianjinjizhou:tianjinshengdao"
        },
        8: {
          layer: null,
          name: "tianjinjizhou:tianjinxiandao"
        },
        9: {
          layer: null,
          name: "highway:meteorological_data_real_uv_province"
        }
      }
    };
  },
  components: {
    LMap,
    LFlexControl,
    LFastMap,
    LLayerGroup,
    LTileLayer,
    LImageOverlay,
    TimeLine,
    PieEcharts,
    infoWindow,
    LeftModel,
    LWmsTileLayer: LWMSTileLayer
  },
  created() {
    // this.getWeather(1);
    this.code = this.$route.meta.code;
    console.log(this.code);
  },
  beforeDestroy() {
    this.timer = null;
  },
  mounted() {
    this.provinceObj = this.$route.meta.code;
    this.labelList = {
      ...this.form,
      vis_five_level: "50",
      prect_five_level: "0",
      uv_five_level: "0"
    };
    let d = new Date();
    this.time = moment(d)
      .subtract(0, "days")
      .format("YYYY-MM-DD HH:00:00");
    this.mountTrafficIndex(this.time, 0);
	
	// 下方这个方法 没有用 本来计划监听 地图 缩放 事件的
    this.$refs.Pmap.mapObject.on("zoomend", e => {
      //获取当前放大或者缩小的等级
      console.log(e, "监听地图放大缩小");
      this.$nextTick(()=> {
        this.mountTrafficIndex(this.time, 0);
      })

      
    });
    // mousemove  focus // ：当用户在地图上进行标引、点击或移动时进行聚焦。
    // dragend 拖动结束触发

//     drag（拖动）：用户拖动地图时不断重复地触发。
// dragend（拖动结束）：用户停止拖动时触发。
// zoomstart（缩放开始）：当地图缩放即将发生时触发。（比如缩放动作开始前）
// zoomend（缩放结束）：当地图缩放时触发。
// autopanstart（自动平移开始）：打开弹出窗口时地图开始自动平移时触发。
// layeradd（添加图层）：当一个新的图层添加到地图上时触发。
// layerremove（图层移除）：当一些图层从地图上移除时触发。
// baselayerchange（基础图层改变）：当通过图层控制台改变基础图层时触发。
// locationfound（位置查找）：当地理寻址成功时触发（使用locate方法）。
// locationerror（定位错误）：当地理寻址错误时触发（使用locate方法）。
// popupopen（打开弹出框）：当弹出框打开时触发（使用openPopup方法）。
// popupclose（关闭弹出框）：当弹出框关闭时触发（使用closePopup方法）。
  },
  methods: {
    // 临界降雨量
    rainfall(id, ind) {
      console.log(ind, "打印的降雨");
      this.shzindex = 0
      this.rainfallDestroyLayer(8);
      this.rainfallDestroyLayer(9);

      this.dawutulie = false;
      // this.shzindex = 0;
      // this.wuLayers = "";
      this.center = [39.983, 117.369];
      this.idNumber = id;
      const map = this.$refs.Pmap.mapObject;
      const MySource = wms.Source.extend({});
      this.buttonList[ind].layer = new MySource(
        "http://103.79.201.149:10078/geoserver/tianjinjizhou/wms?",
        {
          transparent: true,
          format: "image/png"
        }
      ).getLayer(`tianjinjizhou:shanhong${this.idNumber}tif`);
      map.addLayer(this.buttonList[ind].layer);
      this.buttonList[ind].layer.bringToBack();
      this.mountTrafficIndex(this.time, ind);
    },
    rainfallDestroyLayer(ind) {
      const map = this.$refs.Pmap.mapObject;
      console.log(this.buttonList, "获取的降雨数组");
      if (ind === 9) {
        this.buttonList.forEach(item => {
          if (item.layer) {
            console.log(item.layer, "计划清除降雨量");
            map.removeLayer(item.layer);
            item.layer = null;
          }
        });
      } else {
        console.log(this.buttonWuList, "获取大雾信息");
        this.buttonWuList.forEach(item => {
          if (item.layer) {
            console.log(item.layer, "计划大雾清除");
            map.removeLayer(item);
            item.layer = null;
          }
        });
      }
    },
    // 点击大雾
    heavyFog(item, ind) {
      console.log(item, ind, "大无涂层");
      this.shzindex = 8;
      this.dawutulie = true;
      this.center = [39.12, 117.2];
      this.idNumber = "";
      this.rainfallDestroyLayer(9);
      // const map = this.$refs.Pmap.mapObject;
      // const MySource = wms.Source.extend({});
      // this.buttonWuList[ind].layer = new MySource(
      //   "http://103.79.201.149:10078/geoserver/tianjinjizhou/wms",
      //   {
      //     transparent: true,
      //     format: "image/png"
      //   }
      // ).getLayer(`tianjinjizhou:shanhong${this.idNumber}tif`);
      // map.addLayer(this.buttonWuList[ind].layer);
    },
    timelineChange(d) {
      this.current = d;
    },
    mountTrafficIndex(hour, ind) {
      // this.destroyLayer(hour, ind);
      const map = this.$refs.Pmap.mapObject;
      setTimeout(() => {
        console.log('监听定时器是否执行')
        if (ind < 6) {
          console.log("渲染省道县道");
          const MySource = wms.Source.extend({});
          this.typeSwitchLayer[7].layer = new MySource(
            geoservers + "/geoserver/tianjinjizhou/wms?",
            {
              transparent: true,
              format: "image/png",
              zIndex: 100
            }
          ).getLayer(this.typeSwitchLayer[7].name);
          map.addLayer(this.typeSwitchLayer[7].layer);
          this.typeSwitchLayer[8].layer = new MySource(
            geoservers + "/geoserver/tianjinjizhou/wms?",
            {
              transparent: true,
              format: "image/png"
            }
          ).getLayer(this.typeSwitchLayer[8].name);
          map.addLayer(this.typeSwitchLayer[8].layer);

          this.typeSwitchLayer[9].layer = new MySource(
            geoservers + "/geoserver/highway/wms?",
            {
              transparent: true,
              format: "image/png",
              zIndex: 100,
              cql_filter:
                "date_time='" +
                hour +
                "'and province_code=" +
                this.$route.meta.code +
                ".000000"
            }
          ).getLayer(this.typeSwitchLayer[9].name);
          map.addLayer(this.typeSwitchLayer[9].layer);
        }
      }, 1000);
    },
    destroyLayer(time, ind) {
      const map = this.$refs.Pmap.mapObject;
      Object.values(this.typeSwitchLayer).forEach(item => {
        if (item.layer) {
          map.removeLayer(item.layer);
          item.layer = null;
        }
      });
      // this.mountTrafficIndex(time, ind);
    }
  }
};
</script>

<style lang='scss' scoped>
.lmapcss {
  width: 1243px;
  height: 790px;
  margin: 8px;
}
.warningBigBox {
  width: 1744px;
  display: flex;
  height: 804px;
  margin: 0 auto;
  .leftBox {
    width: 442px;
    background-color: pink;
    margin-right: 49px;
    background: url("../../assets/images/left.png");
    background-size: 100% 100%;
    padding: 49px 28px;
    box-sizing: border-box;

    .leftTop {
      .iconImg {
        padding-bottom: 30px;
        span {
          width: 75px;
          height: 27px;
          color: rgba(255, 139, 43, 1);
          letter-spacing: 1px;
          font-size: 18px;
        }
      }
    }
    .buttonBox {
      display: flex;
      flex-wrap: wrap;
      .buttonItem {
        width: 46%;
        height: 50px;
        background: rgba(0, 62.9, 102, 1);
        color: #fff;
        text-align: center;
        line-height: 50px;
        margin-right: 13px;
        margin-bottom: 25px;
      }
      .checked {
        background: #17b0f7;
        color: #44f0ff;
      }
    }
  }
  .rightBox {
    width: 1253px;
    background-color: pink;
    background: url("../../assets/images/right.png");
    background-size: 100% 100%;
  }
}
.legend-box {
  margin-top: 10px;
  width: 180px;
  background: #0a1a38;
  opacity: 0.9;
  border-radius: 4px;
  color: #fff;
  transform: translate(0);
  transition: transform 0.3s;
  &.active {
    // position: absolute;
    // bottom: -270px;
    // right: 10px;
    // z-index: 1111;
    transform: translateY(240px);
  }
  p {
    padding: 5px 0 0 10px;
    font-size: 16px;
  }
  ul {
    width: 100%;
    padding: 10px;
    li {
      width: 100%;
      height: 22px;
      line-height: 22px;
      display: flex;
      span {
        display: inline-block;
        font-size: 14px;
        i {
          display: inline-block;
          width: 22px;
          height: 13px;
          border-radius: 2px;
        }
        &:first-child {
          width: 30px;
        }
        &:nth-child(2) {
          flex: 1;
          font-size: 12px;
          text-align: center;
          margin-top: -1px;
        }
      }
    }
  }
}
</style>