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.