地图更改为本地服务，柱状图效果更改

Surpriseplus

2023-04-15 44517cf9375441d8a84808ca52d7ce474d8e0b17

 src/components/mapol.vue

@@ -3,7 +3,7 @@
    <div style="display: flex">
      <div
        @click="changeMenulayer"
        class="center CenDiv"
        class="changeLayer"
      >
        <div
          title="底图切换"
@@ -121,11 +121,14 @@
        ]),
        interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
      })

      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: gaoDeBaseUrl[1].url,
          url: base_ulr,
          wrapX: false
        })
      });
@@ -149,7 +152,7 @@

    //二维/三维地图切换
    changeMapType() {
      // 
      //
      this.show2DMap = !this.show2DMap;
      //二维
      if (this.show2DMap) {
@@ -345,40 +348,67 @@
.mapBaseMap {
  width: 100%;
  height: 100%;
  margin-left: 10px;
  background-image: url("../assets/img/synthesis/底图.png");
  //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;
  bottom: 52px;
  right: 46px;
  height: 30px;
  width: 30px;
  z-index: 101;
  display: flex;
  justify-content: center;
  align-items: center;
  // box-shadow: 3px 3px 6px #666;
  border-radius: 5px;
  // background: #fff;
  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%;
  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 {
  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>