@gisatcz/deckgl-geolib 1.11.1-dev.1 → 1.11.2-dev.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 +121 -0
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,121 @@
|
|
|
1
|
+
<p align="right">
|
|
2
|
+
<a href="https://www.npmjs.com/package/@gisatcz/deckgl-geolib">
|
|
3
|
+
<img src="https://img.shields.io/npm/v/@gisatcz/deckgl-geolib.svg?style=flat-square" alt="version" />
|
|
4
|
+
</a>
|
|
5
|
+
</p>
|
|
6
|
+
|
|
7
|
+
# 3DFLUS - Geolib Visualizer
|
|
8
|
+
|
|
9
|
+
The Geolib Visualizer is a library that extends the `deck.gl` framework to enable the visualization of geospatial data,
|
|
10
|
+
currently supporting Cloud-Optimized GeoTIFF (COG) files. This library offers an efficient way to display bitmap and
|
|
11
|
+
terrain data in applications with advanced customization options using [CogBitmapLayer](../geoimage/src/cogbitmaplayer/README.md)
|
|
12
|
+
and [CogTerrainLayer](../geoimage/src/cogterrainlayer/README.md). Another developed libraries [GeoImage](../geoimage/src/geoimage/README.md)
|
|
13
|
+
and [CogTiles](../geoimage/src/cogtiles/README.md) enhance rendering options.
|
|
14
|
+
|
|
15
|
+
<img src = "/images/ManillaCogHeatmap.png" width = "100%">
|
|
16
|
+
|
|
17
|
+
## Key Features
|
|
18
|
+
|
|
19
|
+
- **COG Rendering**: Efficiently loads and displays Cloud-Optimized GeoTIFF files.
|
|
20
|
+
- **Bitmap and Terrain Layers**: Supports visualizing both bitmap and elevation data.
|
|
21
|
+
- **Customizable Rendering**: Allows custom color scales, opacity control, and flexible geographic bounds.
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
## Installation
|
|
25
|
+
|
|
26
|
+
To use the Geolib Visualizer library, you need to have deck.gl and its dependencies installed.
|
|
27
|
+
|
|
28
|
+
Install the Geolib Visualizer via npm or yarn:
|
|
29
|
+
|
|
30
|
+
```
|
|
31
|
+
npm install @gisatcz/deckgl-geolib
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
or
|
|
35
|
+
```
|
|
36
|
+
yarn add @gisatcz/deckgl-geolib
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
For more information, visit the [npm package page](https://www.npmjs.com/package/@gisatcz/deckgl-geolib).
|
|
40
|
+
You can visit the package page to explore further versions and additional information.
|
|
41
|
+
|
|
42
|
+
## COG Data Preparation
|
|
43
|
+
For seamless integration of Geolib Visualizer library, please make sure you have followed our workflow [Data Preparation Guide for converting GeoTIFFs to COG files](../dataPreparation.md).
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
## Usage
|
|
48
|
+
|
|
49
|
+
Import package into project:
|
|
50
|
+
|
|
51
|
+
```typescript
|
|
52
|
+
import geolib from '@gisatcz/deckgl-geolib'
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
### 1. COG Bitmap Layer
|
|
56
|
+
|
|
57
|
+
The `CogBitmapLayer` is designed for visualizing Cloud-Optimized GeoTIFF files as raster layers.
|
|
58
|
+
The example below demonstrates its implementation, for more information and examples refer to the [CogBitmapLayer](../geoimage/src/cogbitmaplayer/README.md).
|
|
59
|
+
|
|
60
|
+
```typescript
|
|
61
|
+
const CogBitmapLayer = geolib.CogBitmapLayer;
|
|
62
|
+
|
|
63
|
+
const cogLayer = new CogBitmapLayer(
|
|
64
|
+
id: 'cog_bitmap_name',
|
|
65
|
+
rasterData: 'cog_bitmap_data_url.tif',
|
|
66
|
+
isTiled: true,
|
|
67
|
+
cogBitmapOptions: {
|
|
68
|
+
type: 'image'
|
|
69
|
+
}
|
|
70
|
+
);
|
|
71
|
+
```
|
|
72
|
+
### 2. COG Terrain Layer
|
|
73
|
+
|
|
74
|
+
For 3D terrain rendering, use `CogTerrainLayer` to visualize elevation data stored
|
|
75
|
+
in Cloud-Optimized GeoTIFF format, for more information and examples refer to the [CogTerrainLayer](../geoimage/src/cogterrainlayer/README.md).
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
```typescript
|
|
79
|
+
const CogTerrainLayer = geolib.CogTerrainLayer;
|
|
80
|
+
|
|
81
|
+
const cogLayer = new CogTerrainLayer(
|
|
82
|
+
id: 'cog_terrain_name',
|
|
83
|
+
elevationData: 'cog_terrain_data_url.tif',
|
|
84
|
+
isTiled: true,
|
|
85
|
+
tileSize: 256,
|
|
86
|
+
meshMaxError: 1,
|
|
87
|
+
operation: 'terrain+draw',
|
|
88
|
+
terrainOptions: {
|
|
89
|
+
type: 'terrain',
|
|
90
|
+
}
|
|
91
|
+
);
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
add layer to `DeckGL` instance, visit [deck.gl](https://deck.gl/docs/get-started/using-with-react) for more about deck.gl compoments.
|
|
95
|
+
```javascript
|
|
96
|
+
<DeckGL
|
|
97
|
+
initialViewState={INITIAL_VIEW_STATE}
|
|
98
|
+
controller={true}
|
|
99
|
+
layers={cogLayer} />
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
## Development
|
|
103
|
+
Clone the repository and install dependencies
|
|
104
|
+
```
|
|
105
|
+
yarn install
|
|
106
|
+
```
|
|
107
|
+
Start an example
|
|
108
|
+
|
|
109
|
+
```
|
|
110
|
+
yarn start
|
|
111
|
+
```
|
|
112
|
+
The example is defaultly running at http://localhost:5173/
|
|
113
|
+
|
|
114
|
+
The bitmap and terrain example files are located here [example/src/examples](../example/src/examples)
|
|
115
|
+
|
|
116
|
+
[//]: # (## Contributions)
|
|
117
|
+
|
|
118
|
+
[//]: # (Contributions and feedback are welcome! If you encounter any issues or have suggestions for improvements, please feel free to open an issue or submit a pull request.)
|
|
119
|
+
|
|
120
|
+
[//]: # ()
|
|
121
|
+
[//]: # (## License)
|