便利贴--15{OpenLayers,vue项目3，添加图层 WMS服务---==样式==}

展示效果

源代码 -

– 是基于前面的改进项目，将该html放入getMapDataInThere.vue的控制器下面就好，注意一个vue的template标签内，必须只有一个主标签

<div class="rightButton" @click="openLayer">
      <img src="img/hd/tucengguanli.png" alt="" />
    </div>
    <div class="rightButtonLeft" v-show="rightButtonLeft">
      <div class="rightButtonLeftHeard">
        <el-button
          :type="isOurChecked ? 'primary' : ''"
          :icon="
            isOurChecked == 'Insufficient' ? 'el-icon-minus' : 'el-icon-check'
          "
          class="rightButtonLeftForOnceChoice"
          @click="ourGetChecked()"
        ></el-button>
        <el-button
          type="primary"
          icon="el-icon-plus icon"
          @click="openLayerCenter"
          circle
        ></el-button>
        <el-button
          type="danger"
          icon="el-icon-close icon"
          @click="deleteOpenLayer"
          circle
        ></el-button>
      </div>
      <div class="rightButtonLeftCenter">
        <div
          class="rightButtonLeftForOnce"
          v-for="(item, index) in openLayerArr"
          :key="index + item.url + item.state + item.type"
        >
          <el-button
            :type="item.checked ? 'primary' : ''"
            icon="el-icon-check"
            class="rightButtonLeftForOnceChoice"
            @click="getChecked(index)"
          ></el-button>
          <div class="rightButtonLeftForOnceCenter">
            {{ item.type + ":" + item.url }}
          </div>
          <el-button
            :type="item.state ? 'primary' : ''"
            icon="el-icon-view icon"
            class="rightButtonLeftForOnceSee"
            @click="getSee(index)"
            circle
          ></el-button>
        </div>
      </div>
    </div>
    <div class="rightButtonCenter" v-show="rightButtonCenter">
      <div class="rightButtonCenter_in">
        <el-select v-model="openLayerUrl.type" placeholder="请选择服务类型">
          <el-option
            v-for="(item, index) in openLayerType"
            :key="index"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="rightButtonCenter_in">
        <el-input
          placeholder="请输入图层服务网址"
          v-model="openLayerUrl.url"
          clearable
        >
        </el-input>
      </div>
      <div>
        <div class="rightButtonCenter_in">
          <el-button @click="rightButtonCenterButtonsClose">取消</el-button>
          <el-button @click="rightButtonCenterButtonsSubmit" type="primary"
            >确认</el-button
          >
        </div>
      </div>
    </div>

data
 rightButtonLeft: true,
      rightButtonCenter: false,
      openLayerType: [
        { label: "基底图层", value: "Base layer" },
        { label: "Label图层", value: "Location Labels" },
        { label: "stateboundary图层", value: "State Line Layer" },
        { label: "depthcontour图层", value: "Water Depth" },
        { label: "road图层", value: "Roads" },
      ],
      openLayerUrl: { url: "", type: "" },
      openLayerArr: [
        {
          url: "http://vmap0.tiles.osgeo.org/wms/vmap0",
          state: true,
          type: "1",
          checked: false,
        },
        {
          url: "http://labs.metacarta.com/wms/vmap0",
          state: true,
          type: "2",
          checked: false,
        },
        {
          url: "http://labs.metacarta.com/wms/vmap0",
          state: true,
          type: "3",
          checked: false,
        },
        {
          url: "http://labs.metacarta.com/wms/vmap0",
          state: true,
          type: "2",
          checked: false,
        },
      ],
methods
 getSee(index) {
      this.openLayerArr[index].state = !this.openLayerArr[index].state;
    },
    ourGetChecked() {
      this.isOurChecked == "Insufficient"
        ? this.doit(true)
        : this.isOurChecked == "satisfy"
        ? this.doit(false)
        : this.doit(true);
    },
    doit(val) {
      for (let k in this.openLayerArr) {
        this.openLayerArr[k].checked = val;
      }
    },
    getChecked(index) {
      this.openLayerArr[index].checked = !this.openLayerArr[index].checked;
    },
    openLayerCenter() {
      this.rightButtonCenter = true;
    },
    deleteOpenLayer() {
      for (let i = this.openLayerArr.length - 1; i >= 0; i--) {
        if (this.openLayerArr[i].checked) {
          this.openLayerArr.splice(i, 1);
        }
      }
    },
    openLayer() {
      this.rightButtonLeft = !this.rightButtonLeft;
    },
    rightButtonCenterButtonsSubmit() {
      if (this.openLayerUrl.url == "" || this.openLayerUrl.type == "") {
        this.$message({
          message: "清先输入",
          type: "warning",
        });
      } else {
        this.openLayerArr.push({
          url: this.openLayerUrl.url,
          state: true,
          type: this.openLayerUrl.type,
          checked: false,
        });
        this.rightButtonCenterButtonsClose();
      }
    },
    rightButtonCenterButtonsClose() {
      this.rightButtonCenter = false;
      this.openLayerUrl.url = "";
      this.openLayerUrl.type = "";
    },

.rightButton {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background-color: #fff;
  border-radius: 10px;
  padding: 2px;
  box-shadow: 2px 2px 15px -5px #acacac;
  img {
    width: 100%;
    height: 100%;
  }
}
.rightButtonLeft {
  position: absolute;
  bottom: 0;
  right: 45px;
  width: 230px;
  height: 230px;
  background-color: #fff;
  box-shadow: 2px 2px 30px -5px #acacac;
  border-radius: 15px;
  .rightButtonLeftHeard {
    width: 100%;
    height: 45px;
    border-radius: 15px 15px 0 0;
    border-bottom: 1px solid rgba($color: #acacac, $alpha: 0.5);
    @extend .flexCenter;
    justify-content: space-around;
    .icon {
      font-size: 18px;
    }
    .rightButtonLeftForOnceChoice {
      width: 18px;
      height: 18px;
      font-size: 10px;
    }
  }
  .rightButtonLeftCenter {
    width: 100%;
    border-radius: 0 0 15px 15px;
    height: calc(100% - 45px);
    overflow-x: hidden;
    overflow-y: scroll;
    // border: 1px solid #acacac;
    // @extend .flexCenter;
    // align-items: none;
    // flex-direction: column;
    .rightButtonLeftForOnce {
      width: calc(100% - 10px);
      height: 40px;
      border-bottom: 1px solid rgba($color: #acacac, $alpha: 0.5);
      padding-bottom: 2.5px;
      margin: 2.5px 2.5px 2.5px 4px;
      @extend .flexCenter;
      justify-content: space-around;
      .rightButtonLeftForOnceChoice {
        width: 18px;
        height: 18px;
        font-size: 10px;
      }
      .rightButtonLeftForOnceCenter {
        width: 130px;
        height: 100%;
        // border: 1px solid #acacac;
        padding: 3px;
        display: flex;
        align-items: center;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .rightButtonLeftForOnceSee {
        width: 27px;
        height: 27px;
        font-size: 17px;
        @extend .flexCenter;
        .icon {
          position: relative;
          top: -6px;
        }
      }
    }
  }
}
.rightButtonCenter {
  position: absolute;
  bottom: calc(50% - 60px);
  right: 30%;
  width: 40%;
  height: 120px;
  background-color: #fff;
  -webkit-box-shadow: 2px 2px 30px -5px #acacac;
  box-shadow: 2px 2px 15px -5px #acacac;
  padding: 8px;
  border-radius: 8px;
  @extend .flexCenter;
  flex-direction: column;
  .rightButtonCenter_in {
    padding: 5% 5px;
    height: 40%;
    width: 100%;
    @extend .flexCenter;
  }
}

样式和互动完成，等数据对接做好再发布地图加载WMS图层的方法