添加地形切换效果，底图切换功能，在线制图，服务发布页面优化，转孔柱状图更新

Surpriseplus

2023-03-21 7c60e0fe106b053bfb7f9bc889677f2a5ff35608

 src/components/mapol.vue

@@ -4,11 +4,11 @@
      <div
        @click="changeMenulayer"
        class="center CenDiv"
        :class="{ center1: centerFlag }"
      >
        <div
          title="底图切换"
          id="cenBg"
          v-bind:class="{ active: isActive, menuLayer: isMenuLayer }"
          class="mapBaseMap"
        ></div>

      </div>
@@ -17,6 +17,7 @@
        class="changeMapType"
      >
        <div
          title="2/3维切换"
          id="cenBg"
          :class="show2DMap ? 'mapTypeTwo' : 'mapTypeThree'"
        ></div>
@@ -95,24 +96,24 @@
  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 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}",
      //   }),
      // })
      window.map = new Map({
        target: "mapol",
        layers: [imageLayer, vectorLayer],
        layers: [],
        view: new View({
          center: [105.02, 34.9],
          zoom: 4,
          projection: "EPSG:4326",
          minZoom: 4,
          minZoom: 5,
        }),
        controls: defaultControls().extend([
          new FullScreen(),
@@ -120,6 +121,20 @@
        ]),
        interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
      })

      window.olBaseMapLayer = new TileLayer({
        title: "高德地图",
        source: new XYZ({
          url: gaoDeBaseUrl[1].url,
          wrapX: false
        })
      });
      window.map.addLayer(window.olBaseMapLayer);





      // var scaleLine = new  ScaleLine({
      //   units: "metric"
      // });
@@ -148,9 +163,10 @@
    },

    changeMenulayer() {
      this.isActive = !this.isActive
      this.isMenuLayer = !this.isMenuLayer
      this.setLayerVisible()
      this.$bus.$emit("setChangeBaseMapLayer", true)
      // this.isActive = !this.isActive
      // this.isMenuLayer = !this.isMenuLayer
      // this.setLayerVisible()
    },
    setLayerVisible() {
      if (this.isActive == true) {
@@ -229,8 +245,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;
}
@@ -248,9 +264,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%;
@@ -326,7 +342,14 @@
.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/synthesis/底图.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.changeMapType {
  position: absolute;
  bottom: 1%;