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>
710
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
