[Bug] 无法正常加载图层

YangHaoDiii commented 1 month ago

使用了openstreetmap 的示例代码，无法正确加载

zouyaoji commented 1 month ago

你具体咋加的？

YangHaoDiii commented 1 month ago

<script lang="ts" setup>
import type { VmReadyObject } from '@meteosci/vue-maplibre/es/utils'
import type { LngLatLike, SourceSpecification } from 'maplibre-gl'
import { VmLayerNative, VmMap } from '@meteosci/vue-maplibre'

const center = ref<LngLatLike>([11.39085, 47.27574])
const zoom = ref(1)
const isMapReady = ref(false)

const source: SourceSpecification = {
  type: 'raster',
  tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
  tileSize: 256,
  minzoom: 0,
  maxzoom: 19,
}

function onMapReady(e: VmReadyObject) {
  const { map } = e

  map.on('load', () => {
    map.resize()
    isMapReady.value = true
  })
}
</script>

<template>
  <div class="h-[100vh]">
    <VmMap map-style="https://demotiles.maplibre.org/style.json" :center="center" :zoom="zoom" @ready="onMapReady">
      <VmLayerNative v-if="isMapReady" id="openstreetmap-tiles" type="raster" :source="source" />
    </VmMap>
  </div>
</template>

zouyaoji commented 1 month ago

在线例子都能出来呢： https://vue-maplibre.meteosci.com/zh-CN/component/layer-native.html

你用的最新版本不？

meteosci / vue-maplibre

[Bug] 无法正常加载图层 #4