@skymapglobal/map-3d

Skymap 3D Map

Cesium wrapper for modularity.

Install

Add NPM

yarn add @skymapglobal/map-3d

Config vue.config.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/")
      })
    ]
  }
};

Copy Cesium Assets to static folder public/static/libs/cesium

# 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

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

Git Ignore Cesium Assets

Create .gitignore in public/static/libs

Edit .gitignore

cesium

Usage

<template>
  <div id="app">
    <Map>
      <BaseMapControl position="top-right" />
    </Map>
  </div>
</template>

<script>
import { Map, BaseMapControl } from "@skymapglobal/map-3d";

export default {
  name: "App",

  components: {
    Map,
    BaseMapControl,
  },
};
</script>

<style>
html,
body,
#app {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
</style>

Full Example

<template>
  <div id="app">
    <Map>
      <ZoomControl />
      <HomeControl />
      <BaseMapControl />

      <FullScreenControl position="bottom-right" />
      <MouseCoordinatesControl position="bottom-right" />
    </Map>
  </div>
</template>

<script>
import { Map, BaseMapControl, FullScreenControl, ZoomControl, HomeControl, MouseCoordinatesControl } from "@skymapglobal/map-3d";

export default {
  name: "App",

  components: {
    Map,
    BaseMapControl,
    FullScreenControl,
    HomeControl,
    ZoomControl,
    MouseCoordinatesControl
  }
};
</script>

<style>
html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
</style>

Create a simple Module example

<template>
  <ModuleContainer>
    <!-- Children modules -->
    <slot />
  </ModuleContainer>
</template>

<script>
import { ModuleMixin } from "@skymapglobal/map-3d";

export default {
  mixins: [ModuleMixin],

  methods: {
    // Init
    onInit() {
      // Use this.map to access Cesium.Viewer instance

      // Use this.onMapEvent(event, callback) or this.onMapEvent(event, entityIdOrEntity, callback) for listening on event
      // Current event support: 'zoomend', 'click', 'dblclick'

      // Use this.onceMapEvent(event, callback), this.onceMapEvent(event, entityIdOrEntity, callback) for listening once

      // Use this.offMapEvent(event, callback) for removing event listener
    },

    // Destroy
    onDestroy() {

    }
  }
};
</script>

Create Draggable Popup Module example

<template>
  <ModuleContainer>
    <DraggablePopup
      v-bind="$attrs"
      :top="top"
      :right="right"
      :title="title"
      :width="width"
      :height="height"
      :visible.sync="popup.visible"
    >
      My Module
    </DraggablePopup>

    <!-- Children modules -->
    <slot />
  </ModuleContainer>
</template>

<script>
import { ModuleMixin, ButtonGroupControl, DraggablePopup } from "@skymapglobal/map-3d";

export default {
  mixins: [ModuleMixin],

  components: {
    DraggablePopup
  },

  props: {
    top: {
      type: Number,
      default: 10
    },

    right: {
      type: Number,
      default: 50
    },

    height: {
      type: String,
      default: "10vh"
    },

    width: {
      type: String,
      default: "30vw"
    },

    title: {
      type: String,
      default: "My Module"
    },

    controlIcon: {
      type: String,
      default: "mdi mdi-information"
    }
  },

  data() {
    return {
      popup: {
        visible: false
      }
    };
  },

  methods: {
    // Init
    onInit() {
      // Use this.map to access Cesium.Viewer instance
      this.addControl(
        ButtonGroupControl.create([
          {
            title: this.title,
            icon: this.controlIcon,
            onClick: () => {
              this.popup.visible = !this.popup.visible;
            }
          }
        ])
      );
    },

    // Destroy
    onDestroy() {

    }
  }
};
</script>

<style scoped>
</style>

API

Map

Props

• accessToken: String - Cesium Ion Token

Events

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

ModuleMixin

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