@geoql/v-maplibre 1.3.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,35 +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
48
+
49
+ # LiDAR viewer control
50
+ bun add maplibre-gl-lidar
44
51
 
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
52
+ # Wind particle visualization
53
+ bun add maplibre-gl-wind
49
54
  ```
50
55
 
51
56
  ## Quick Start
@@ -88,6 +93,7 @@ bun add @deck.gl/mesh-layers # SimpleMesh, Scenegraph
88
93
  - **`VLayerMaplibreCanvas`** - Canvas layers
89
94
  - **`VLayerMaplibreCluster`** - Clustered point layers
90
95
  - **`VLayerMaplibrePmtile`** - PMTiles layers
96
+ - **`VLayerMaplibreRoute`** - Route/delivery tracking visualization
91
97
 
92
98
  ### deck.gl Layer Components
93
99
 
@@ -122,13 +128,39 @@ High-performance WebGL visualization layers powered by deck.gl:
122
128
  - `VLayerDeckglTile3D` - 3D Tiles (Cesium)
123
129
  - `VLayerDeckglTerrain` - Terrain mesh
124
130
  - `VLayerDeckglH3Hexagon` - H3 hexagons
131
+ - `VLayerDeckglH3Cluster` - Clustered H3 hexagon regions
125
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
126
141
 
127
142
  **Mesh Layers**
128
143
 
129
144
  - `VLayerDeckglSimpleMesh` - 3D meshes
130
145
  - `VLayerDeckglScenegraph` - glTF/GLB models
131
146
 
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`)
157
+
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
163
+
132
164
  ### Control Components
133
165
 
134
166
  - **`VControlNavigation`** - Navigation controls (zoom, rotate)
@@ -136,6 +168,7 @@ High-performance WebGL visualization layers powered by deck.gl:
136
168
  - **`VControlGeolocate`** - Geolocation control
137
169
  - **`VControlFullscreen`** - Fullscreen toggle
138
170
  - **`VControlAttribution`** - Attribution control
171
+ - **`VControlLidar`** - LiDAR point cloud viewer (LAS/LAZ/COPC support, streaming, color schemes)
139
172
 
140
173
  ## deck.gl Example
141
174
 
@@ -171,6 +204,44 @@ High-performance WebGL visualization layers powered by deck.gl:
171
204
  </template>
172
205
  ```
173
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
+
174
245
  ## Usage with Nuxt
175
246
 
176
247
  For Nuxt applications, wrap the map component with `ClientOnly`:
package/dist/index.d.ts CHANGED
@@ -1,9 +1,9 @@
1
1
  import { VControlAttribution, VControlFullscreen, VControlGeolocate, VControlNavigation, VControlScale, VControlLidar } from './controls';
2
- import { VLayerMaplibreCanvas, VLayerMaplibreGeojson, VLayerMaplibreCluster, VLayerMaplibreImage, VLayerMaplibreRaster, VLayerMaplibreVector, VLayerMaplibreVideo, VLayerMaplibrePmtile } from './layers';
2
+ import { VLayerMaplibreCanvas, VLayerMaplibreGeojson, VLayerMaplibreCluster, VLayerMaplibreImage, VLayerMaplibreRaster, VLayerMaplibreVector, VLayerMaplibreVideo, VLayerMaplibrePmtile, VLayerMaplibreRoute } from './layers';
3
3
  import VMap from './map/VMap.vue';
4
4
  import VMarker from './markers/VMarker.vue';
5
5
  import VPopup from './popups/VPopup.vue';
6
- export { VMap, VMarker, VPopup, VLayerMaplibreCanvas, VLayerMaplibreGeojson, VLayerMaplibreCluster, VLayerMaplibreImage, VLayerMaplibreRaster, VLayerMaplibreVector, VLayerMaplibreVideo, VLayerMaplibrePmtile, VControlAttribution, VControlFullscreen, VControlGeolocate, VControlNavigation, VControlScale, VControlLidar, };
6
+ export { VMap, VMarker, VPopup, VLayerMaplibreCanvas, VLayerMaplibreGeojson, VLayerMaplibreCluster, VLayerMaplibreImage, VLayerMaplibreRaster, VLayerMaplibreVector, VLayerMaplibreVideo, VLayerMaplibrePmtile, VLayerMaplibreRoute, VControlAttribution, VControlFullscreen, VControlGeolocate, VControlNavigation, VControlScale, VControlLidar, };
7
7
  export type { LidarControlOptions, ColorScheme, CopcLoadingMode, PointCloudInfo, PointCloudBounds, StreamingProgress, } from './controls';
8
8
  export * from './layers/deckgl';
9
9
  export default VMap;