发布管理修改

surprise

2023-11-29 97277a2c41d80bbf375f88a47e242f1b17602b2b

 src/components/mapol.vue

@@ -3,20 +3,45 @@
    <div style="display: flex">
      <div
        @click="changeMenulayer"
        class="center CenDiv"
        :class="{ center1: centerFlag }"
        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="底图切换"
          id="cenBg"
          v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
          class="mapBaseMap"
        ></div>

      </div>
      <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维切换"
          id="cenBg"
          :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'"
        ></div>
@@ -34,8 +59,8 @@

    <!--    </div>-->
    <div
      v-show="$store.state.isNaviget"
      class="sindagis-map-compass"
      style=" bottom: 130px; right: 40px;"
    >
      <span
        class="left"
@@ -93,24 +118,30 @@
    });
  },
  methods: {

    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}",
        }),
      })
      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}",
        }),
      })
      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]
      // } 
      window.map = new Map({
        target: "mapol",
        layers: [imageLayer, vectorLayer],
        // layers: layerBase,
        view: new View({
          center: [105.02, 34.9],
          zoom: 4,
          projection: "EPSG:4326",
          minZoom: 5,
        }),
        controls: defaultControls().extend([
          new FullScreen(),
@@ -118,10 +149,38 @@
        ]),
        interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
      })
      // var scaleLine = new  ScaleLine({
      //   units: "metric"
      // });
      // map.addControl(scaleLine);


      if (is_production) {
        var base_ulr = window.sceneConfig.baseUrl;
        if (base_ulr.indexOf('{host}') > -1) {
          base_ulr = base_ulr.replace("{host}", iisHost)
        }
        window.olBaseMapLayer = new TileLayer({
          title: "高德地图",
          source: new XYZ({
            url: base_ulr,
            wrapX: false
          })
        });
        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);
      }





      var scaleLine = new ScaleLine({
        units: "metric"
      });
      map.addControl(scaleLine);

      map.on("moveend", function (e) {
        console.log(($(window).width() - $(".ol-scale-line-inner").width()) + "px");
@@ -132,7 +191,7 @@

    //二维/三维地图切换
    changeMapType() {
      // debugger
      //
      this.show2DMap = !this.show2DMap;
      //二维
      if (this.show2DMap) {
@@ -146,9 +205,10 @@
    },

    changeMenulayer() {
      this.isActive = !this.isActive
      this.isMenuLayer = !this.isMenuLayer
      this.setLayerVisible()
      this.$bus.$emit("setChangeBaseMapLayer", {type:'ol',boolen:true})
      // this.isActive = !this.isActive
      // this.isMenuLayer = !this.isMenuLayer
      // this.setLayerVisible()
    },
    setLayerVisible() {
      if (this.isActive == true) {
@@ -227,8 +287,8 @@
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 3px 3px 6px #666;
  border: 1px solid rgba(204, 204, 204, 0.76);
  // box-shadow: 3px 3px 6px #666;
  // border: 1px solid rgba(204, 204, 204, 0.76);
  border-radius: 5px;
  cursor: pointer;
}
@@ -246,9 +306,9 @@
  flex-direction: column;
  justify-content: space-between;
}
.CenDiv:hover {
  border: 1px solid #409eff;
}
// .CenDiv:hover {
//   border: 1px solid #409eff;
// }
.active {
  width: 100%;
  height: 100%;
@@ -267,14 +327,13 @@
}
.ol-scale-line {
  bottom: 55px !important;
  right: 130px !important;
}

.sindagis-map-compass {
  position: absolute;
  right: 50px;
  bottom: 90px;

  z-index: 5;
  right: 25px;
  width: 52px;
  height: 54px;
  background: url("../assets/img/compass.png") 0% 0% / 266px no-repeat;
@@ -324,36 +383,35 @@
.sindagis-map-compass .right:hover {
  background: url("../assets/img/compass.png") -89px -5px / 266px no-repeat;
}

.mapBaseMap {
  width: 100%;
  height: 100%;
  //margin-left: 10px;
  background-image: url("../assets/img/basemap.png");
  //background-image: url("../assets/img/synthesis/底图.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.changeMapType {
  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%;
  height: 100%;
  margin-left: 10px;
  background-image: url("../assets/img/synthesis/3D.png");
  //margin-left: 10px;
  background-image: url("../assets/img/3D.png");
  //background-image: url("../assets/img/synthesis/3D.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.mapTypeThree {
  width: 100%;
  height: 100%;
  margin-left: 10px;
  background-image: url("../assets/img/synthesis/2D 拷贝 2.png");
  //margin-left: 10px;
  background-image: url("../assets/img/2D.png");
  //background-image: url("../assets/img/synthesis/2D 拷贝 2.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.changeLayer {
}
</style>