仅在顶角带有平铺层的传单地图

2022-01-12 00:00:00 leaflet javascript vue.js ionic-framework

我正在使用 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 的传单库，我的代码如下所示:

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();
}

相关文章