瓷砖图仅在顶角的单张地图 [英] Leaflet map with tile layer only on top corner

问题描述

我正在使用Ionic 5和Vue.js开发一个项目，在我的一个屏幕中，我使用的传单地图必须覆盖几乎整个屏幕.

I'm developing a project with Ionic 5 and Vue.js, and in one of my screens I am using an leaflet map that must cover almost the entire screen.

我正在使用 vue的Leaflet库，我的代码如下所示:

I am using the Leaflet library for vue, and my code looks like this:

<template>
  <section class="map-container">
    <l-map
          ref="map"
          :options="mapOptions"
          :bounds="bounds"
          v-on:update:zoom="zoomUpdated"
          @ready="mapReady"
        >
      <l-tile-layer :url="'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'">
      </l-tile-layer>
  </l-map>
  </section>
</template>


<script>
import "leaflet/dist/leaflet.css";
import Vuex from "vuex";
import { mapState, mapGetters } from "vuex";
import Leaflet from "leaflet";
import store from '../store/index'
import Vue2LeafletGoogleMutant from "vue2-leaflet-googlemutant";
import { LMap, LTileLayer, LPolygon, LImageOverlay } from "vue2-leaflet";

export default {
  name: "MapBackground",
  store,
  components: {
    LMap,
    LTileLayer
  },
  computed: {
    ...mapState("maps", ["gMapsKey", "bounds", "selected"]),
  },
  methods: {
    zoomUpdated(zoomLevel) {
      if (zoomLevel <= 13) {
        this.$store.commit("maps/selected", -1);
      }
    },
    mapReady() {
      this.$refs.map.mapObject.invalidateSize()
      const { map } = this.$refs;
      map.mapObject.on("click", this.selectTalhao);
    }
  },
  data() {
    return {
      mapOptions: {
        zoomControl: false,
        doubleClickZoom: false,
        tap: false,
        trackResize: false
      },
      mutantOptions: { type: "satellite", redraw: true },
    };
  },
  watch: {
  },
  async created() {
    await this.$store.dispatch("maps/updateBounds", { point: null });
    this.$refs.map.mapObject.invalidateSize()
  }
};
</script>

但是，当我第一次加载屏幕时，我们在浏览器中重新加载了标签页，我的地图如下所示:地图图片

However, when i load the screen for the first time, our reload the tab in the browser, my map looks like this:Map image

我尝试使用invalidateSize，检查div的高度是否已更改并且什么都没有.不知道我还能做什么来解决这个问题.任何帮助将不胜感激.

I've tried using invalidateSize, checked if the height of the div had changed and nothing. Don't know what else can I do to solve this. Any help would be appreciated.

推荐答案

它应适用于所有类型的离子应用.问题是由于在离子成分之前先加载了传单图.因此，请尝试以下一种应能工作的

It should work for all types of ionic application. the issue is due to loading of leaflet map before the ionic components. so try the below one it should work

ionViewDidEnter(){
   let osmMap = L.map('map');
   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   }).addTo(osmMap);
   osmMap.invalidateSize();
}

这篇关于瓷砖图仅在顶角的单张地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！