二维地图比例尺&指北针

TreeWish

2023-02-07 7976e60dfd49be4d2f68d2b371353df6637aee91

 src/components/mapol.vue

@@ -14,62 +14,78 @@
</template>

<script>
import TileLayer from 'ol/layer/Tile';
import XYZ from 'ol/source/XYZ';
import Map from 'ol/Map';
import View from 'ol/View';
import { transform } from 'ol/proj';
import TileLayer from "ol/layer/Tile"
import XYZ from "ol/source/XYZ"
import Map from "ol/Map"
import View from "ol/View"
import { transform } from "ol/proj"
import {
  OverviewMap,
  defaults as defaultControls,
  FullScreen,
  ScaleLine,
  Rotate,
} from "ol/control.js"
import {
  DragRotateAndZoom,
  defaults as defaultInteractions,
} from 'ol/interaction.js';
export default {
  name: '',
  name: "",
  data() {
    return {
      centerFlag: false,
      isActive: true,
      isMenuLayer: false,
    };
    }
  },
  mounted() {
    this.init2DMap();
    this.init2DMap()
  },
  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}',
          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}',
          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',
        target: "mapol",
        layers: [imageLayer, vectorLayer],
        view: new View({
          center: transform([105.02, 34.9], 'EPSG:4326', 'EPSG:3857'),
          center: transform([105.02, 34.9], "EPSG:4326", "EPSG:3857"),
          zoom: 4,
          projection: 'EPSG:3857',
          projection: "EPSG:3857",
        }),
      });
        controls: defaultControls().extend([
          new FullScreen(),
          new ScaleLine(),
        ]),
        interactions: defaultInteractions().extend([new DragRotateAndZoom()]),
      })
    },

    changeMenulayer() {
      this.isActive = !this.isActive;
      this.isMenuLayer = !this.isMenuLayer;
      this.setLayerVisible();
      this.isActive = !this.isActive
      this.isMenuLayer = !this.isMenuLayer
      this.setLayerVisible()
    },
    setLayerVisible() {
      if (this.isActive == true) {
        map.getLayers().item(0).setVisible(false);
        map.getLayers().item(1).setVisible(true);
        map.getLayers().item(0).setVisible(false)
        map.getLayers().item(1).setVisible(true)
      } else {
        map.getLayers().item(0).setVisible(true);
        map.getLayers().item(1).setVisible(false);
        map.getLayers().item(0).setVisible(true)
        map.getLayers().item(1).setVisible(false)
      }
    },
  },
};
}
</script>

<style scoped>
@@ -118,7 +134,7 @@
.active {
  width: 100%;
  height: 100%;
  background: url('../assets/img/Layer/imgLayer2.png') no-repeat center;
  background: url("../assets/img/Layer/imgLayer2.png") no-repeat center;
  position: absolute;
  background-size: 100% 100%;
  border-radius: 5px;
@@ -126,7 +142,7 @@
.menuLayer {
  width: 100%;
  height: 100%;
  background: url('../assets/img/Layer/imgLayer1.png') no-repeat center;
  background: url("../assets/img/Layer/imgLayer1.png") no-repeat center;
  position: absolute;
  background-size: 100% 100%;
  border-radius: 5px;