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

疆~

已于 2022-12-01 20:26:27 修改

阅读量9.8k

点赞数 5

分类专栏： openlayers 文章标签： vue.js elementui javascript

于 2020-09-14 17:59:11 首次发布

本文链接：https://blog.csdn.net/qq_40323256/article/details/108584152

版权

openlayers 专栏收录该内容

48 篇文章 53 订阅

订阅专栏

参考：openlayers6【十二】vue 切片图层 TileLayer 切换地图底图，图层叠加效果_范特西是只猫的博客-CSDN博客_vue 图层叠加

方式一：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>

此外，封装图层显示隐藏的方法。每一个图层都要有name属性，且全局唯一

    switchLayerVisible(layerName = "", map = {}, isVisibleNow = true) {
      map
        .getLayers()
        .getArray()
        .forEach((layer) => {
          if (layer.get("name") == layerName) {
            layer.setVisible(isVisibleNow);
          }
        });
    },

配合watch使用。如下showLayer为bool类型

  watch: {
    showDk: {
      handler: function () {
        this.switchLayerVisible("dk", this.map, this.showDk);
      },
    },
  }

只需改变showDk的bool值，即可改变图层‘dk’的显示和隐藏。

方式二：map.removeLayer(Layer)

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

代码实现：

 <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>


<script>
import "ol/ol.css";
import { Map, View } from "ol";
import XYZ from "ol/source/XYZ";
import OSM from "ol/source/OSM";
import TileLayer from "ol/layer/Tile";

export default {
  components: {},
  data() {
    return {
      checkList_baseMap: ["layer_image"],
     
      map: {},
      layer_osm: {},
      layer_image: {},
      layer_terrain: {},

    };
  },
  created() {},
  mounted() {
    this.map = new Map({
      target: "map",
      layers: [],
      view: new View({
        projection: "EPSG:4326",
        center: [104.9, 32.5],
        zoom: 9,
      }),
    });

    this.showImage(true);

  },
  computed: {},
  methods: {
    showOSM(e) {
      if (e) {
        this.layer_osm = new TileLayer({
          source: new OSM(),
        });
        this.map.addLayer(this.layer_osm);
      } else {
        this.layer_osm.getSource().clear();
        this.map.removeLayer(this.layer_osm);
        this.layer_osm = {};
      }
    },
    showImage(e) {
      if (e) {
        this.layer_image = new TileLayer({
          source: new XYZ({
            url:
              "http://mt3.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}",
          }),
        });
        this.map.addLayer(this.layer_image);
      } else {
        this.layer_image.getSource().clear();
        this.map.removeLayer(this.layer_image);
        this.layer_image = {};
      }
    },
    showTerrain(e) {
      if (e) {
        this.layer_terrain = new TileLayer({
          source: new XYZ({
            url:
              "http://t4.tianditu.com/DataServer?T=ter_w&x={x}&y={y}&l={z}&tk=5a257cd2df1b3311723bd77b0de14baf",
          }),
        });
        this.map.addLayer(this.layer_terrain);
      } else {
        this.layer_terrain.getSource().clear();
        this.map.removeLayer(this.layer_terrain);
        this.layer_terrain = {};
      }
    }
  },
  watch: {},
};
</script>

其中，设置选框样式：

  //多选框
  ::v-deep .el-checkbox__label {
    color: white;
  }
  //单选框
  ::v-deep .el-radio__label {
    color: white;
  }

如果要在底图上叠加其他栅格图，那么该栅格图可能会被底图覆盖导致看不见，此时，我们给图层设置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
})

疆~

关注

5
点赞
踩
20

收藏

觉得还不错? 一键收藏
1
评论
openlayer中控制图层的显示和隐藏

一种是通过Layer.setVisible(true)的方式让图层显示或隐藏，这种方式只是让图层中CSS的visible属性改为了false，其dom依然存在于页面中；另一种方式是让map移除图层，即map.removeLayer(Layer)，这种方式会消除图层dom代码实现： <el-checkbox-group v-model="checkList_baseMap"> <div> <el-checkbox label="lay
复制链接

扫一扫