How to use LWmsTileLayer?

84 Views Asked by At

I have a question about vue-leaflet (Vue 3). I'm trying to use LWmsTileLayer component. Unfortunately, this component doesn't seem to work at all. No matter what I do, all I see is a gray background. (In vue2-leaflet this component works.) My code looks like this:

<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"
      :base-url="layer.url"
      :layers="layer.layers"
      :visible="layer.visible"
      :name="layer.name"
      :transparent="true"
      format="image/png"
      layer-type="base"
    />
  </l-map>
</template>

<script>
import "leaflet/dist/leaflet.css";
import {
  LMap,
  LWMSTileLayer,
} from "@vue-leaflet/vue-leaflet";
export default {
  name: "MapTest",
  components: {
    LMap,
    "l-wms-tile-layer": LWMSTileLayer,
  },
  data() {
    return {
      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"
        }
      ]
    };
  }
};
</script>

The question is how to use LWmsTileLayer correctly? Any feedback would be appreciated.

0

There are 0 best solutions below