Vue3中vue-leaflet的LWmsTileLayer组件正确使用方法咨询

核心问题与修正点 #

1. Props命名变更 #

vue-leaflet（Vue3版本）对组件props做了调整，LWMSTileLayer不再使用base-url，而是直接用url作为服务地址的props，这是和vue2-leaflet的关键差异之一。

2. 显式指定CRS匹配 #

你使用的WMS服务默认采用EPSG:4326坐标系，但Leaflet地图默认是EPSG:3857。需要让WMS服务适配地图的CRS，最简单的方式是给LWMSTileLayer添加crs属性。

3. 统一动态属性绑定 #

确保所有需要传递的属性都用:prop语法绑定，避免Vue3的props校验报错，比如format也需要改为绑定形式。

修改后的完整代码 #

<template>
  <l-map
    ref="map"
    :zoom="zoom"
    :center="center"
    :markerZoomAnimation="true"
    :fadeAnimation="true"
    :minZoom="9"
    :maxZoom="14"
  >
    <l-wms-tile-layer
      v-for="layer in baseLayers"
      :key="layer.name"
      :url="layer.url" <!-- 替换base-url为url -->
      :layers="layer.layers"
      :visible="layer.visible"
      :name="layer.name"
      :transparent="true"
      :format="layer.format" <!-- 改为绑定形式 -->
      :crs="L.CRS.EPSG4326" <!-- 指定匹配WMS的CRS -->
      layer-type="base"
    />
  </l-map>
</template>

<script>
import "leaflet/dist/leaflet.css";
import { LMap, LWMSTileLayer } from "@vue-leaflet/vue-leaflet";
import L from "leaflet"; // 引入Leaflet核心库

export default {
  name: "MapTest",
  components: {
    LMap,
    "l-wms-tile-layer": LWMSTileLayer,
  },
  data() {
    return {
      L, // 将L挂载到data中供模板使用
      zoom: 9,
      center: [49.2265592, 16.5957531],
      mapHeight: 750,
      baseLayers: [
        {
          name: "Test",
          visible: true,
          layers: "GR_ZM50",
          url: "http://geoportal.cuzk.cz/WMS_ZM50_PUB/WMService.aspx",
          format: "image/png" // 移到data中便于绑定
        }
      ]
    };
  }
};
</script>

<style scoped>
/* 必须给地图容器设置高度，否则可能显示为空 */
.l-map {
  height: 750px;
}
</style>

额外检查项 #

• 确认WMS服务地址可正常访问，若本地开发存在跨域问题，需配置代理解决。
• 查看浏览器控制台是否有404请求或CORS错误，这类问题会直接导致瓦片加载失败，显示灰色背景。

内容的提问来源于stack exchange，提问作者DaBler