Examples
WMS Layer (deck.gl)
Load and display Web Map Service (WMS) layers with automatic tiling and caching.
Installation
$ npx shadcn-vue@latest add https://mapcn-vue.geoql.in/r/map-deckgl-geoUsage
<script setup lang="ts">
import { VMap, VControlNavigation } from '@geoql/v-maplibre';
import { VLayerDeckglWMS } from '@geoql/v-maplibre/deck.gl';
const mapOptions = {
style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
center: [10.0, 51.0],
zoom: 5,
};
// WMS service URL
const WMS_URL = 'https://ows.terrestris.de/osm/service';
</script>
<template>
<VMap :options="mapOptions" class="h-125 w-full">
<VControlNavigation position="top-right" />
<VLayerDeckglWMS
id="wms-layer"
:data="WMS_URL"
service-type="wms"
:layers="['OSM-WMS']"
srs="EPSG:4326"
:opacity="0.7"
/>
</VMap>
</template> Components 3
<VMap />@geoql/v-maplibre<VControlNavigation />@geoql/v-maplibre<VLayerDeckglWMS />@geoql/v-maplibre/deck.gl