项目中使用到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);
},
