黑白名单，系统配置，综合展示权限管理添加

Surpriseplus

2022-10-27 4aac1609c95a097de0e8da843a9ed2f211303d4e

 src/components/mapol.vue

@@ -1,17 +1,32 @@
<template>
  <div id="mapol"></div>
  <div id="mapol">
    <div
      @click="changeMenulayer"
      class="center CenDiv"
      :class="{ center1: centerFlag }"
    >
      <div
        id="cenBg"
        v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
      ></div>
    </div>
  </div>
</template>

<script>
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";
import Map from "ol/Map";
import View from "ol/View";
import { transform } from "ol/proj";
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import Map from 'ol/Map';
import View from 'ol/View';
import { transform } from 'ol/proj';
export default {
  name: "",
  name: '',
  data() {
    return {};
    return {
      centerFlag: false,
      isActive: true,
      isMenuLayer: false,
    };
  },
  mounted() {
    this.init2DMap();
@@ -20,23 +35,37 @@
    init2DMap() {
      var vectorLayer = new TileLayer({
        source: new XYZ({
          url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
        }),
      });
      var imageLayer = new TileLayer({
        source: new XYZ({
          url: "http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}",
          url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}',
        }),
      });
      window.map = new Map({
        target: "mapol",
        target: 'mapol',
        layers: [imageLayer, vectorLayer],
        view: new View({
          center: transform([105.02, 34.9], "EPSG:4326", "EPSG:3857"),
          center: transform([105.02, 34.9], 'EPSG:4326', 'EPSG:3857'),
          zoom: 4,
          projection: "EPSG:3857",
          projection: 'EPSG:3857',
        }),
      });
    },
    changeMenulayer() {
      this.isActive = !this.isActive;
      this.isMenuLayer = !this.isMenuLayer;
      this.setLayerVisible();
    },
    setLayerVisible() {
      if (this.isActive == true) {
        map.getLayers().item(0).setVisible(false);
        map.getLayers().item(1).setVisible(true);
      } else {
        map.getLayers().item(0).setVisible(true);
        map.getLayers().item(1).setVisible(false);
      }
    },
  },
};
@@ -51,4 +80,54 @@
  padding: 0;
  position: relative;
}
.center {
  left: 1%;
}
.CenDiv {
  position: absolute;
  bottom: 1%;
  height: 40px;
  width: 60px;
  z-index: 101;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 3px 3px 6px #666;
  border: 1px solid rgba(204, 204, 204, 0.76);
  border-radius: 5px;
  cursor: pointer;
}
.center1 {
  right: 1%;
}
.right {
  position: absolute;
  top: 50px;
  right: 0;
  width: 20%;
  height: calc(100% - 50px);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.CenDiv:hover {
  border: 1px solid #409eff;
}
.active {
  width: 100%;
  height: 100%;
  background: url('../assets/img/Layer/imgLayer2.png') no-repeat center;
  position: absolute;
  background-size: 100% 100%;
  border-radius: 5px;
}
.menuLayer {
  width: 100%;
  height: 100%;
  background: url('../assets/img/Layer/imgLayer1.png') no-repeat center;
  position: absolute;
  background-size: 100% 100%;
  border-radius: 5px;
}
</style>