Mini Projects - 3D Map

Note

Following https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/

1. Get a token for Cesium ION

2. Get an API Key for Google Maps API

3. Enable Google Maps Tiles API https://developers.google.com/maps/documentation/tile/cloud-setup?hl=ja

CesiumJS with CDN Setup did not work with XSplit VCam….

• XSplit VCam shows Chrome 68…

  • Can it be solved by Webpack setup? + some transpiling?

    • https://webpack.js.org/concepts/

    • https://zenn.dev/sprout2000/articles/9d026d3d9e0e8f

    • babel-loader https://webpack.js.org/loaders/babel-loader/#usage helps!!

  • It has some challenge debugging it

    • tools like https://www.sitelike.org/similar/jsconsole.com/ targets: "ie 11" can be useful?

    • TODO: Create a dedicated wiki page describing the issue?

      • Vorlon - https://www.vorlonjs.io/#getting-started

        • https://zenn.dev/pontagon333/articles/26c89cbc14e81f

        • https://stackoverflow.com/questions/69692842/error-message-error0308010cdigital-envelope-routinesunsupported

Pivoting to use Aerial View API

* https://developers.google.com/maps/documentation/aerial-view/web-api-best-practices?hl=ja

or deck.gl??

• https://deck.gl/examples/google-3d-tiles

Cesium JS with Webpack

• Following https://github.com/CesiumGS/cesium-webpack-example

  • https://cesium.com/learn/cesiumjs-learn/

Consideration

Use encrypted keys passed as URL query.

• with https://github.com/brix/crypto-js?utm_source=cdnjs&utm_medium=cdnjs_link&utm_campaign=cdnjs_library

  • https://qiita.com/haoyu_ma/items/3de99f59dd82e94231a9

Tips

• https://cesium.com/learn/cesiumjs-learn/cesiumjs-camera

References

• CesiumJS Quickstart - https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/