## GIS ( Global Information System )
## [CesiumJs](https://cesium.com/platform/cesiumjs/)
- https://github.com/CesiumGS/cesium
- [GLSL](https://zh.wikipedia.org/zh-tw/GLSL) <- openGL/webGL
- https://cesium.com/learn/cesiumjs-learn/cesiumjs-webpack/
- [Sandcastle](https://sandcastle.cesium.com/)
- [Docs](https://cesium.com/learn/cesiumjs/ref-doc/index.html)
- https://cesium.com/learn/cesiumjs-learn/cesiumjs-quickstart/
- `yarn set version stable`

## [Vite](https://vitejs.dev/)
- https://www.getclockwise.com/blog/what-is-developer-experience
- https://openhome.cc/zh-tw/javascript/script/module/
- https://yarnpkg.com/getting-started/install

## [Veu3](https://vuejs.org/guide/introduction.html)
- https://vuejs.org/guide/essentials/lifecycle.html#lifecycle-diagram
- https://vuejs.org/api/sfc-script-setup.html
- https://vuejs.org/api/reactivity-core.html
- https://developer.mozilla.org/zh-TW/docs/Web/API/Document_Object_Model
- https://medium.com/%E6%89%8B%E5%AF%AB%E7%AD%86%E8%A8%98/build-a-simple-virtual-dom-5cf12ccf379f
- https://meyerweb.com/eric/tools/css/reset/

## [Vite cesium](https://www.npmjs.com/package/vite-plugin-cesium)
- `yarn add cesium vite-plugin-cesium -D`

## Frameworks
- https://svelte.dev/
- https://qwik.builder.io/
- https://www.solidjs.com/

## Steps
- use [vite](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) create project `yarn create vite` or `npm create vite@latest`
- cd <project> and yarn
- add `vite-plugin-cesium` to `package.json`
- `yarn add cesium vite-plugin-cesium -D`
- add follow to `vite.config.ts`

import { defineConfig } from 'vite';
import cesium from 'vite-plugin-cesium'; <----this
export default defineConfig({
  plugins: [cesium()] <----- this
});

- create file `.yarnrc.yml`
- add `nodeLinker: "node-modules"` to content
- Add [reset.css](https://meyerweb.com/eric/tools/css/reset/) to project
- Update `App.vue` with context below

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import cesiumMap from './map';
const map = ref<Element>();

onMounted(() => {
  cesiumMap.useCesium(map.value!);
})
</script>

<template>
  <div ref="map" class="cesium-conatiner"> </div>
</template>

<style scoped>
@import "cesium/Build/Cesium/Widgets/widgets.css";
.cesium-conatiner {
  width: 100%;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
</style>

- create file 'map/index.ts'

import {Viewer} from "cesium";

// mapGlobe undefined at start
let mapGlobe: Viewer;

export const useCesium = (container: Element) => {
    mapGlobe = new Viewer(container, {});
}

export default {
    useCesium
}

### [Cesium Collection](https://github.com/wangha81/CesiumCollection)

//書妍
- create project
1. project name
2. framework: vue
3. variant: typescript
- cd project
1. create file `.yarnrc.yml`
- add `nodeLinker: "node-modules"` to content
2. yarn
3. yarn add cesium vite-plugin-cesium -D
4. add follow to `vite.config.ts`

        import { defineConfig } from 'vite';
        import vue from '@vitejs/plugin-vue';
        import cesium from 'vite-plugin-cesium'; <----this
        export default defineConfig({
          plugins: [vue(), cesium()] <----- this
        });

5. Add [reset.css](https://meyerweb.com/eric/tools/css/reset/) to project
- main.ts

        //import './style.css'
        import './css/reset.css'

6. Update `App.vue` with context below

        <script setup lang="ts">
        import { onMounted, ref } from 'vue';
        import cesiumMap from './map'; // 視為一個module來import 直接吃map這個folder裡面的index.ts
        const map = ref<Element>(); // 宣告一個名稱為map的ref為一個<element>

        onMounted(() => {
          // 使用map/index.ts中export default出來的方法
          // map.value! 告訴ts必定有值
          cesiumMap.useCesium(map.value!);
        })
        </script>

        <template>
          // ref="map"直接跟變數名稱綁
          <div ref="map" class="cesium-conatiner"> </div>
        </template>

        <style scoped> // scoped使內容css只作用在此檔template
        @import "cesium/Build/Cesium/Widgets/widgets.css";
        .cesium-conatiner {
          width: 100%;
          height: 100vh;
          margin: 0;
          padding: 0;
          overflow: hidden;
        }
        </style>

7. create file 'map/index.ts'

        // 可以從cesium docs中找到需要使用的packages/widgets
        import { Viewer } from "cesium";
        
        // mapGlobe undefined at start
        let mapGlobe: Viewer;

        export const useCesium = (container: Element) => {
          mapGlobe = new Viewer(container, {});
        }

        export default {
          useCesium
        }

8. yarn dev

//Chris
corepack enable
yarn set version stable
yarn 3.5.0

1. 修正`vite.config.ts`

    import { defineConfig } from 'vite';
    import vue from '@vitejs/plugin-vue';
    import cesium from 'vite-plugin-cesium';

    // https://vitejs.dev/config/
    export default defineConfig({
      plugins: [vue(), cesium()]
    });