Skymap 3D Map

Cesium wrapper for modularity.

Install

$3

``bash
yarn add @skymapglobal/map-3d
`

$3

`js
const webpack = require("webpack");

module.exports = {
assetsDir: "static",

configureWebpack: {
output: {
// Needed to compile multiline strings in Cesium
sourcePrefix: ""
},
amd: {
// Enable webpack-friendly use of require in Cesium
toUrlUndefined: true
},
node: {
// Resolve node module use of fs
fs: "empty"
},
module: {
unknownContextCritical: false

// Uncomment for release
// rules: [
// {
// // Remove pragmas
// test: /\.js$/,
// enforce: "pre",
// include: path.resolve(__dirname, "node_modules/cesium/Source"),
// sideEffects: false,
// use: [
// {
// loader: "strip-pragma-loader",
// options: {
// pragmas: {
// debug: false
// }
// }
// }
// ]
// }
// ]
},
plugins: [
new webpack.DefinePlugin({
// Define relative base path in cesium for loading assets
CESIUM_BASE_URL: JSON.stringify("./static/libs/cesium/")
})
]
}
};
`

$3

`powershell


Copy Cesium Assets


Copy-Item .\node_modules\cesium\Source\Assets .\public\static\libs\cesium\Assets -Recurse -Force
Copy-Item .\node_modules\cesium\Source\Widgets .\public\static\libs\cesium\Widgets -Recurse -Force
Copy-Item .\node_modules\cesium\Source\ThirdParty\Workers .\public\static\libs\cesium\ThirdParty\Workers -Recurse -Force
Copy-Item .\node_modules\cesium\Build\Cesium\Workers .\public\static\libs\cesium\Workers -Recurse -Force
`

Or

`sh
mkdir public/static/libs
mkdir public/static/libs/cesium
mkdir public/static/libs/cesium/ThirdParty

cp -R ./node_modules/cesium/Source/Assets public/static/libs/cesium/Assets
cp -R ./node_modules/cesium/Source/Widgets public/static/libs/cesium/Widgets
cp -R ./node_modules/cesium/Source/ThirdParty/Workers public/static/libs/cesium/ThirdParty/Widgets
cp -R ./node_modules/cesium/Build/Cesium/Workers public/static/libs/cesium/Workers
`

$3

Create .gitignore in public/static/libs

Edit .gitignore

`git
cesium
`

Usage

`html



`

Full Example

`html



`

Create a simple Module example

`html



`

Create Draggable Popup Module example

`html



``

API

$3

#### Props

* accessToken: String - Cesium Ion Token

#### Events

* map-loaded: (map) => {} - Used for getting map instance in parent component

$3

#### Data

* loaded: Boolean - whether map is loaded

* map: mapboxgl.Map - Mapbox GL instance

* control: mapboxgl.Control - Mapbox GL control instance

* bus: EventBus - internal event bus

#### Methods

* addControl(control) - add control to map
* removeControl() - remove added control
* getControl() - get added control

* onMapEvent(event: string, callback: ({ lngLat: { lng: number, lat: number } }) => void)
* onMapEvent(event: string, target: String|Object, callback: ({ lngLat: { lng: number, lat: number } }) => void) - target is entity id or entity

* onMapEvent(event: string, callback: ({ lngLat: { lng: number, lat: number } }) => void)
* onMapEvent(event: string, target: String|Object, callback: ({ lngLat: { lng: number, lat: number } }) => void) - target is entity id or entity

* offMapevent(event: string, callback?)

#### Hooks

* onInit() - fired when map is ready to use

* onDestroy() - fired when module has been destroyed