1.效果图
2.思路
思路很简单，就是在panel中加一个树控件，选择时控制该图层的显影
3.实现
我自己随便封装了一下，代码如下：
<template>
<div class="layerManage">
<div class="header">图层管理</div>
<div class="layer_body">
<el-tree
class="tree"
:data="tree_data"
:props="defaultProps"
show-checkbox
node-key="id"
:default-checked-keys="[1,100]"
:check-strictly="true"
@check-change="handleCheckChange">
</el-tree>
</div>
</div>
</template>
<script>
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import TileWMS from 'ol/source/TileWMS';
import config from './../../../config/config'
export default {
name: "layerManage",
data(){
return{
}
},
mounted(){
},
methods:{
//初始化地图
handleCheckChange(data, checked, indeterminate) {
if(checked){
//加载基础底图
if(data.children==undefined){
if(data.id!=null){
//如果已经加了，打开该图层，并移动到指定的index否则，添加
if(this.isAddedByName(data.layerName)){
this.openLayerByName(data.layerName)
}else{
this.addBaseMap(data.url,data.layerName,data.id)
}
}else{
//加载业务图层
this.addWMSLayer(data)
}
}else{
//清除所有图层
}
}else{
this.closeLayerByName(data.layerName)
}
},
/**
* 添加基础图层
*/
addBaseMap(url,name,id){
let layer=new TileLayer({
source:new XYZ({
// url:'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{y}!2m3!1e0!2sm!3i380072576!3m8!2szh-CN!3scn!5e1105!12m4!1e68!2m2!1sset!2sRoadmap!4e0!5m1!1e0'
url:url
}),
name:name
})
layer.setZIndex(id)
this.map.addLayer(layer)
},
/**
* 添加wms图层
* */
addWMSLayer(data){
let workSpaceName=data.styleName+'Map'
let layerName=data.tableName
let layers=`${workSpaceName}:${layerName}`;
let url=`${config.GeoserverIP}/geoserver/${workSpaceName}/wms`;
let layer=new TileLayer({
source: new TileWMS({
url: url,
params: {'LAYERS': layers, 'TILED': true},
serverType: 'geoserver',
// Countries have transparency, so do not fade tiles:
transition: 0
}),
name: data.layerName
})
// let params=
layer.setZIndex(100)
this.map.addLayer(layer)
},
/**
* 根据名称判断是否有该图层
*/
isAddedByName(name){
let visible=false
if(this.map!=null){
let layers=this.map.getLayers();
for(let i=0;i<layers.getLength();i++){
if(layers.item(i).get('name')==name){
visible=true
}
}
}
return visible
},
/**
* 根据名称清除图层
* @param name
*/
removeLayerByName(name){
let layers=this.map.getLayers();
for(let i=0;i<layers.getLength();i++){
if(layers.item(i).get('name')==name){
this.map.removeLayer(layers.item(i))
}
}
},
/**
* 关闭图层
* @param name
*/
closeLayerByName(name){
let layers=this.map.getLayers();
for(let i=0;i<layers.getLength();i++){
if(layers.item(i).get('name')==name){
layers.item(i).setVisible(false)
}
}
},
/**
* 根据名称打开图层
* @param name
*/
openLayerByName(name){
let layers=this.map.getLayers();
for(let i=0;i<layers.getLength();i++){
if(layers.item(i).get('name')==name){
layers.item(i).setVisible(true)
//设置到最上层
// layers.item(i).setZIndex(layers.getLength())
}
}
},
},
props:{
defaultProps:{
type: Object,
},
tree_data:{
type: Array
},
map:{
}
}
}
</script>
<style lang="scss">
.layerManage{
position: absolute;
right:1%;
top:10%;
width:250px;
border-radius: 5px;
.header{
color: white;
background-color: #13E3E2;
font-size: 20px;
padding: 10px 30px;
border-radius: 5px 5px 0 0;
}
.layer_body{
background-color:rgba(72,103,87,0.5);
/*min-height: 300px;*/
/*max-height: 800px;*/
height: 100%;
max-height: 750px;
overflow:auto;/*内容超出后隐藏*/
border: solid 2px #13E2E3;
padding: 20px;
.tree{
background-color:rgba(72,103,87,0.5);
color: white;
.el-tree-node__content:hover {
background-color: rgba(145, 255, 245, 0.53);
}
.el-tree-node:focus > .el-tree-node__content {
background-color: rgba(145, 255, 245, 0.53);
}
}
}
}
</style>
