openlayer中控制图层的显示和隐藏

女爷i 2021-07-25 11:04 1588阅读 0赞

# 方式一：Layer.setVisible(true) #

一种是通过Layer.setVisible(true)的方式让图层显示或隐藏，这种方式只是让图层中CSS的visible属性改为了false，其dom依然存在于页面中；

<template>
      <div id="map">
        <div style="position: fixed; top: 15%; right: 30%; z-index: 99">
          
          <el-radio-group
            v-model="baselayerName"
            @change="changeBaseLayer"
            style="display: flex; flex-flow: column nowrap"
          >
            <el-radio label="tianditu">天地图</el-radio>
            <el-radio label="osm">OSM</el-radio>
          </el-radio-group>
        </div>
        
        <div style="position: fixed; top: 15%; left: 30%; z-index: 99">
          <el-checkbox-group
            v-model="checkList"
            @change="changeViLayer"
            style="display: flex; flex-flow: column nowrap"
          >
            <el-checkbox label="ndvi"></el-checkbox>
            <el-checkbox label="gndvi"></el-checkbox>
            <el-checkbox label="osavi"></el-checkbox>
          </el-checkbox-group>
        </div>
      </div>
    </template>
     
    <script>
    import "ol/ol.css";
    import Map from "ol/Map";
    import TileLayer from "ol/layer/Tile";
    import TileWMS from "ol/source/TileWMS";
    import XYZ from "ol/source/XYZ";
    import OSM from "ol/source/OSM";
    
    import View from "ol/View";
    import { geoserverBaseUrl } from "@/api/geoserverBaseUrl.js";
    
    export default {
      name: "menu4",
      data() {
        return {
          map: {},
          baselayerName: "tianditu",
          baselayers: [], //底图
    
          checkList: ["ndvi"],
          viLayerName: "ndvi",
          viLayers: [], //植被指数 ndvi ,gndvi,osavi
        };
      },
      methods: {
        changeViLayer(e) {
          this.viLayers.forEach((item) => {
            if (!e.includes(item.get("name"))) {
              item.setVisible(false);
              return;
            }
            item.setVisible(true);
          });
        },
        changeBaseLayer(e) {
          // this.map.getLayers() //获取当前map中的加载的所有图层
          // this.map.getLayers().getLength()  //获取当前map中的加载的所有图层的数量
          this.baselayers.forEach((item) => {
            if (e !== item.get("name")) {
              item.setVisible(false);
              return;
            }
            item.setVisible(true);
          });
        },
        initMap() {
          this.baselayers = [
            new TileLayer({
              name: "tianditu",
              source: new XYZ({
                url: "http://t3.tianditu.com/DataServer?T=img_w&tk=5a257cd2df1b3311723bd77b0de14baf&x={x}&y={y}&l={z}",
              }),
              visible: true,
            }),
            new TileLayer({
              name: "osm",
              source: new OSM(),
              visible: false,
            }),
          ];
          this.viLayers = [
            //ndvi
            new TileLayer({
              name: "ndvi",
    
              extent: [
                104.29530320707201, 30.523585558847, 104.30073365187816,
                30.528814876067738,
              ],
              source: new TileWMS({
                url: geoserverBaseUrl() + "/geoserver/smart-garden/wms",
                params: { LAYERS: "smart-garden:ndvi" },
                serverType: "geoserver",
                transition: 0,
              }),
              visible: true,
            }),
    
            //gndvi
            new TileLayer({
              name: "gndvi",
    
              extent: [
                104.29530320707201, 30.523585558847, 104.30073365187816,
                30.528814876067738,
              ],
              source: new TileWMS({
                url: geoserverBaseUrl() + "/geoserver/smart-garden/wms",
                params: { LAYERS: "smart-garden:gndvi" },
                serverType: "geoserver",
                transition: 0,
              }),
              visible: false,
            }),
    
            //osavi
            new TileLayer({
              name: "osavi",
    
              extent: [
                104.29530320707201, 30.523585558847, 104.30073365187816,
                30.528814876067738,
              ],
              source: new TileWMS({
                url: geoserverBaseUrl() + "/geoserver/smart-garden/wms",
                params: { LAYERS: "smart-garden:osavi" },
                serverType: "geoserver",
                transition: 0,
              }),
              visible: false,
            }),
          ];
          this.map = new Map({
            layers: [
              ...this.baselayers, //所有底图
    
              //龙泉影像图
              new TileLayer({
                extent: [104.295007113, 30.523164296, 104.300696445, 30.528978796],
                source: new TileWMS({
                  url: geoserverBaseUrl() + "/geoserver/smart-garden/wms",
                  params: { LAYERS: "smart-garden:longquan" },
                  serverType: "geoserver",
                  transition: 0,
                }),
              }),
              ...this.viLayers, //所有植被指数图
            ],
            target: "map",
            view: new View({
              projection: "EPSG:4326",
              center: [104.29806, 30.52489],
              zoom: 18,
            }),
          });
        },
      },
      mounted() {
        this.initMap();
      },
    };
    </script>
     
    <style lang="scss" scoped>
    #map {
      height: 100%;
      width: 100%;
      ::v-deep .el-checkbox__label {
        color: white;
      }
      ::v-deep .el-radio__label {
        color: white;
      }
    }
    </style>

# 方式二：map.removeLayer(Layer) #

另一种方式是让map移除图层，即map.removeLayer(Layer)，这种方式会消除图层dom

![20200914174838624.png][]![20200914174828600.png][]![20200914174850439.png][]

代码实现：

<el-checkbox-group v-model="checkList_baseMap">
          <div>
            <el-checkbox label="layer_osm" @change="showOSM">街道图</el-checkbox>
          </div>
          <div>
             <el-checkbox label="layer_image" @change="showImage">影像图</el-checkbox>
          </div>
          <div>
             <el-checkbox label="layer_terrain" @change="showTerrain">地形图</el-checkbox>
          </div>
     </el-checkbox-group>

如果要在底图上叠加其他栅格图，那么该栅格图可能会被底图覆盖导致看不见，此时，我们给图层设置zIndex属性即可，zIndex值越大，表示图层越在上面，如：zIndex：999

此外，对图层的加载移除还可使用以下思路：

判断对象A是否为空：Object.keys(A)，返回一个数组，再根据Array.length判断

if（Object.keys(this.layer).length > 0）{
        this.layer.getSource().clear();
        this.map.removeLayer(this.layer);   
        this.layer={}
    }
    
    this.layer=new TileLayer({
        source:xxxx
    })

[20200914174838624.png]: https://img-blog.csdnimg.cn/20200914174838624.png
[20200914174828600.png]: https://img-blog.csdnimg.cn/20200914174828600.png
[20200914174850439.png]: /images/20210725/0aeda3db2d6a409194d8978f52b216df.png