@geoql/v-maplibre 1.4.0 → 1.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md CHANGED
@@ -17,38 +17,40 @@
17
17
  - 🚀 **Nuxt 4 Ready** - Seamlessly works with Nuxt 4 and SSR
18
18
  - 🎯 **PMTiles Built-in** - Native support for PMTiles protocol
19
19
  - 🌐 **deck.gl Integration** - High-performance WebGL visualization layers
20
+ - 🛰️ **COG/GeoTIFF Support** - GPU-accelerated Cloud-Optimized GeoTIFF layers
21
+ - 📡 **LiDAR Viewer** - LAS/LAZ/COPC point cloud visualization with streaming
20
22
 
21
23
  ## Installation
22
24
 
23
25
  ```bash
24
26
  # bun
25
- bun add @geoql/v-maplibre maplibre-gl
27
+ bun add @geoql/v-maplibre maplibre-gl @deck.gl/{core,layers,mapbox,aggregation-layers,geo-layers,mesh-layers} maplibre-gl-wind
26
28
 
27
29
  # npm
28
- npm install @geoql/v-maplibre maplibre-gl
30
+ npm install @geoql/v-maplibre maplibre-gl @deck.gl/{core,layers,mapbox,aggregation-layers,geo-layers,mesh-layers} maplibre-gl-wind
29
31
 
30
32
  # yarn
31
- yarn add @geoql/v-maplibre maplibre-gl
33
+ yarn add @geoql/v-maplibre maplibre-gl @deck.gl/{core,layers,mapbox,aggregation-layers,geo-layers,mesh-layers} maplibre-gl-wind
32
34
 
33
35
  # pnpm
34
- pnpm add @geoql/v-maplibre maplibre-gl
36
+ pnpm add @geoql/v-maplibre maplibre-gl @deck.gl/{core,layers,mapbox,aggregation-layers,geo-layers,mesh-layers} maplibre-gl-wind
35
37
  ```
36
38
 
37
- ### deck.gl Layers (Optional)
39
+ > **Note:** All packages listed above are required peer dependencies. Without them, your build will fail with missing export errors.
38
40
 
39
- For deck.gl visualization layers, install the required packages:
41
+ ### Additional Optional Dependencies
42
+
43
+ Install these packages based on the features you need:
40
44
 
41
45
  ```bash
42
- # Core deck.gl packages
43
- bun add @deck.gl/core @deck.gl/layers @deck.gl/mapbox
46
+ # Raster/COG layers (Cloud-Optimized GeoTIFF)
47
+ bun add @developmentseed/deck.gl-raster geotiff-geokeys-to-proj4
44
48
 
45
- # Additional layer packages (as needed)
46
- bun add @deck.gl/aggregation-layers # Heatmap, Hexagon, Grid
47
- bun add @deck.gl/geo-layers # Trips, MVT, Tile, H3
48
- bun add @deck.gl/mesh-layers # SimpleMesh, Scenegraph
49
+ # LiDAR viewer control
50
+ bun add maplibre-gl-lidar
49
51
 
50
- # Raster layers (COG/GeoTIFF)
51
- bun add @developmentseed/deck.gl-geotiff
52
+ # Wind particle visualization
53
+ bun add maplibre-gl-wind
52
54
  ```
53
55
 
54
56
  ## Quick Start
@@ -91,6 +93,7 @@ bun add @developmentseed/deck.gl-geotiff
91
93
  - **`VLayerMaplibreCanvas`** - Canvas layers
92
94
  - **`VLayerMaplibreCluster`** - Clustered point layers
93
95
  - **`VLayerMaplibrePmtile`** - PMTiles layers
96
+ - **`VLayerMaplibreRoute`** - Route/delivery tracking visualization
94
97
 
95
98
  ### deck.gl Layer Components
96
99
 
@@ -125,16 +128,38 @@ High-performance WebGL visualization layers powered by deck.gl:
125
128
  - `VLayerDeckglTile3D` - 3D Tiles (Cesium)
126
129
  - `VLayerDeckglTerrain` - Terrain mesh
127
130
  - `VLayerDeckglH3Hexagon` - H3 hexagons
131
+ - `VLayerDeckglH3Cluster` - Clustered H3 hexagon regions
128
132
  - `VLayerDeckglGreatCircle` - Great circle arcs
133
+ - `VLayerDeckglWMS` - Web Map Service tiles
134
+
135
+ **Tile System Layers**
136
+
137
+ - `VLayerDeckglS2` - Google S2 geometry cells
138
+ - `VLayerDeckglGeohash` - Geohash spatial indexing
139
+ - `VLayerDeckglQuadkey` - Bing Maps Quadkey tiles
140
+ - `VLayerDeckglGridCell` - Pre-aggregated grid cells
129
141
 
130
142
  **Mesh Layers**
131
143
 
132
144
  - `VLayerDeckglSimpleMesh` - 3D meshes
133
145
  - `VLayerDeckglScenegraph` - glTF/GLB models
134
146
 
135
- **Raster Layers** (requires `@developmentseed/deck.gl-geotiff`)
147
+ **Point Cloud Layers**
148
+
149
+ - `VLayerDeckglPointCloud` - LiDAR/photogrammetry point clouds
150
+ - `VLayerDeckglSolidPolygon` - 3D extruded solid polygons
151
+
152
+ **Raster Layers** (requires `@developmentseed/deck.gl-raster`)
153
+
154
+ - `VLayerDeckglCOG` - Cloud-Optimized GeoTIFF visualization (GPU-accelerated, auto-reprojection)
155
+
156
+ **Wind Visualization** (requires `maplibre-gl-wind`)
136
157
 
137
- - `VLayerDeckglCOG` - Cloud-Optimized GeoTIFF visualization
158
+ - `VLayerDeckglWindParticle` - Animated wind particle flow with speed-based color ramps
159
+
160
+ **Generic Layer**
161
+
162
+ - `VLayerDeckgl` - Use any deck.gl layer class directly
138
163
 
139
164
  ### Control Components
140
165
 
@@ -143,6 +168,7 @@ High-performance WebGL visualization layers powered by deck.gl:
143
168
  - **`VControlGeolocate`** - Geolocation control
144
169
  - **`VControlFullscreen`** - Fullscreen toggle
145
170
  - **`VControlAttribution`** - Attribution control
171
+ - **`VControlLidar`** - LiDAR point cloud viewer (LAS/LAZ/COPC support, streaming, color schemes)
146
172
 
147
173
  ## deck.gl Example
148
174
 
@@ -178,6 +204,44 @@ High-performance WebGL visualization layers powered by deck.gl:
178
204
  </template>
179
205
  ```
180
206
 
207
+ ## Wind Visualization Example
208
+
209
+ ```vue
210
+ <script setup lang="ts">
211
+ import { VMap, VLayerDeckglWindParticle } from '@geoql/v-maplibre';
212
+
213
+ const mapOptions = {
214
+ style: 'https://basemaps.cartocdn.com/gl/dark-matter-gl-style/style.json',
215
+ center: [0, 20],
216
+ zoom: 2,
217
+ };
218
+
219
+ // Wind data points with speed (m/s) and direction (degrees, 0=North)
220
+ const windData = [
221
+ { lat: 40.7, lon: -74.0, speed: 5.2, direction: 180 },
222
+ { lat: 34.0, lon: -118.2, speed: 3.1, direction: 270 },
223
+ // ... more points
224
+ ];
225
+ </script>
226
+
227
+ <template>
228
+ <VMap :options="mapOptions" style="height: 500px">
229
+ <VLayerDeckglWindParticle
230
+ id="wind"
231
+ :wind-data="windData"
232
+ :num-particles="8192"
233
+ :speed-factor="50"
234
+ :color-ramp="[
235
+ [0.0, [59, 130, 189, 255]],
236
+ [0.5, [253, 174, 97, 255]],
237
+ [1.0, [213, 62, 79, 255]],
238
+ ]"
239
+ :speed-range="[0, 30]"
240
+ ></VLayerDeckglWindParticle>
241
+ </VMap>
242
+ </template>
243
+ ```
244
+
181
245
  ## Usage with Nuxt
182
246
 
183
247
  For Nuxt applications, wrap the map component with `ClientOnly`: