@znemz/cesium-navigation 3.0.5 → 6.0.1
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 +175 -63
- package/dist/cesium-navigation.css +1 -0
- package/dist/cesium-navigation.js +479 -0
- package/dist/cesium-navigation.js.map +1 -0
- package/dist/cesium-navigation.umd.js +20 -0
- package/dist/cesium-navigation.umd.js.map +1 -0
- package/dist/index.d.ts +174 -0
- package/package.json +52 -67
- package/dist/browser.js +0 -2610
- package/dist/esm.js +0 -2606
- package/dist/index.css +0 -492
- package/dist/index.js +0 -2610
package/README.md
CHANGED
|
@@ -1,101 +1,213 @@
|
|
|
1
|
-
# cesium-navigation
|
|
1
|
+
# @znemz/cesium-navigation
|
|
2
2
|
|
|
3
|
-
[](https://www.npmjs.com/package/@znemz/cesium-navigation)
|
|
4
|
+
[](https://github.com/brickhouse-tech/cesium-navigation/actions/workflows/tests.yml)
|
|
4
5
|
|
|
5
|
-
|
|
6
|
-
distance scale graphical user interface.
|
|
6
|
+
Cesium plugin that adds compass, navigator (zoom controls), and distance scale widgets to the map.
|
|
7
7
|
|
|
8
|
-
|
|
9
|
-
is no need to conform to Cesium's insanity of requirejs when tools like webpack and rollup exist.
|
|
8
|
+
**v5.0.0** — Fully modernized with TypeScript, Vite, and zero legacy dependencies!
|
|
10
9
|
|
|
11
|
-
##
|
|
10
|
+
## Features
|
|
12
11
|
|
|
13
|
-
|
|
12
|
+
- 🧭 **Compass** - Interactive compass for rotation and orientation
|
|
13
|
+
- 🔍 **Zoom Controls** - In/out zoom buttons
|
|
14
|
+
- 📏 **Distance Scale** - Dynamic distance legend
|
|
15
|
+
- 🎯 **Reset View** - One-click return to default view
|
|
16
|
+
- 📱 **Responsive** - Works on desktop and mobile
|
|
17
|
+
- 🎨 **Customizable** - Configure which controls to display
|
|
18
|
+
- 💪 **TypeScript** - Full type safety
|
|
19
|
+
- 🌲 **Tree-shakeable** - ES modules with zero runtime dependencies
|
|
14
20
|
|
|
15
|
-
##
|
|
21
|
+
## Breaking Changes from v4.x
|
|
16
22
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
23
|
+
- **Requires Node >= 20**
|
|
24
|
+
- **Requires Cesium >= 1.100**
|
|
25
|
+
- Removed all legacy dependencies (Knockout.js, HammerJS, markdown-it)
|
|
26
|
+
- Native ES modules only (no CommonJS)
|
|
27
|
+
- TypeScript-first API
|
|
28
|
+
- Removed `browser_` field from package.json
|
|
20
29
|
|
|
21
|
-
##
|
|
30
|
+
## Installation
|
|
22
31
|
|
|
23
|
-
|
|
24
|
-
|
|
32
|
+
```bash
|
|
33
|
+
npm install @znemz/cesium-navigation cesium
|
|
34
|
+
```
|
|
25
35
|
|
|
26
|
-
##
|
|
36
|
+
## Usage
|
|
27
37
|
|
|
28
|
-
|
|
38
|
+
### ES Modules (Vite, webpack 5+)
|
|
29
39
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
-
|
|
40
|
+
```typescript
|
|
41
|
+
import * as Cesium from 'cesium';
|
|
42
|
+
import { viewerCesiumNavigationMixin } from '@znemz/cesium-navigation';
|
|
43
|
+
import '@znemz/cesium-navigation/style.css';
|
|
34
44
|
|
|
35
|
-
|
|
45
|
+
const viewer = new Cesium.Viewer('cesiumContainer');
|
|
46
|
+
viewer.extend(viewerCesiumNavigationMixin, {
|
|
47
|
+
enableCompass: true,
|
|
48
|
+
enableZoomControls: true,
|
|
49
|
+
enableDistanceLegend: true,
|
|
50
|
+
units: 'kilometers' // or 'miles', 'meters', etc.
|
|
51
|
+
});
|
|
52
|
+
```
|
|
36
53
|
|
|
37
|
-
|
|
54
|
+
### Direct instantiation
|
|
38
55
|
|
|
39
|
-
|
|
56
|
+
```typescript
|
|
57
|
+
import { CesiumNavigation } from '@znemz/cesium-navigation';
|
|
58
|
+
import '@znemz/cesium-navigation/style.css';
|
|
40
59
|
|
|
41
|
-
|
|
42
|
-
|
|
60
|
+
const viewer = new Cesium.Viewer('cesiumContainer');
|
|
61
|
+
const navigation = new CesiumNavigation(viewer, {
|
|
62
|
+
enableCompass: true,
|
|
63
|
+
enableZoomControls: true,
|
|
64
|
+
enableDistanceLegend: true,
|
|
65
|
+
units: 'kilometers',
|
|
66
|
+
defaultResetView: Cesium.Rectangle.fromDegrees(-180, -90, 180, 90)
|
|
67
|
+
});
|
|
43
68
|
|
|
44
|
-
|
|
69
|
+
// Later, clean up
|
|
70
|
+
navigation.destroy();
|
|
71
|
+
```
|
|
45
72
|
|
|
46
|
-
|
|
73
|
+
### TypeScript
|
|
47
74
|
|
|
48
|
-
|
|
75
|
+
Full TypeScript support with strict types:
|
|
49
76
|
|
|
50
|
-
|
|
77
|
+
```typescript
|
|
78
|
+
import type { ViewerWithCesiumNavigation } from '@znemz/cesium-navigation';
|
|
51
79
|
|
|
52
|
-
|
|
80
|
+
const viewer = new Cesium.Viewer('cesiumContainer') as ViewerWithCesiumNavigation;
|
|
81
|
+
viewer.extend(viewerCesiumNavigationMixin);
|
|
53
82
|
|
|
54
|
-
|
|
83
|
+
// Type-safe access
|
|
84
|
+
viewer.cesiumNavigation.setNavigationLocked(true);
|
|
85
|
+
```
|
|
55
86
|
|
|
56
|
-
|
|
87
|
+
## Configuration Options
|
|
88
|
+
|
|
89
|
+
```typescript
|
|
90
|
+
interface CesiumNavigationOptions {
|
|
91
|
+
/** Enable or disable the compass control (default: true) */
|
|
92
|
+
enableCompass?: boolean;
|
|
93
|
+
|
|
94
|
+
/** Enable or disable the zoom controls (default: true) */
|
|
95
|
+
enableZoomControls?: boolean;
|
|
96
|
+
|
|
97
|
+
/** Enable or disable the distance legend (default: true) */
|
|
98
|
+
enableDistanceLegend?: boolean;
|
|
99
|
+
|
|
100
|
+
/** Units for distance legend (default: 'kilometers') */
|
|
101
|
+
units?: 'kilometers' | 'meters' | 'miles' | 'feet' | string;
|
|
102
|
+
|
|
103
|
+
/** Default reset view (Rectangle or Cartographic) */
|
|
104
|
+
defaultResetView?: Cesium.Rectangle | Cesium.Cartographic;
|
|
105
|
+
|
|
106
|
+
/** Custom distance label formatter */
|
|
107
|
+
distanceLabelFormatter?: (distance: number, units: string) => string;
|
|
108
|
+
}
|
|
109
|
+
```
|
|
57
110
|
|
|
58
|
-
|
|
59
|
-
|
|
111
|
+
## Bundler Setup
|
|
112
|
+
|
|
113
|
+
### Vite
|
|
114
|
+
|
|
115
|
+
```javascript
|
|
116
|
+
// vite.config.js
|
|
117
|
+
import { defineConfig } from 'vite';
|
|
118
|
+
import cesium from 'vite-plugin-cesium';
|
|
119
|
+
|
|
120
|
+
export default defineConfig({
|
|
121
|
+
plugins: [cesium()]
|
|
122
|
+
});
|
|
123
|
+
```
|
|
60
124
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
//
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
125
|
+
### Webpack 5
|
|
126
|
+
|
|
127
|
+
```javascript
|
|
128
|
+
// webpack.config.js
|
|
129
|
+
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
|
130
|
+
const webpack = require('webpack');
|
|
131
|
+
const path = require('path');
|
|
132
|
+
|
|
133
|
+
module.exports = {
|
|
134
|
+
plugins: [
|
|
135
|
+
new CopyWebpackPlugin({
|
|
136
|
+
patterns: [
|
|
137
|
+
{
|
|
138
|
+
from: 'node_modules/cesium/Build/Cesium/Workers',
|
|
139
|
+
to: 'cesium/Workers'
|
|
140
|
+
},
|
|
141
|
+
{
|
|
142
|
+
from: 'node_modules/cesium/Build/Cesium/ThirdParty',
|
|
143
|
+
to: 'cesium/ThirdParty'
|
|
144
|
+
},
|
|
145
|
+
{
|
|
146
|
+
from: 'node_modules/cesium/Build/Cesium/Assets',
|
|
147
|
+
to: 'cesium/Assets'
|
|
148
|
+
},
|
|
149
|
+
{
|
|
150
|
+
from: 'node_modules/cesium/Build/Cesium/Widgets',
|
|
151
|
+
to: 'cesium/Widgets'
|
|
152
|
+
}
|
|
153
|
+
]
|
|
154
|
+
}),
|
|
155
|
+
new webpack.DefinePlugin({
|
|
156
|
+
CESIUM_BASE_URL: JSON.stringify('/cesium')
|
|
157
|
+
})
|
|
158
|
+
]
|
|
159
|
+
};
|
|
72
160
|
```
|
|
73
161
|
|
|
74
|
-
##
|
|
162
|
+
## Development
|
|
75
163
|
|
|
76
|
-
|
|
164
|
+
```bash
|
|
165
|
+
# Install dependencies
|
|
166
|
+
npm install
|
|
77
167
|
|
|
78
|
-
|
|
79
|
-
|
|
168
|
+
# Run type checking
|
|
169
|
+
npm run type-check
|
|
170
|
+
|
|
171
|
+
# Build
|
|
172
|
+
npm run build
|
|
173
|
+
|
|
174
|
+
# Run tests
|
|
175
|
+
npm test
|
|
176
|
+
|
|
177
|
+
# Lint
|
|
178
|
+
npm run lint
|
|
179
|
+
npm run lint:fix
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
## Migration from v4.x
|
|
183
|
+
|
|
184
|
+
The API surface is largely the same, but with modernized internals:
|
|
185
|
+
|
|
186
|
+
**Before (v4.x):**
|
|
187
|
+
```javascript
|
|
188
|
+
const viewer = new Cesium.Viewer('cesiumContainer');
|
|
189
|
+
viewer.extend(viewerCesiumNavigationMixin);
|
|
80
190
|
```
|
|
81
191
|
|
|
82
|
-
|
|
83
|
-
|
|
192
|
+
**After (v5.x):**
|
|
193
|
+
```typescript
|
|
194
|
+
import { viewerCesiumNavigationMixin } from '@znemz/cesium-navigation';
|
|
195
|
+
import '@znemz/cesium-navigation/style.css';
|
|
84
196
|
|
|
85
|
-
|
|
86
|
-
viewer.
|
|
197
|
+
const viewer = new Cesium.Viewer('cesiumContainer');
|
|
198
|
+
viewer.extend(viewerCesiumNavigationMixin);
|
|
87
199
|
```
|
|
88
200
|
|
|
89
|
-
|
|
201
|
+
## License
|
|
202
|
+
|
|
203
|
+
Apache-2.0
|
|
90
204
|
|
|
91
|
-
##
|
|
205
|
+
## Credits
|
|
92
206
|
|
|
93
|
-
|
|
207
|
+
- Original author: Alberto Acevedo
|
|
208
|
+
- Maintainer: Nick McCready (@nmccready)
|
|
209
|
+
- Sponsor: [Brickhouse Technologies](https://github.com/brickhouse-tech)
|
|
94
210
|
|
|
95
|
-
##
|
|
211
|
+
## Contributing
|
|
96
212
|
|
|
97
|
-
|
|
98
|
-
[npm-image]: https://img.shields.io/npm/v/@znemz/cesium-navigation.svg
|
|
99
|
-
[npm-url]: https://www.npmjs.com/package/@znemz/cesium-navigation
|
|
100
|
-
[travis-image]: https://img.shields.io/travis/nmccready/cesium-navigation.svg?label=travis-ci
|
|
101
|
-
[travis-url]: https://travis-ci.org/nmccready/cesium-navigation
|
|
213
|
+
Issues and pull requests welcome! Please use conventional commits for commit messages.
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:root{--default-font: "Roboto", sans-serif;--highlight-color: #68adfe;--floating-background-color: rgba(47, 53, 60, .8);--floating-text-color: #ffffff;--floating-element-border: 1px solid #555555}.full-window{position:absolute;top:0;left:0;right:0;bottom:0;margin:0;overflow:hidden;padding:0;transition:left .25s ease-out}.transparent-to-input{pointer-events:none}.opaque-to-input{pointer-events:auto}.clickable{cursor:pointer}.cesium-widget-cesiumNavigationContainer{position:relative}.floating{pointer-events:auto;position:absolute;border-radius:15px;background-color:var(--floating-background-color)}.floating-horizontal{pointer-events:auto;position:absolute;border-radius:15px;background-color:var(--floating-background-color);padding-left:5px;padding-right:5px}.floating-vertical{pointer-events:auto;position:absolute;border-radius:15px;background-color:var(--floating-background-color);padding-top:5px;padding-bottom:5px}.navigation-controls{position:absolute;right:30px;top:210px;width:30px;border:1px solid rgba(255,255,255,.1);font-weight:300;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.navigation-control{cursor:pointer;border-bottom:var(--floating-element-border)}.navigation-control:active{color:#fff}.navigation-control-last{cursor:pointer;border-bottom:0}.navigation-control-icon-zoom-in{position:relative;text-align:center;font-size:20px;color:var(--floating-text-color);padding-bottom:4px}.navigation-control-icon-zoom-out{position:relative;text-align:center;font-size:20px;color:var(--floating-text-color)}.navigation-control-icon-reset{position:relative;left:10px;width:10px;height:10px;fill:#fffc;padding-top:6px;padding-bottom:6px;box-sizing:content-box}.compass{pointer-events:auto;position:absolute;right:0;top:100px;width:95px;height:95px;overflow:hidden}.compass-outer-ring{position:absolute;top:0;width:95px;height:95px;fill:#ffffff80}.compass-outer-ring-background{position:absolute;top:14px;left:14px;width:44px;height:44px;border-radius:44px;border:12px solid var(--floating-background-color);box-sizing:content-box}.compass-gyro{pointer-events:none;position:absolute;top:0;width:95px;height:95px;fill:#ccc}.compass-gyro-active{fill:var(--highlight-color)}.compass-gyro-background{position:absolute;top:30px;left:30px;width:33px;height:33px;border-radius:33px;background-color:var(--floating-background-color);border:1px solid rgba(255,255,255,.2);box-sizing:content-box}.compass-gyro-background:hover+.compass-gyro{fill:var(--highlight-color)}.compass-rotation-marker{position:absolute;top:0;width:95px;height:95px;fill:var(--highlight-color)}.distance-legend{pointer-events:auto;position:absolute;border-radius:15px;background-color:var(--floating-background-color);padding-left:5px;padding-right:5px;right:25px;bottom:30px;height:30px;width:125px;border:1px solid rgba(255,255,255,.1);box-sizing:content-box}.distance-legend-label{display:inline-block;font-family:var(--default-font);font-size:14px;font-weight:lighter;line-height:30px;color:var(--floating-text-color);width:125px;text-align:center}.distance-legend-scale-bar{border-left:1px solid var(--floating-text-color);border-right:1px solid var(--floating-text-color);border-bottom:1px solid var(--floating-text-color);position:absolute;height:10px;top:15px}@media screen and (max-width:700px),screen and (max-height:420px){.navigation-controls,.compass,.distance-legend{display:none}}@media print{.navigation-controls,.compass,.distance-legend,.floating{display:none}.full-window{position:initial}}
|