@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 +80 -16
- package/dist/index.js +1965 -1171
- package/dist/index.js.map +1 -1
- package/dist/layers/deckgl/index.d.ts +2 -0
- package/dist/layers/deckgl/text/VLayerDeckglText.vue.d.ts +18 -1
- package/dist/layers/deckgl/wind-particle/VLayerDeckglWindParticle.vue.d.ts +120 -0
- package/dist/layers/deckgl/wind-particle/index.d.ts +3 -0
- package/package.json +14 -6
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
|
-
|
|
39
|
+
> **Note:** All packages listed above are required peer dependencies. Without them, your build will fail with missing export errors.
|
|
38
40
|
|
|
39
|
-
|
|
41
|
+
### Additional Optional Dependencies
|
|
42
|
+
|
|
43
|
+
Install these packages based on the features you need:
|
|
40
44
|
|
|
41
45
|
```bash
|
|
42
|
-
#
|
|
43
|
-
bun add @
|
|
46
|
+
# Raster/COG layers (Cloud-Optimized GeoTIFF)
|
|
47
|
+
bun add @developmentseed/deck.gl-raster geotiff-geokeys-to-proj4
|
|
44
48
|
|
|
45
|
-
#
|
|
46
|
-
bun add
|
|
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
|
-
#
|
|
51
|
-
bun add
|
|
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
|
-
**
|
|
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
|
-
- `
|
|
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`:
|