管道基础大数据平台系统开发-【前端】-新系統界面
src/components/mapol.vue
@@ -35,8 +35,8 @@
    <!--    </div>-->
    <div
      v-show="$store.state.isNaviget"
      class="sindagis-map-compass"
      style=" bottom: 130px; right: 35px;"
    >
      <span
        class="left"
@@ -96,19 +96,23 @@
  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: [],
        // layers: layerBase,
        view: new View({
          center: [105.02, 34.9],
          zoom: 4,
@@ -122,23 +126,37 @@
        interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
      })
      window.olBaseMapLayer = new TileLayer({
        title: "高德地图",
        source: new XYZ({
          url: gaoDeBaseUrl[1].url,
          wrapX: false
      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"
      });
      window.map.addLayer(window.olBaseMapLayer);
      // var scaleLine = new  ScaleLine({
      //   units: "metric"
      // });
      // map.addControl(scaleLine);
      map.addControl(scaleLine);
      map.on("moveend", function (e) {
        console.log(($(window).width() - $(".ol-scale-line-inner").width()) + "px");
@@ -285,14 +303,15 @@
}
.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;
@@ -362,7 +381,7 @@
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.5);
  border: 1px solid rgba(255, 255, 255, 0.5);
  //position: absolute;
  //bottom: 1%;
  //left: calc(1% + 75px);
@@ -395,7 +414,7 @@
  background-repeat: no-repeat;
  background-size: contain;
}
.changeLayer{
.changeLayer {
  position: absolute;
  bottom: 84px;
  right: 46px;
@@ -406,6 +425,6 @@
  justify-content: center;
  align-items: center;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.5);
  border: 1px solid rgba(255, 255, 255, 0.5);
}
</style>