管道基础大数据平台系统开发-【前端】-新系統界面
13693261870
2024-02-04 d91f0dfcd2ef95fb3624d94ade24fe69a9169a58
src/components/mapol.vue
@@ -4,6 +4,17 @@
      <div
        @click="changeMenulayer"
        class="changeLayer"
        style="  position: absolute;
  bottom: 84px;
  right: 46px;
  height: 30px;
  width: 30px;
  z-index: 101;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.5);"
      >
        <div
          title="底图切换"
@@ -15,6 +26,19 @@
      <div
        @click="changeMapType"
        class="changeMapType"
        v-if="$store.state.setChangeBaseMap"
        style="  position: absolute;
  bottom: 52px;
  right: 46px;
  height: 30px;
  width: 30px;
  z-index: 101;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.5);"
      >
        <div
          title="2/3维切换"
@@ -36,7 +60,7 @@
    <!--    </div>-->
    <div
      class="sindagis-map-compass"
      style=" bottom: 130px; right: 35px;"
      style=" bottom: 130px; right: 40px;"
    >
      <span
        class="left"
@@ -97,22 +121,22 @@
    init2DMap() {
      var layerBase = [];
      if (!is_production) {
        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}",
          }),
        })
        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}",
          }),
        })
        layerBase = [vectorLayer, imageLayer]
      }
      // if (!is_production) {
      //   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}",
      //     }),
      //   })
      //   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}",
      //     }),
      //   })
      //   layerBase = [vectorLayer, imageLayer]
      // }
      window.map = new Map({
        target: "mapol",
        layers: layerBase,
        // layers: layerBase,
        view: new View({
          center: [105.02, 34.9],
          zoom: 4,
@@ -140,7 +164,13 @@
          })
        });
        window.map.addLayer(window.olBaseMapLayer);
      } else {
        window.olBaseMapLayer = 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}",
          }),
        })
        window.map.addLayer(window.olBaseMapLayer);
      }
@@ -175,7 +205,7 @@
    },
    changeMenulayer() {
      this.$bus.$emit("setChangeBaseMapLayer", true)
      this.$bus.$emit("setChangeBaseMapLayer", {type:'ol',boolen:true})
      // this.isActive = !this.isActive
      // this.isMenuLayer = !this.isMenuLayer
      // this.setLayerVisible()
@@ -302,10 +332,8 @@
.sindagis-map-compass {
  position: absolute;
  right: 50px;
  z-index: 5;
  width: 52px;
  height: 54px;
  background: url("../assets/img/compass.png") 0% 0% / 266px no-repeat;
@@ -365,30 +393,6 @@
  background-size: contain;
}
.changeMapType {
  position: absolute;
  bottom: 52px;
  right: 46px;
  height: 30px;
  width: 30px;
  z-index: 101;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.5);
  //position: absolute;
  //bottom: 1%;
  //left: calc(1% + 75px);
  //height: 40px;
  //width: 60px;
  //z-index: 101;
  //display: flex;
  //justify-content: center;
  //align-items: center;
  //// box-shadow: 3px 3px 6px #666;
  //border-radius: 5px;
  //// background: #fff;
  //cursor: pointer;
}
.mapTypeTwo {
  width: 100%;
@@ -409,16 +413,5 @@
  background-size: contain;
}
.changeLayer {
  position: absolute;
  bottom: 84px;
  right: 46px;
  height: 30px;
  width: 30px;
  z-index: 101;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.5);
}
</style>