投稿
  1. 极客之音首页
  2. 后端漫谈

Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏

飞熊 • • 后端漫谈 • 阅读 212

生活中，最使人疲惫的往往不是道路的遥远，而是心中的郁闷;最使人痛苦的往往不是生活的不幸，而是希望的破灭;最使人颓废的往往不是前途的坎坷，而是自信的丧失;最使人绝望的往往不是挫折的打击，而是心灵的死亡。所以我们要有自己的梦想，让梦想的星光指引着我们走出落漠，走出惆怅，带着我们走进自己的理想。

导读：本篇文章讲解 Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏，希望对大家有帮助，欢迎收藏，转发！站点地址：www.bmabk.com，来源：原文

场景

Vue+Openlayers实现地图上绘制线：

Vue+Openlayers实现地图上绘制线_BADAO_LIUMANG_QIZHI的博客-CSDN博客

在上面实现加载多个图层的基础上，可以实现勾选多选框配置图层的显示与隐藏。

Vue+Openlayers+el-checkbox实现多选配置图层的显示和隐藏

注：

博客：
BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博主
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

1、页面上添加el-checkbox

    <el-checkbox v-model="isHouseShow" @change="handleHouseChange"
      >房子</el-checkbox
    >
    <el-checkbox v-model="isLightShow" @change="handleLightChange"
      >红绿灯</el-checkbox
    >
    <el-checkbox v-model="isLineShow" @change="handleLineChange"
      >线段</el-checkbox
    >
    <el-checkbox v-model="isMapShow" @change="handleMapChange"
      >底图</el-checkbox
    >

并依次绑定其model，默认值为true

  data() {
    return {
      isHouseShow: true,
      isLightShow: true,
      isLineShow: true,
      isMapShow: true,

依次设置多选框的change事件

2、change事件实现

  methods: {
    handleHouseChange(value) {
      if (value) {
        //选中，显示房子图层
        this.houseLayer.setVisible(true);
      } else {
        //不显示房子图层
        this.houseLayer.setVisible(false);
      }
    },
    handleLightChange(value) {
      if (value) {
        //选中，显示房子图层
        this.lightLayer.setVisible(true);
      } else {
        //不显示房子图层
        this.lightLayer.setVisible(false);
      }
    },
    handleLineChange(value) {
      if (value) {
        //选中，显示房子图层
        this.lineLayer.setVisible(true);
      } else {
        //不显示房子图层
        this.lineLayer.setVisible(false);
      }
    },
    handleMapChange(value) {
      if (value) {
        //选中，显示房子图层
        this.layer.setVisible(true);
      } else {
        //不显示房子图层
        this.layer.setVisible(false);
      }
    },

控制图层的显示与隐藏主要是通过layer的setVisible方法来实现，为true则显示，为false则隐藏。

3、完整示例代码

​
<template>
  <div id="app">
    <el-checkbox v-model="isHouseShow" @change="handleHouseChange"
      >房子</el-checkbox
    >
    <el-checkbox v-model="isLightShow" @change="handleLightChange"
      >红绿灯</el-checkbox
    >
    <el-checkbox v-model="isLineShow" @change="handleLineChange"
      >线段</el-checkbox
    >
    <el-checkbox v-model="isMapShow" @change="handleMapChange"
      >底图</el-checkbox
    >
    <div id="map" class="map"></div>
  </div>
</template>

<script>
//导入基本模块
import "ol/ol.css";
import Map from "ol/Map";
import View from "ol/View";
import { Point, LineString } from "ol/geom";
import Feature from "ol/Feature";
import { Icon, Style, Stroke } from "ol/style";
//导入相关模块
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { TileWMS, Vector as VectorSource } from "ol/source";
export default {
  name: "olMapTileWMSSwitchLayer",
  data() {
    return {
      map: null, // map地图
      layer: null, //地图图层
      lightLayer: null, //灯图层
      houseLayer: null, //房子图层
      lineLayer: null, //线图层
      lineSource: null, //线数据源
      isHouseShow: true,
      isLightShow: true,
      isLineShow: true,
      isMapShow: true,
      //红绿灯数据
      lightData: [
        { x: "987798.93778", y: "213885.81024" },
        { x: "987710.93778", y: "213810.81024" },
      ],
      //房子数据
      houseData: [
        { x: "986610.93778", y: "213885.81024" },
        { x: "986510.93778", y: "213810.81024" },
      ],
      //线的数据
      lineData: [
        [986434.4063822062, 215782.0959711917],
        [989701.5290279881, 217149.84072807242],
        [990613.3107184113, 215946.4192185118],
      ],
    };
  },
  mounted() {
    this.initMap();
    setInterval(() => {
      this.initLightData();
    }, 1000);
  },
  methods: {
    handleHouseChange(value) {
      if (value) {
        //选中，显示房子图层
        this.houseLayer.setVisible(true);
      } else {
        //不显示房子图层
        this.houseLayer.setVisible(false);
      }
    },
    handleLightChange(value) {
      if (value) {
        //选中，显示房子图层
        this.lightLayer.setVisible(true);
      } else {
        //不显示房子图层
        this.lightLayer.setVisible(false);
      }
    },
    handleLineChange(value) {
      if (value) {
        //选中，显示房子图层
        this.lineLayer.setVisible(true);
      } else {
        //不显示房子图层
        this.lineLayer.setVisible(false);
      }
    },
    handleMapChange(value) {
      if (value) {
        //选中，显示房子图层
        this.layer.setVisible(true);
      } else {
        //不显示房子图层
        this.layer.setVisible(false);
      }
    },
    //初始化红绿灯数据
    initLightData() {
      this.lightLayer.getSource().clear();
      this.lightData.forEach((item, index) => {
        var feature = new Feature({
          geometry: new Point([Number(item.x), Number(item.y)]),
        });
        let url = "images/light.png";
        const zoom = this.map.getView().getZoom();
        let style = new Style({
          image: new Icon({
            scale: 0.15 * (zoom - 13),
            src: url,
            anchor: [0.48, 0.52],
          }),
        });
        feature.setStyle(style);
        this.lightLayer.getSource().addFeature(feature);
      });
    },

    //初始化房子数据
    initHouseData() {
      this.houseLayer.getSource().clear();
      this.houseData.forEach((item, index) => {
        var feature = new Feature({
          geometry: new Point([Number(item.x), Number(item.y)]),
        });
        let url = "images/house.png";
        let style = new Style({
          image: new Icon({
            scale: 0.3,
            src: url,
            anchor: [0.48, 0.52],
          }),
        });
        feature.setStyle(style);
        this.houseLayer.getSource().addFeature(feature);
      });
    },

    //画线
    drawLine() {
      let pointData = this.lineData; // 所有点位信息
      //下边来添加一线feature
      var feature = new Feature({
        type: "lineStyle",
        geometry: new LineString(
          pointData // 线的坐标
        ),
      });
      let color = "green";
      let lineStyle = new Style({
        stroke: new Stroke({
          color: color,
          width: 4,
        }),
      });
      // 添加线的样式
      feature.setStyle(lineStyle);
      // 添加线的fature
      this.lineSource.addFeature(feature);
    },
    initMap() {
      //地图图层
      this.layer = new TileLayer({
        source: new TileWMS({
          //不能设置为0，否则地图不展示。
          ratio: 1,
          url: "http://localhost:8000/geoserver/nyc/wms",
          params: {
            LAYERS: "nyc:nyc_roads",
            STYLES: "",
            VERSION: "1.1.1",
            tiled: true,
          },
          serverType: "geoserver",
        }),
      });

      // 红绿灯的图层
      this.lightLayer = new VectorLayer({
        source: new VectorSource(),
      });

      //房子的图层
      this.houseLayer = new VectorLayer({
        source: new VectorSource(),
      });

      //线的图层
      this.lineSource = new VectorSource({ wrapX: false });
      this.lineLayer = new VectorLayer({
        source: this.lineSource,
      });

      this.map = new Map({
        //地图容器ID
        target: "map",
        //引入地图
        layers: [this.layer, this.lightLayer, this.houseLayer, this.lineLayer],
        view: new View({
          //地图中心点
          center: [987777.93778, 213834.81024],
          zoom: 12,
          minZoom: 6, // 地图缩放最小级别
          maxZoom: 19,
          rotation: 0.76,
        }),
      });

      this.initLightData();
      this.initHouseData();
      this.drawLine();
    },
  },
};
</script>

<style scoped>
.map {
  width: 100%;
  height: 800px;
}
</style>

​

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。

文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/136131.html

赞 (0)
飞熊的头像飞熊bm
0 0

相关推荐

发表回复

登录后才能评论
极客之音——专业性很强的中文编程技术网站，欢迎收藏到浏览器，订阅我们！