merger

.eslintrc

@@ -0,0 +1,36 @@
+{
+  "root": true,
+  "parser": "@babel/eslint-parser",
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "env": {
+    "es6": true,
+    "node": true,
+    "browser": true
+  },
+  "plugins": ["prettier"],
+  "extends": ["eslint:recommended", "plugin:prettier/recommended"],
+  "globals": {
+    "__namespace": false,
+    "__cmdOut":false,
+    "echarts": false,
+    "mapv": false,
+    "DC": false,
+    "Cesium": false
+  },
+  "rules": {
+    "global-require": 0,
+    "indent": 0,
+    "no-new": 0,
+    "camelcase": 0,
+    "padded-blocks": 0,
+    "no-unused-vars": 0,
+    "no-trailing-spaces": 0,
+    "no-mixed-spaces-and-tabs": 0,
+    "space-before-function-paren": [0, "always"],
+    "no-multiple-empty-lines": 0,
+    "no-prototype-builtins": 0,
+    "no-loss-of-precision":0
+  }
+}

.github/workflows/build.yml

@@ -5,9 +5,9 @@ name: build
 
 on:
   push:
-    branches: [ master ]
+    branches: [ gulp ]
   pull_request:
-    branches: [ master ]
+    branches: [ gulp ]
 
 jobs:
   build:
@@ -25,4 +25,4 @@ jobs:
       with:
         node-version: ${{ matrix.node-version }}
     - name: Publish project
-      run: yarn && yarn run build
+      run: yarn && yarn run build:release

.github/workflows/dev.yml

@@ -0,0 +1,28 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: dev
+
+on:
+  push:
+    branches: [gulp]
+  pull_request:
+    branches: [gulp]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [16.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: Build project
+        run: yarn && yarn build
+

README.md

@@ -0,0 +1,222 @@
+# DC-SDK
+
+<p>
+<img src="https://img.shields.io/github/actions/workflow/status/dvgis/dc-sdk/build.yml"/>
+<img src="https://img.shields.io/badge/license-Apache%202-blue"/>
+<a href="https://www.npmjs.com/package/@dvgis/dc-sdk" target="_blank">
+ <img src="https://img.shields.io/npm/v/@dvgis/dc-sdk?color=orange&logo=npm" />
+</a>
+<a href="https://www.npmjs.com/package/@dvgis/dc-sdk" target="_blank">
+ <img src="https://img.shields.io/npm/dt/@dvgis/dc-sdk?logo=npm"/>
+</a>
+<a href="https://resource.dvgis.cn/dc-docs/v2.x" target="_blank">
+ <img src="https://img.shields.io/badge/docs-online-yellow.svg"/>
+</a>
+<a href="http://dc.dvgis.cn" target="_blank">
+ <img src="https://img.shields.io/badge/demo-online-red.svg"/>
+</a>
+</p>
+
+
+[**🇨🇳 中文**](./README_zh.md) | [**🇬🇧English**](./README.md)
+
+`DC-SDK` is based on the open source project `Cesium` for the second development of two three-dimensional `WebGis` application framework , the framework optimizes the use of `Cesium` and adds some additional features , designed for developers to quickly build `WebGis` application.
+
+```warning
+Tips：This SDK is JS+GIS framework package. Developers need to have some front-end technology and GIS related technology
+```
+
+
+## Run examples
+
+```shell
+  yarn run build
+  yarn run server
+```
+
+## Installation
+
+`NPM / YARN` **_`(Recommend)`_**
+
+Installing with NPM or YARN is recommended and it works seamlessly with webpack.
+
+```shell
+yarn add @dvgis/dc-sdk
+-------------------------
+npm install @dvgis/dc-sdk
+```
+
+```js
+import DC from '@dvgis/dc-sdk/dist/dc.base.min'
+import DcCore from '@dvgis/dc-sdk/dist/dc.core.min'
+import DcChart from '@dvgis/dc-sdk/dist/dc.chart.min'
+import DcMapv from '@dvgis/dc-sdk/dist/dc.mapv.min'
+import DcS3M from '@dvgis/dc-sdk/dist/dc.s3m.min'
+import '@dvgis/dc-sdk/dist/dc.core.min.css'
+```
+
+`NPM / YARN` **_`(On-demand)`_**
+
+```shell
+yarn add @dvgis/dc-base
+yarn add @dvgis/dc-core
+yarn add @dvgis/dc-chart
+yarn add @dvgis/dc-mapv
+yarn add @dvgis/dc-s3m
+-------------------------
+npm install @dvgis/dc-base
+npm install @dvgis/dc-core
+npm install @dvgis/dc-chart
+npm install @dvgis/dc-mapv
+npm install @dvgis/dc-s3m
+```
+
+```js
+import DC from '@dvgis/dc-base'
+import DcCore from '@dvgis/dc-core'
+import DcChart from '@dvgis/dc-chart'
+import DcMapv from '@dvgis/dc-mapv'
+import DcS3M from '@dvgis/dc-s3m'
+import '@dvgis/dc-core/dist/dc.core.min.css'
+```
+
+`CDN`
+
+[Resources](https://github.com/dvgis/dc-sdk/releases)
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/@dvgis/dc-sdk/dist/dc.base.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@dvgis/dc-sdk/dist/dc.core.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@dvgis/dc-sdk/dist/dc.chart.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@dvgis/dc-sdk/dist/dc.mapv.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/@dvgis/dc-sdk/dist/dc.s3m.min.js"></script>
+<link
+  href="https://cdn.jsdelivr.net/npm/@dvgis/dc-sdk/dist/dc.core.min.css"
+  rel="stylesheet"
+  type="text/css"
+/>
+```
+
+```
+Please put the resources in the project root directory libs/dc-sdk, if you put it in other directory, the framework will not run properly.
+```
+
+## Configuration
+
+> The configuration is mainly used in the `NPM / YARN` way
+
+Since the `DC` framework sets `CESIUM_BASE_URL` to `./libs/dc-sdk/resources/` , you need to copy `Cesium` related static resources files: `Assets` , `Workers` , `ThirdParty `to `libs/dc-sdk/resources` directory of the project to ensure that the 3D scene can be rendered properly. You can also use `DC.baseUrl` to set the static resource base related to `Cesium` .
+
+`Webpack`
+
+[Project Template](https://github.com/cavencj/dc-vue-app)
+
+```js
+// webpack.config.js
+const path = require('path')
+const CopywebpackPlugin = require('copy-webpack-plugin')
+const dvgisDist = './node_modules/@dvgis'
+
+module.exports = {
+  plugins: [
+    new CopyWebpackPlugin([
+      {
+        from: path.join(dvgisDist, 'dc-sdk/dist/resources'),
+        to: 'libs/dc-sdk/resources',
+      },
+    ]),
+  ],
+}
+```
+
+`Vue2.x`
+
+[Project Template](https://github.com/dvgis/dc-vue)
+
+```js
+// vue.config.js
+const path = require('path')
+const CopywebpackPlugin = require('copy-webpack-plugin')
+const dvgisDist = './node_modules/@dvgis'
+module.exports = {
+  chainWebpack: (config) => {
+    config.plugin('copy').use(CopywebpackPlugin, [
+      [
+        {
+          from: path.join(dvgisDist, 'dc-sdk/dist/resources'),
+          to: 'libs/dc-sdk/resources',
+        },
+      ],
+    ])
+  },
+}
+```
+
+`Vue3.x`
+
+[Project Template](https://github.com/dvgis/dc-vue-next)
+
+```js
+// vue.config.js
+const path = require('path')
+const CopywebpackPlugin = require('copy-webpack-plugin')
+const dvgisDist = './node_modules/@dvgis'
+module.exports = {
+  chainWebpack: (config) => {
+    config.plugin('copy').use(CopywebpackPlugin, [
+      {
+        patterns: [
+          {
+            from: path.join(dvgisDist, 'dc-sdk/dist/resources'),
+            to: path.join(__dirname, 'dist', 'libs/dc-sdk/resources'),
+          },
+        ],
+      },
+    ])
+  },
+}
+```
+
+
+## Start
+
+```js
+global.DC = DC
+DC.use(DcCore) // node
+DC.ready(() => {
+  let viewer = new DC.Viewer(divId) // divId is the Id attribute value of a div node. If it is not passed in, the 3D scene cannot be initialized
+})
+```
+
+## Demo
+
+|  ![picture](http://dc.dvgis.cn/examples/images/baselayer/baidu.png?v=3) | ![picture](http://dc.dvgis.cn/examples/images/baselayer/tdt.png?v=2) | ![picture](http://dc.dvgis.cn/examples/images/baselayer/arcgis.png?v=3) | ![picture](http://dc.dvgis.cn/examples/images/mini-scene/china.gif) |
+|  :-----------------------------------------------------------: | :-----------------------------------------------------------: | :------------------------------------------------------------------: | :--------------------------------------------------------------: |
+|  ![picture](http://dc.dvgis.cn/examples/images/mini-scene/dfmz.gif) | ![picture](http://dc.dvgis.cn/examples/images/mini-scene/factory.gif?v=1) | ![picture](http://dc.dvgis.cn/examples/images/layer/cluster_circle.gif) | ![picture](http://dc.dvgis.cn/examples/images/model/shp_custom_shader.gif) |
+|  ![picture](http://dc.dvgis.cn/examples/images/overlay/polyline_image_trail.gif) | ![picture](http://dc.dvgis.cn/examples/images/overlay/wall_trail.gif?v=1) | ![picture](http://dc.dvgis.cn/examples/images/overlay/water.gif?v=4)  |  ![picture](http://dc.dvgis.cn/examples/images/overlay/plot-overlay.png?v=4)   |
+
+[More>>](http://dc.dvgis.cn/#/examples)
+
+## Copyright
+
+```warning
+1. The framework is a basic platform, completely open source, which can be modified and reconstructed by any individual or institution without our authorization.
+2. We are not responsible for any problems arising from the modification of the framework by individuals and organizations.
+3. Some industrial plug-ins and tools will be added in the later stage, and the code will be open source appropriately.
+4. The package released by us may be used permanently and free of charge by any person or organization subject to:
+  1) complete package reference;
+  2) reserve this copyright information in the console output
+We reserve the right of final interpretation of this copyright information.
+```
+
+## Support
+
+> if dc-sdk can bring benefits to you, please support it ~
+
+<p>
+<a href="https://www.paypal.com/paypalme/cavencj" target="_blank">
+<img src="https://www.paypalobjects.com/images/shared/paypal-logo-129x32.svg" style="margin-top:10px" />
+</a>
+</p>
+
+## Thanks

examples/test.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="">
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>demo</title>
+    <script src='/libs/dc-sdk/dc.min.js'></script>
+    <link href='/libs/dc-sdk/dc.min.css' type='text/css' rel='stylesheet'>
+    <style>
+        *{
+            padding: 0;
+            margin: 0;
+        }
+        html,body,#map-container{
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+    </style>
+</head>
+<body>
+<div id="map-container">
+</div>
+</body>
+<script>
+    DC.ready().then(()=>{
+        new DC.Viewer('map-container')
+    })
+</script>

gulpfile.js

@@ -0,0 +1,346 @@
+/**
+ @author : Caven Chen
+ @date : 2023-05-06
+ **/
+
+'use strict'
+
+import fse from 'fs-extra'
+import path from 'path'
+import gulp from 'gulp'
+import esbuild from 'esbuild'
+import concat from 'gulp-concat'
+import { rollup } from 'rollup'
+import clean from 'gulp-clean'
+import commonjs from '@rollup/plugin-commonjs'
+import resolve from '@rollup/plugin-node-resolve'
+import scss from 'rollup-plugin-scss'
+import javascriptObfuscator from 'gulp-javascript-obfuscator'
+import { babel } from '@rollup/plugin-babel'
+import startServer from './server.js'
+import { uglify } from 'rollup-plugin-uglify'
+import inlineImage from 'esbuild-plugin-inline-image'
+import { glsl } from 'esbuild-plugin-glsl'
+
+const obfuscatorConfig = {
+  compact: true, //压缩代码
+  identifierNamesGenerator: 'hexadecimal', //标识符的混淆方式 hexadecimal(十六进制) mangled(短标识符)
+  renameGlobals: false, //是否启用全局变量和函数名称的混淆
+  rotateStringArray: true, //通过固定和随机（在代码混淆时生成）的位置移动数组。这使得将删除的字符串的顺序与其原始位置相匹配变得更加困难。如果原始源代码不小，建议使用此选项，因为辅助函数可以引起注意。
+  selfDefending: true, //混淆后的代码,不能使用代码美化,同时需要配置 compact:true;
+  stringArray: true, //删除字符串文字并将它们放在一个特殊的数组中
+  stringArrayEncoding: ['base64'],
+  stringArrayThreshold: 0.75,
+  transformObjectKeys: false,
+  unicodeEscapeSequence: false, //允许启用/禁用字符串转换为unicode转义序列。Unicode转义序列大大增加了代码大小，并且可以轻松地将字符串恢复为原始视图。建议仅对小型源代码启用此选项。
+}
+
+const buildConfig = {
+  entryPoints: ['src/DC.js'],
+  bundle: true,
+  color: true,
+  legalComments: `inline`,
+  logLimit: 0,
+  target: `es2020`,
+  minify: false,
+  sourcemap: false,
+  write: true,
+  logLevel: 'info',
+  external: [`http`, `https`, `url`, `zlib`],
+  plugins: [
+    inlineImage({
+      limit: -1,
+    }),
+    glsl(),
+  ],
+}
+
+const packageJson = fse.readJsonSync('./package.json')
+
+function getTime() {
+  let now = new Date()
+  let m = now.getMonth() + 1
+  m = m < 10 ? '0' + m : m
+  let d = now.getDate()
+  d = d < 10 ? '0' + d : d
+  return `${now.getFullYear()}-${m}-${d}`
+}
+
+async function buildNamespace(options) {
+  const bundle = await rollup({
+    input: 'libs/index.js',
+    plugins: [
+      commonjs(),
+      resolve({ preferBuiltins: true }),
+      babel({
+        babelHelpers: 'runtime',
+        presets: [
+          [
+            '@babel/preset-env',
+            {
+              modules: false,
+              targets: {
+                browsers: ['> 1%', 'last 2 versions', 'ie >= 10'],
+              },
+            },
+          ],
+        ],
+        plugins: ['@babel/plugin-transform-runtime'],
+      }),
+      uglify(),
+    ],
+  })
+  return bundle.write({
+    name: 'DC.__namespace',
+    file: options.node ? 'dist/namespace.cjs' : 'dist/namespace.js',
+    format: options.node ? 'cjs' : 'umd',
+    sourcemap: false,
+  })
+}
+
+async function buildCSS() {
+  const bundle = await rollup({
+    input: 'src/themes/index.js',
+    plugins: [
+      commonjs(),
+      resolve({ preferBuiltins: true }),
+      scss({
+        outputStyle: 'compressed',
+        fileName: 'dc.min.css',
+      }),
+    ],
+  })
+  return bundle.write({
+    file: 'dist/dc.min.css',
+  })
+}
+
+async function buildModules(options) {
+  const dcPath = path.join('src', 'DC.js')
+
+  const content = await fse.readFile(path.join('src', 'index.js'), 'utf8')
+
+  await fse.ensureFile(dcPath)
+
+  const exportVersion = `export const VERSION = '${packageJson.version}'`
+
+  const cmdOut_content = await fse.readFile(
+    path.join('src', 'copyright', 'cmdOut.js'),
+    'utf8'
+  )
+
+  const exportCmdOut = `
+        export function __cmdOut() {
+          ${cmdOut_content
+            .replace('{{__VERSION__}}', packageJson.version)
+            .replace('{{__TIME__}}', getTime())
+            .replace(
+              '{{__ENGINE_VERSION__}}',
+              packageJson.devDependencies['@cesium/engine'].replace('^', '')
+            )
+            .replace('{{__AUTHOR__}}', packageJson.author)
+            .replace('{{__HOME_PAGE__}}', packageJson.homepage)
+            .replace('{{__REPOSITORY__}}', packageJson.repository)}
+    }`
+
+  const exportNamespace = `
+        export const __namespace = {
+            Cesium: exports.Cesium
+        }
+     `
+
+  // Build IIFE
+  if (options.iife) {
+    await fse.outputFile(
+      dcPath,
+      `
+                ${content}
+                ${exportVersion}
+                ${exportCmdOut}
+            `,
+      {
+        encoding: 'utf8',
+      }
+    )
+    await esbuild.build({
+      ...buildConfig,
+      format: 'iife',
+      globalName: 'DC',
+      outfile: path.join('dist', 'modules.js'),
+    })
+  }
+
+  // Build Node、
+  if (options.node) {
+    await fse.outputFile(
+      dcPath,
+      `
+            ${content}
+            ${exportNamespace}
+            ${exportVersion}
+            ${exportCmdOut}
+            `,
+      {
+        encoding: 'utf8',
+      }
+    )
+    await esbuild.build({
+      ...buildConfig,
+      format: 'cjs',
+      platform: 'node',
+      define: {
+        TransformStream: 'null',
+      },
+      outfile: path.join('dist', 'modules.cjs'),
+    })
+  }
+
+  // remove DC.js
+  await fse.remove(dcPath)
+}
+
+async function combineJs(options) {
+  // combine for iife
+  if (options.iife) {
+    if (options.obfuscate) {
+      await gulp
+        .src('dist/modules.js')
+        .pipe(javascriptObfuscator(obfuscatorConfig))
+        .pipe(gulp.src('dist/namespace.js'))
+        .pipe(concat('dc.min.js'))
+        .pipe(gulp.dest('dist'))
+        .on('end', () => {
+          addCopyright(options)
+          deleteTempFile(options)
+        })
+    } else {
+      await gulp
+        .src(['dist/modules.js', 'dist/namespace.js'])
+        .pipe(concat('dc.min.js'))
+        .pipe(gulp.dest('dist'))
+        .on('end', () => {
+          addCopyright(options)
+          deleteTempFile(options)
+        })
+    }
+  }
+
+  // combine for node
+  if (options.node) {
+    if (options.obfuscate) {
+      await gulp
+        .src('dist/modules.cjs')
+        .pipe(javascriptObfuscator(obfuscatorConfig))
+        .pipe(gulp.dest('dist'))
+        .on('end', async () => {
+          await gulp
+            .src(['dist/namespace.cjs', 'dist/modules.cjs'])
+            .pipe(concat('index.cjs'))
+            .pipe(gulp.dest('dist'))
+            .on('end', () => {
+              addCopyright(options)
+              deleteTempFile(options)
+            })
+        })
+    } else {
+      await gulp
+        .src(['dist/namespace.cjs', 'dist/modules.cjs'])
+        .pipe(concat('index.cjs'))
+        .pipe(gulp.dest('dist'))
+        .on('end', () => {
+          addCopyright(options)
+          deleteTempFile(options)
+        })
+    }
+  }
+}
+
+async function copyAssets() {
+  await fse.emptyDir('dist/resources')
+  await gulp
+    .src('./node_modules/@cesium/engine/Build/Workers/**', { nodir: true })
+    .pipe(gulp.dest('dist/resources/Workers'))
+  await gulp
+    .src('./node_modules/@cesium/engine/Source/Assets/**', { nodir: true })
+    .pipe(gulp.dest('dist/resources/Assets'))
+  await gulp
+    .src('./node_modules/@cesium/engine/Source/ThirdParty/**', { nodir: true })
+    .pipe(gulp.dest('dist/resources/ThirdParty'))
+}
+
+async function addCopyright(options) {
+  let header = await fse.readFile(
+    path.join('src', 'copyright', 'header.js'),
+    'utf8'
+  )
+  header = header
+    .replace('{{__VERSION__}}', packageJson.version)
+    .replace('{{__AUTHOR__}}', packageJson.author)
+    .replace('{{__REPOSITORY__}}', packageJson.repository)
+
+  if (options.iife) {
+    let filePath = path.join('dist', 'dc.min.js')
+    const content = await fse.readFile(filePath, 'utf8')
+    await fse.outputFile(filePath, `${header}${content}`, { encoding: 'utf8' })
+  }
+
+  if (options.node) {
+    let filePath = path.join('dist', 'index.cjs')
+    const content = await fse.readFile(filePath, 'utf8')
+    await fse.outputFile(filePath, `${header}${content}`, { encoding: 'utf8' })
+  }
+}
+
+async function deleteTempFile(options) {
+  if (options.iife) {
+    await gulp
+      .src(['dist/namespace.js', 'dist/modules.js'], { read: false })
+      .pipe(clean())
+  }
+
+  if (options.node) {
+    await gulp
+      .src(['dist/namespace.cjs', 'dist/modules.cjs'], { read: false })
+      .pipe(clean())
+  }
+}
+
+export const build = gulp.series(
+  () => buildNamespace({ node: true }),
+  () => buildModules({ node: true }),
+  () => combineJs({ node: true }),
+  () => buildNamespace({ iife: true }),
+  () => buildModules({ iife: true }),
+  () => combineJs({ iife: true }),
+  buildCSS,
+  copyAssets
+)
+
+export const buildNode = gulp.series(
+  () => buildNamespace({ node: true }),
+  () => buildModules({ node: true }),
+  () => combineJs({ node: true }),
+  buildCSS,
+  copyAssets
+)
+
+export const buildIIFE = gulp.series(
+  () => buildNamespace({ iife: true }),
+  () => buildModules({ iife: true }),
+  () => combineJs({ iife: true }),
+  buildCSS,
+  copyAssets
+)
+
+export const buildRelease = gulp.series(
+  () => buildNamespace({ node: true }),
+  () => buildModules({ node: true }),
+  () => combineJs({ node: true, obfuscate: true }),
+  () => buildNamespace({ iife: true }),
+  () => buildModules({ iife: true }),
+  () => combineJs({ iife: true, obfuscate: true }),
+  buildCSS,
+  copyAssets
+)
+
+export const server = gulp.series(startServer)

libs/index.js

@@ -0,0 +1,7 @@
+/**
+ @Author: Caven Chen
+ **/
+
+import * as Cesium from '@cesium/engine'
+
+export { Cesium }

package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@dvgis/dc-sdk",
+  "version": "3.0.3",
+  "license": "MIT",
+  "description": "The SDK is based on Cesium for secondary development of 2, 3D all-in-one WebGis application framework, the framework optimizes the use of Cesium and add some additional features, designed for developers to quickly build WebGis applications.",
+  "repository": "https://github.com/dvgis/dc-sdk.git",
+  "homepage": "https://www.dvgis.cn",
+  "keywords": [
+    "3D",
+    "webGL",
+    "map",
+    "globe",
+    "cesium",
+    "heatmap",
+    "turf",
+    "mapv",
+    "s3m"
+  ],
+  "author": "Caven Chen <cavencj@gmail.com>",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "scripts": {
+    "build": "rimraf dist && gulp build",
+    "build:node": "rimraf dist && gulp buildNode",
+    "build:iife": "rimraf dist && gulp buildIIFE",
+    "build:release": "rimraf dist && gulp buildRelease",
+    "prepublishOnly": "yarn run build:release",
+    "server": "gulp server"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.21.4",
+    "@babel/eslint-parser": "^7.21.8",
+    "@babel/plugin-transform-runtime": "^7.21.4",
+    "@babel/preset-env": "^7.21.5",
+    "@cesium/engine": "^2.3.0",
+    "@rollup/plugin-babel": "^6.0.3",
+    "@rollup/plugin-commonjs": "^24.1.0",
+    "@rollup/plugin-node-resolve": "^15.0.2",
+    "@rollup/plugin-terser": "^0.4.1",
+    "@turf/turf": "^6.5.0",
+    "chalk": "^5.2.0",
+    "esbuild": "^0.17.18",
+    "esbuild-plugin-glsl": "^1.2.1",
+    "esbuild-plugin-inline-image": "^0.0.9",
+    "eslint": "^8.40.0",
+    "eslint-config-prettier": "^8.8.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-promise": "^6.1.1",
+    "express": "^4.18.2",
+    "fs-extra": "^11.1.1",
+    "gulp": "^4.0.2",
+    "gulp-clean": "^0.4.0",
+    "gulp-concat": "^2.6.1",
+    "gulp-javascript-obfuscator": "^1.1.6",
+    "javascript-obfuscator": "^4.0.2",
+    "portfinder": "^1.0.32",
+    "postcss": "^8.4.23",
+    "prettier": "^2.8.8",
+    "rimraf": "^5.0.0",
+    "rollup": "^3.21.0",
+    "rollup-plugin-copy": "^3.4.0",
+    "rollup-plugin-obfuscator": "^1.0.3",
+    "rollup-plugin-postcss": "^4.0.2",
+    "rollup-plugin-require-context": "^1.0.1",
+    "rollup-plugin-scss": "^4.0.0",
+    "rollup-plugin-uglify": "^6.0.4",
+    "sass": "^1.62.1",
+    "shelljs": "^0.8.5",
+    "vinyl-sourcemaps-apply": "^0.2.1"
+  },
+  "files": [
+    "dist"
+  ]
+}

server.js

@@ -0,0 +1,30 @@
+/**
+ @author : Caven Chen
+ @date : 2023-05-08
+ */
+
+import express from 'express'
+import portfinder from 'portfinder'
+import fse from 'fs-extra'
+import shell from 'shelljs'
+import chalk from 'chalk'
+
+export default function start() {
+  let dist = 'dist'
+  const server = express()
+  portfinder.setBasePort(8081)
+  fse.exists(dist, (exists) => {
+    if (exists) {
+      portfinder.getPort((err, port) => {
+        server.listen(port)
+        shell.echo(
+          chalk.yellow(`the url is : http://localhost:${port}/test.html`)
+        )
+        server.use('/libs/dc-sdk/', express.static(dist))
+        server.use(express.static('examples'))
+      })
+    } else {
+      shell.echo(chalk.red(`please run build first`))
+    }
+  })
+}

src/copyright/cmdOut.js

@@ -0,0 +1,30 @@
+/**
+ @author : Caven Chen
+ @date : 2023-05-07
+ */
+
+// eslint-disable-next-line no-console
+console.clear()
+
+// eslint-disable-next-line no-console
+console.log(
+  `%c \n DC-SDK \n  %c \n 用数字描绘世界之美  %c \n
+    版本: {{__VERSION__}} - {{__TIME__}}
+    Cesium Engine 版本：{{__ENGINE_VERSION__}}
+    开发作者: {{__AUTHOR__}}
+    网站主页: {{__HOME_PAGE__}}
+    github: {{__REPOSITORY__}}
+    授权信息：授权-永久使用此软件当前版本。 \n
+
+    版权声明:
+    1.框架作为一个基础平台，代码开源，任何个人和机构可以修改、重构，无需经过我方授权。
+    2.任何个人和机构修改框架出现的问题，我方无需负责。
+    3.后期会添加一些行业性的插件和工具，代码会适量开源。
+    4.对于我方发布的框架包，任何个人和机构在遵守下列条件的前提下可以永久免费使用:
+     1)程序包完整引用
+     2)保留此版权信息在控制台输出
+    我方保留对此版权信息的最终解释权。`,
+  'font-size:20px;padding-left:70px;color:#EEB422',
+  'font-size:14px;padding-left:50px;color:#EEB422;font-style:oblique',
+  'font-size:12px;color:#0865ba'
+)

src/copyright/header.js

@@ -0,0 +1,25 @@
+/**
+ * @license
+ * @name dc-sdk
+ * @github {{__REPOSITORY__}}
+ * @author {{__AUTHOR__}}
+ * @organization dvgis
+ * @version {{__VERSION__}}
+ *
+ * Copyright (c) 2019-present Caven Chen
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * Portions licensed separately.
+ * See https://github.com/dvgis/dc-sdk/blob/master/LICENSE.MD for full licensing details.
+ */

src/global-api/lib-utils.js

@@ -0,0 +1,24 @@
+/**
+ @author : Caven Chen
+ @date : 2023-05-06
+ */
+
+const cache = {}
+
+/**
+ * register lib
+ * @param name
+ * @param lib
+ */
+export function registerLib(name, lib) {
+  cache[name] = lib
+}
+
+/**
+ * get lib
+ * @param name
+ * @return {*}
+ */
+export function getLib(name) {
+  return cache[name]
+}

src/index.js

@@ -0,0 +1,79 @@
+/**
+ @Author: Caven Chen
+ **/
+import { getLib, registerLib } from './global-api/lib-utils.js'
+
+export { registerLib, getLib } from './global-api/lib-utils.js'
+
+let _baseUrl = './libs/dc-sdk/resources/'
+let _accessToken = ''
+
+export const config = {
+  set baseUrl(baseUrl) {
+    _baseUrl = baseUrl
+  },
+  get baseUrl() {
+    return _baseUrl
+  },
+  set accessToken(accessToken) {
+    _accessToken = accessToken
+  },
+  get accessToken() {
+    return _accessToken
+  },
+}
+
+export function ready(options = {}) {
+  if (options['baseUrl']) {
+    this.config.baseUrl = options['baseUrl']
+  }
+  if (options['accessToken']) {
+    this.config.accessToken = options['accessToken']
+  }
+
+  if (options['Cesium']) {
+    registerLib('Cesium', options['Cesium'])
+  } else {
+    registerLib('Cesium', this['__namespace']['Cesium'])
+  }
+
+  if (options['echarts']) {
+    registerLib('echarts', options['echarts'])
+  }
+
+  // if (options['turf']) {
+  //   registerLib('turf', options['turf'])
+  // }
+
+  this['__cmdOut'] && this['__cmdOut']()
+
+  return new Promise((resolve, reject) => {
+    const Cesium = getLib('Cesium')
+    if (!Cesium) {
+      throw new Error('missing Cesium Lib')
+    }
+    this.config.baseUrl && Cesium.buildModuleUrl.setBaseUrl(this.config.baseUrl)
+    // register common modules
+    const modules = require('./modules')
+    Object.keys(modules).forEach((key) => {
+      this[key] = modules[key]
+    })
+
+    // register chart module
+    if (getLib('echarts')) {
+      const modules = require('./modules/chart')
+      Object.keys(modules).forEach((key) => {
+        this[key] = modules[key]
+      })
+    }
+
+    // register turf module
+    if (getLib('turf')) {
+      // todo
+    }
+
+    resolve()
+  }).catch((e) => {
+    throw new Error(e.message)
+  })
+}

src/modules/animation/Animation.js

@@ -0,0 +1,45 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-12-20 16:32:22
+ */
+
+class Animation {
+  constructor(viewer) {
+    this._viewer = viewer
+    this._options = {}
+  }
+
+  _bindEvent() {}
+
+  _unbindEvent() {}
+
+  /**
+   * Start globe rotate
+   * @returns {Animation}
+   */
+  start() {
+    this._viewer.clock.shouldAnimate = true
+    this._unbindEvent()
+    if (this._options.duration) {
+      let timer = setTimeout(() => {
+        this._unbindEvent()
+        this._options.callback &&
+          this._options.callback.call(this._options.context || this)
+        clearTimeout(timer)
+      }, Number(this._options.duration) * 1e3)
+    }
+    this._bindEvent()
+    return this
+  }
+
+  /**
+   * Stop globe rotate
+   * @returns {Animation}
+   */
+  stop() {
+    this._unbindEvent()
+    return this
+  }
+}
+
+export default Animation

src/modules/animation/AnimationType.js

@@ -0,0 +1,8 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-08-01 00:12:06
+ */
+
+let AnimationType = {}
+
+export default AnimationType

src/modules/animation/index.js

@@ -0,0 +1,17 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-03-05 22:15:27
+ */
+
+export { default as Animation } from './Animation'
+export { default as AnimationType } from './AnimationType'
+
+/**
+ * types
+ */
+export { default as AroundView } from './type/AroundView'
+export { default as AroundPoint } from './type/AroundPoint'
+export { default as CircleScan } from './type/CircleScan'
+export { default as Flying } from './type/Flying'
+export { default as GlobeRotate } from './type/GlobeRotate'
+export { default as RadarScan } from './type/RadarScan'

src/modules/animation/type/AroundPoint.js

@@ -0,0 +1,73 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-03-02 22:38:10
+ */
+import { Cesium } from '../../../namespace'
+import AnimationType from '../AnimationType'
+import Animation from '../Animation'
+import { Transform } from '../../transform'
+import Parse from '../../parse/Parse.js'
+
+class AroundPoint extends Animation {
+  constructor(viewer, position, options = {}) {
+    super(viewer)
+    this._position = Parse.parsePosition(position)
+    this._options = options
+    this._heading = viewer.camera.heading
+    this._aroundAmount = 0.2
+  }
+
+  get type() {
+    return AnimationType.AROUND_POINT
+  }
+
+  set position(position) {
+    this._position = Parse.parsePosition(position)
+  }
+
+  set aroundAmount(aroundAmount) {
+    this._aroundAmount = aroundAmount
+  }
+
+  /**
+   *
+   * @private
+   */
+  _bindEvent() {
+    this._viewer.clock.onTick.addEventListener(this._onAround, this)
+  }
+
+  /**
+   *
+   * @private
+   */
+  _unbindEvent() {
+    this._viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
+    this._viewer.clock.onTick.removeEventListener(this._onAround, this)
+  }
+
+  /**
+   *
+   * @param scene
+   * @param time
+   * @private
+   */
+  _onAround(scene, time) {
+    this._heading += Cesium.Math.toRadians(this._aroundAmount)
+    if (this._heading >= Math.PI * 2 || this._heading <= -Math.PI * 2) {
+      this._heading = 0
+    }
+    this._viewer.camera.lookAt(
+      Transform.transformWGS84ToCartesian(this._position),
+      new Cesium.HeadingPitchRange(
+        this._heading,
+        Cesium.Math.toRadians(this._options.pitch || 0),
+        this._options.range || 1000
+      )
+    )
+  }
+}
+
+AnimationType.AROUND_POINT = 'around_point'
+
+export default AroundPoint

src/modules/animation/type/AroundView.js

@@ -0,0 +1,71 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-03-02 23:14:20
+ */
+
+import { Cesium } from '../../../namespace'
+import AnimationType from '../AnimationType'
+import Animation from '../Animation'
+
+class AroundView extends Animation {
+  constructor(viewer, options = {}) {
+    super(viewer)
+    this._options = options
+    this._heading = viewer.camera.heading
+    this._aroundAmount = 0.2
+  }
+
+  get type() {
+    return AnimationType.AROUND_VIEW
+  }
+
+  set aroundAmount(aroundAmount) {
+    this._aroundAmount = aroundAmount
+    return this
+  }
+
+  /**
+   *
+   * @private
+   */
+  _bindEvent() {
+    this._viewer.clock.onTick.addEventListener(this._onAround, this)
+  }
+
+  /**
+   *
+   * @private
+   */
+  _unbindEvent() {
+    this._viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
+    this._viewer.clock.onTick.removeEventListener(this._onAround, this)
+  }
+
+  /**
+   *
+   * @param scene
+   * @param time
+   * @private
+   */
+  _onAround(scene, time) {
+    this._heading += Cesium.Math.toRadians(this._aroundAmount)
+    if (this._heading >= Math.PI * 2 || this._heading <= -Math.PI * 2) {
+      this._heading = 0
+    }
+    this._viewer.camera.setView({
+      orientation: {
+        heading: this._heading,
+        pitch: this._options.pitch
+          ? Cesium.Math.toRadians(this._options.pitch)
+          : this._viewer.camera.pitch,
+        roll: this._options.roll
+          ? Cesium.Math.toRadians(this._options.roll)
+          : this._viewer.camera.roll,
+      },
+    })
+  }
+}
+
+AnimationType.AROUND_VIEW = 'around_view'
+
+export default AroundView

src/modules/animation/type/CircleScan.js

@@ -0,0 +1,87 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-12-01 20:26:02
+ */
+
+import { Cesium } from '../../../namespace'
+import AnimationType from '../AnimationType'
+import Animation from '../Animation'
+import { Util } from '../../utils'
+import { Transform } from '../../transform'
+import Parse from '../../parse/Parse.js'
+
+const CircleScanShader = require('@dc-modules/material/shader/circle/CircleScanShader.glsl')
+
+class CircleScan extends Animation {
+  constructor(viewer, position, radius, options = {}) {
+    super(viewer)
+    this._delegate = undefined
+    this._position = Parse.parsePosition(position)
+    this._radius = radius || 100
+    this._color = options.color || Cesium.Color.RED
+    this._speed = options.speed || 2
+  }
+
+  get type() {
+    return AnimationType.CIRCLE_SCAN
+  }
+
+  /**
+   *
+   * @private
+   */
+  _mountContent() {
+    let center = Transform.transformWGS84ToCartesian(this._position)
+    let up = Cesium.Ellipsoid.WGS84.geodeticSurfaceNormal(
+      center,
+      new Cesium.Cartesian3()
+    )
+    let self = this
+    this._delegate = new Cesium.PostProcessStage({
+      name: Util.uuid(),
+      fragmentShader: CircleScanShader,
+      uniforms: {
+        centerWC: function () {
+          return center
+        },
+        normalWC: function () {
+          return up
+        },
+        radius: function () {
+          return self._radius
+        },
+        speed: function () {
+          return self._speed
+        },
+        color: function () {
+          return self._color
+        },
+      },
+    })
+  }
+
+  /**
+   *
+   * @returns {CircleScan}
+   */
+  start() {
+    !this._delegate && this._mountContent()
+    this._delegate && this._viewer.scene.postProcessStages.add(this._delegate)
+    return this
+  }
+
+  /**
+   *
+   * @returns {CircleScan}
+   */
+  stop() {
+    this._delegate &&
+      this._viewer.scene.postProcessStages.remove(this._delegate)
+    this._delegate = undefined
+    return this
+  }
+}
+
+AnimationType.CIRCLE_SCAN = 'circle_scan'
+
+export default CircleScan

src/modules/animation/type/Flying.js

@@ -0,0 +1,122 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-01-09 20:21:33
+ */
+
+import { Cesium } from '../../../namespace'
+import AnimationType from '../AnimationType'
+import Animation from '../Animation'
+import { Transform } from '../../transform'
+import Parse from '../../parse/Parse.js'
+
+class Flying extends Animation {
+  constructor(viewer, options = {}) {
+    super(viewer)
+    this._options = options
+    this._positions = []
+    this._durations = [3]
+    this._currentIndex = 0
+    this._timer = undefined
+  }
+
+  get type() {
+    return AnimationType.FLYING
+  }
+
+  set positions(positions) {
+    this._positions = Parse.parsePositions(positions)
+    return this
+  }
+
+  get positions() {
+    return this._positions
+  }
+
+  set durations(durations) {
+    this._durations = durations
+    return this
+  }
+
+  get durations() {
+    return this._durations
+  }
+
+  /**
+   *
+   * @private
+   */
+  _cameraFly() {
+    let self = this
+    let camera = this._viewer.camera
+    let position = this._positions[this._currentIndex]
+    let callback = () => {
+      let nextPosition = self._positions[self._currentIndex + 1]
+      if (nextPosition) {
+        self._currentIndex++
+        if (self._currentIndex <= self._positions.length - 1) {
+          self._timer = setTimeout(() => {
+            self._cameraFly()
+          }, (self._options.dwellTime || 1) * 1e3)
+        }
+      } else if (!nextPosition && self._options.loop) {
+        self._currentIndex = 0
+        self._timer = setTimeout(() => {
+          self._cameraFly()
+        }, (self._options.dwellTime || 1) * 1e3)
+      }
+      self._options.callback && self._options.callback(self._currentIndex)
+    }
+    if (position) {
+      camera.flyTo({
+        destination: Transform.transformWGS84ToCartesian(position),
+        orientation: {
+          heading: Cesium.Math.toRadians(position.heading),
+          pitch: Cesium.Math.toRadians(position.pitch),
+          roll: Cesium.Math.toRadians(position.roll),
+        },
+        complete: callback,
+        duration:
+          this._durations.length === 1
+            ? this._durations[0]
+            : this._durations[this._currentIndex],
+      })
+    }
+  }
+
+  /**
+   *
+   * @returns {Flying}
+   */
+  start() {
+    if (this._positions && this._positions.length) {
+      this._currentIndex = 0
+      this._cameraFly()
+    }
+    return this
+  }
+
+  /**
+   *
+   * @returns {Flying}
+   */
+  pause() {
+    this._viewer.camera.cancelFlight()
+    this._timer && clearTimeout(this._timer)
+    return this
+  }
+
+  /**
+   *
+   * @returns {Flying}
+   */
+  restore() {
+    if (this._positions && this._positions.length) {
+      this._cameraFly()
+    }
+    return this
+  }
+}
+
+AnimationType.FLYING = 'flying'
+
+export default Flying

src/modules/animation/type/GlobeRotate.js

@@ -0,0 +1,62 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-30 20:47:25
+ */
+
+import { Cesium } from '../../../namespace'
+import AnimationType from '../AnimationType'
+import Animation from '../Animation'
+
+class GlobeRotate extends Animation {
+  constructor(viewer, options = {}) {
+    super(viewer)
+    this._options = options
+  }
+
+  get type() {
+    return AnimationType.GLOBE_ROTATE
+  }
+
+  /**
+   * @param scene
+   * @param time
+   * @returns {boolean}
+   * @private
+   */
+  _icrf(scene, time) {
+    if (scene.mode !== Cesium.SceneMode.SCENE3D) {
+      return true
+    }
+    let icrfToFixed = Cesium.Transforms.computeIcrfToFixedMatrix(time)
+    if (icrfToFixed) {
+      let camera = this._viewer.camera
+      let offset = Cesium.Cartesian3.clone(camera.position)
+      let transform = Cesium.Matrix4.fromRotationTranslation(icrfToFixed)
+      camera.lookAtTransform(transform, offset)
+    }
+  }
+
+  /**
+   * Bind the Event
+   * @private
+   */
+  _bindEvent() {
+    this._viewer.clock.multiplier = this._options.speed || 12 * 1000
+    this._viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
+    this._viewer.scene.postUpdate.addEventListener(this._icrf, this)
+  }
+
+  /**
+   * Unbind the Event
+   * @private
+   */
+  _unbindEvent() {
+    this._viewer.clock.multiplier = 1
+    this._viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
+    this._viewer.scene.postUpdate.removeEventListener(this._icrf, this)
+  }
+}
+
+AnimationType.GLOBE_ROTATE = 'globe_rotate'
+
+export default GlobeRotate

src/modules/animation/type/RadarScan.js

@@ -0,0 +1,100 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-12-01 20:40:02
+ */
+
+import { Cesium } from '../../../namespace'
+import AnimationType from '../AnimationType'
+import Animation from '../Animation'
+import { Util } from '../../utils'
+import { Transform } from '../../transform'
+import Parse from '../../parse/Parse.js'
+import RadarScanShader from '../../material/shader/radar/RadarScanShader.glsl'
+
+class RadarScan extends Animation {
+  constructor(viewer, position, radius, options = {}) {
+    super(viewer)
+    this._position = Parse.parsePosition(position)
+    this._radius = radius || 100
+    this._color = options.color || Cesium.Color.BLUE
+    this._speed = options.speed || 3
+    this._delegate = undefined
+  }
+
+  get type() {
+    return AnimationType.RADAR_SCAN
+  }
+
+  /**
+   *
+   * @private
+   */
+  _mountContent() {
+    let center = Transform.transformWGS84ToCartesian(this._position)
+    let up = Cesium.Ellipsoid.WGS84.geodeticSurfaceNormal(
+      center,
+      new Cesium.Cartesian3()
+    )
+    let time = new Date().getTime()
+    let self = this
+    this._delegate = new Cesium.PostProcessStage({
+      name: Util.uuid(),
+      fragmentShader: RadarScanShader,
+      uniforms: {
+        centerWC: function () {
+          return center
+        },
+        planeNormalWC: function () {
+          return up
+        },
+        lineNormalWC: function () {
+          let rotateQ = new Cesium.Quaternion()
+          let rotateM = new Cesium.Matrix3()
+          let east = Cesium.Cartesian3.cross(
+            Cesium.Cartesian3.UNIT_Z,
+            up,
+            new Cesium.Cartesian3()
+          )
+          let now = new Date().getTime()
+          let angle = Cesium.Math.PI * 2 * ((now - time) / 1e4) * self._speed
+          Cesium.Quaternion.fromAxisAngle(up, angle, rotateQ)
+          Cesium.Matrix3.fromQuaternion(rotateQ, rotateM)
+          Cesium.Matrix3.multiplyByVector(rotateM, east, east)
+          Cesium.Cartesian3.normalize(east, east)
+          return east
+        },
+        radius: function () {
+          return self._radius
+        },
+        color: function () {
+          return self._color
+        },
+      },
+    })
+  }
+
+  /**
+   *
+   * @returns {RadarScan}
+   */
+  start() {
+    !this._delegate && this._mountContent()
+    this._delegate && this._viewer.scene.postProcessStages.add(this._delegate)
+    return this
+  }
+
+  /**
+   *
+   * @returns {RadarScan}
+   */
+  stop() {
+    this._delegate &&
+      this._viewer.scene.postProcessStages.remove(this._delegate)
+    this._delegate = undefined
+    return this
+  }
+}
+
+AnimationType.RADAR_SCAN = 'radar_scan'
+
+export default RadarScan

src/modules/chart/ChartLayer.js

@@ -0,0 +1,76 @@
+/**
+ @author : Caven Chen
+ @date : 2023-05-23
+ */
+
+import { echarts } from '../../namespace'
+import { Layer } from '../layer'
+const { init } = echarts
+
+class ChartLayer extends Layer {
+  constructor(id, viewer) {
+    super(id)
+    this._viewer.canvas.setAttribute('tabIndex', '0')
+    this._chartEl = this._createChartElement()
+    this._chart = init(this._chartEl)
+    this._show = true
+    Object(this._chart.getZr()).viewer = viewer
+  }
+
+  get id() {
+    return this._id
+  }
+
+  set show(show) {
+    this._show = show
+    this._chartEl.style.visibility = show ? 'visible' : 'hidden'
+  }
+
+  get show() {
+    return this._show
+  }
+
+  /**
+   *
+   * @returns {HTMLDivElement}
+   * @private
+   */
+  _createChartElement() {
+    let canvas = this._viewer.scene.canvas
+    let el = document.createElement('div')
+    el.setAttribute('id', this._id)
+    el.style.cssText = `position:absolute; top:0; left:0; width: ${canvas.clientWidth}px; height: ${canvas.clientHeight}px;pointer-events:none;`
+    this._viewer.container.appendChild(el)
+    return el
+  }
+
+  /**
+   *
+   * @param option
+   * @returns {ChartLayer}
+   */
+  setOption(option = {}) {
+    this._chart.setOption({ ...option, GLMap: {}, animation: false })
+    return this
+  }
+
+  /**
+   *
+   * @returns {ChartLayer}
+   */
+  clear() {
+    this._chart.clear()
+    return this
+  }
+
+  /**
+   *
+   * @returns {ChartLayer}
+   */
+  resize() {
+    this._chart.resize()
+    return this
+  }
+}
+
+export default ChartLayer

src/modules/chart/GLMapCoordSys.js

@@ -0,0 +1,84 @@
+/**
+ @author : Caven Chen
+ @date : 2023-05-23
+ */
+
+import { echarts, Cesium } from '../../namespace'
+const { Cartesian3, Ellipsoid, Math: CesiumMath } = Cesium
+const { graphic, matrix } = echarts
+
+class GLMapCoordSys {
+  constructor(api) {
+    this._api = api
+    this._viewer = Object(api.getZr()).viewer
+    this._mapOffset = [0, 0]
+    this.dimensions = ['lng', 'lat']
+  }
+
+  getViewer() {
+    return this._viewer
+  }
+
+  setMapOffset(mapOffset) {
+    this._mapOffset = mapOffset
+    return this
+  }
+
+  dataToPoint(data) {
+    let result = []
+    let cartesian3 = Cartesian3.fromDegrees(data[0], data[1])
+    if (!cartesian3) {
+      return result
+    }
+    let up = Ellipsoid.WGS84.geodeticSurfaceNormal(cartesian3, new Cartesian3())
+    let cd = this._viewer.camera.direction
+    if (Cartesian3.dot(up, cd) >= 0) {
+      return result
+    }
+    let coords = this._viewer.scene.cartesianToCanvasCoordinates(cartesian3)
+    if (!coords) {
+      return result
+    }
+    return [coords.x - this._mapOffset[0], coords.y - this._mapOffset[1]]
+  }
+
+  pointToData(point) {
+    let ellipsoid = this._viewer.scene.globe.ellipsoid
+    let cartesian3 = new Cartesian3(
+      point[0] + this._mapOffset[0],
+      point[1] + this._mapOffset[1],
+      0
+    )
+    let cartographic = ellipsoid.cartesianToCartographic(cartesian3)
+    return [
+      CesiumMath.toDegrees(cartographic.longitude),
+      CesiumMath.toDegrees(cartographic.latitude),
+    ]
+  }
+
+  getViewRect() {
+    let api = this._api
+    return new graphic.BoundingRect(0, 0, api.getWidth(), api.getHeight())
+  }
+
+  getRoamTransform() {
+    return matrix.create()
+  }
+
+  static create(ecModel, api) {
+    let coordinateSys = undefined
+    ecModel.eachComponent('GLMap', function (model) {
+      coordinateSys = new GLMapCoordSys(api)
+      coordinateSys.setMapOffset(model['__mapOffset'] || [0, 0])
+      model.coordinateSystem = coordinateSys
+    })
+    ecModel.eachSeries(function (model) {
+      'GLMap' === model.get('coordinateSystem') &&
+        (model.coordinateSystem = coordinateSys)
+    })
+  }
+}
+
+GLMapCoordSys.dimensions = ['lng', 'lat']
+
+export default GLMapCoordSys

src/modules/chart/GLMapModel.js

@@ -0,0 +1,18 @@
+/**
+ @author : Caven Chen
+ @date : 2023-05-23
+ */
+
+import { echarts } from '../../namespace'
+
+const { extendComponentModel } = echarts
+
+extendComponentModel({
+  type: 'GLMap',
+  getViewer() {
+    return Object(this.getZr()).viewer
+  },
+  defaultOption: {
+    roam: false,
+  },
+})

src/modules/chart/GLMapView.js

@@ -0,0 +1,26 @@
+/**
+  @Author: Caven Chen
+**/
+
+import { echarts } from '../../namespace'
+
+const { extendComponentView } = echarts
+
+extendComponentView({
+  type: 'GLMap',
+  init: function (ecModel, api) {
+    this.api = api
+    let viewer = api.getZr().viewer
+    viewer.scene.postRender.addEventListener(this.moveHandler, this)
+  },
+  moveHandler: function (t, e) {
+    this.api.dispatchAction({
+      type: 'GLMapRoam',
+    })
+  },
+  render: function (t, e, i) {},
+  dispose: function (t) {
+    let viewer = this.api.getZr().viewer
+    viewer.scene.postRender.removeEventListener(this.moveHandler, this)
+  },
+})

src/modules/chart/index.js

@@ -0,0 +1,24 @@
+/**
+  @Author: Caven Chen
+**/
+
+import { echarts } from '../../namespace'
+
+import './GLMapModel'
+import './GLMapView'
+import GLMapCoordSys from './GLMapCoordSys'
+import ChartLayer from './ChartLayer.js'
+
+const { registerAction, registerCoordinateSystem } = echarts
+
+registerCoordinateSystem('GLMap', GLMapCoordSys)
+registerAction(
+  {
+    type: 'GLMapRoam',
+    event: 'GLMapRoam',
+    update: 'updateLayout',
+  },
+  function (payload, ecModel) {}
+)
+
+export { ChartLayer }

src/modules/effect/Effect.js

@@ -0,0 +1,70 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-14 23:49:14
+ */
+
+import BlackAndWhite from './type/BlackAndWhite'
+import Bloom from './type/Bloom'
+import Brightness from './type/Brightness'
+import DepthOfField from './type/DepthOfField'
+import LensFlare from './type/LensFlare'
+import NightVision from './type/NightVision'
+import Silhouette from './type/Silhouette'
+
+class Effect {
+  constructor() {
+    this._comps = {
+      blackAndWhite: new BlackAndWhite(),
+      bloom: new Bloom(),
+      brightness: new Brightness(),
+      depthOfField: new DepthOfField(),
+      lensFlare: new LensFlare(),
+      night: new NightVision(),
+      silhouette: new Silhouette(),
+    }
+  }
+
+  get blackAndWhite() {
+    return this._comps.blackAndWhite
+  }
+
+  get bloom() {
+    return this._comps.bloom
+  }
+
+  get brightness() {
+    return this._comps.brightness
+  }
+
+  get depthOfField() {
+    return this._comps.depthOfField
+  }
+
+  get lensFlare() {
+    return this._comps.lensFlare
+  }
+
+  get night() {
+    return this._comps.night
+  }
+
+  get silhouette() {
+    return this._comps.silhouette
+  }
+
+  /**
+   *
+   * @param viewer
+   */
+  install(viewer) {
+    Object.keys(this._comps).forEach((key) => {
+      this._comps[key].addTo(viewer)
+    })
+    Object.defineProperty(viewer, 'effect', {
+      value: this,
+      writable: false,
+    })
+  }
+}
+
+export default Effect

src/modules/effect/type/BlackAndWhite.js

@@ -0,0 +1,80 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-14 23:51:47
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+
+class BlackAndWhite {
+  constructor() {
+    this._viewer = undefined
+    this._delegate = undefined
+    this._enable = false
+    this._gradations = 1
+    this._selected = []
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return 'black_and_white'
+  }
+
+  set enable(enable) {
+    this._enable = enable
+    if (enable && this._viewer && !this._delegate) {
+      this._createPostProcessStage()
+    }
+    this._delegate && (this._delegate.enabled = enable)
+  }
+
+  get enable() {
+    return this._enable
+  }
+
+  set gradations(gradations) {
+    this._gradations = gradations
+    this._delegate && (this._delegate.uniforms.gradations = gradations)
+  }
+
+  get gradations() {
+    return this._gradations
+  }
+
+  set selected(selected) {
+    this._selected = selected
+    this._delegate && (this._delegate.selected = selected)
+  }
+
+  get selected() {
+    return this._selected
+  }
+
+  /**
+   *
+   * @private
+   */
+  _createPostProcessStage() {
+    this._delegate = Cesium.PostProcessStageLibrary.createBlackAndWhiteStage()
+    if (this._delegate) {
+      this._delegate.uniforms.gradations = this._gradations
+      this._viewer.scene.postProcessStages.add(this._delegate)
+    }
+  }
+
+  /**
+   *
+   * @param viewer
+   * @returns {BlackAndWhite}
+   */
+  addTo(viewer) {
+    if (!viewer) {
+      return this
+    }
+    this._viewer = viewer
+    this._state = State.ADDED
+    return this
+  }
+}
+
+export default BlackAndWhite

src/modules/effect/type/Bloom.js

@@ -0,0 +1,130 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-14 23:50:27
+ */
+
+import State from '../../state/State'
+
+class Bloom {
+  constructor() {
+    this._viewer = undefined
+    this._enable = false
+    this._contrast = 128
+    this._brightness = -0.3
+    this._glowOnly = false
+    this._delta = 1
+    this._sigma = 3.8
+    this._stepSize = 5
+    this._selected = []
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return 'bloom'
+  }
+
+  set enable(enable) {
+    this._enable = enable
+    if (enable && this._viewer && !this._delegate) {
+      this._createPostProcessStage()
+    }
+    this._delegate && (this._delegate.enabled = enable)
+  }
+
+  get enable() {
+    return this._enable
+  }
+
+  set contrast(contrast) {
+    this._contrast = contrast
+    this._delegate && (this._delegate.uniforms.contrast = contrast)
+  }
+
+  get contrast() {
+    return this._contrast
+  }
+
+  set brightness(brightness) {
+    this._brightness = brightness
+    this._delegate && (this._delegate.uniforms.brightness = brightness)
+  }
+
+  get brightness() {
+    return this._brightness
+  }
+
+  set glowOnly(glowOnly) {
+    this._glowOnly = glowOnly
+    this._delegate && (this._delegate.uniforms.glowOnly = glowOnly)
+  }
+
+  get glowOnly() {
+    return this._glowOnly
+  }
+
+  set delta(delta) {
+    this._delta = delta
+    this._delegate && (this._delegate.uniforms.delta = delta)
+  }
+
+  get delta() {
+    return this._delta
+  }
+
+  set sigma(sigma) {
+    this._sigma = sigma
+    this._delegate && (this._delegate.uniforms.sigma = sigma)
+  }
+
+  get sigma() {
+    return this._sigma
+  }
+
+  set stepSize(stepSize) {
+    this._stepSize = stepSize
+    this._delegate && (this._delegate.uniforms.stepSize = stepSize)
+  }
+
+  get stepSize() {
+    return this._stepSize
+  }
+
+  set selected(selected) {
+    this._selected = selected
+    this._delegate && (this._delegate.selected = selected)
+  }
+
+  get selected() {
+    return this._selected
+  }
+
+  /**
+   *
+   * @private
+   */
+  _createPostProcessStage() {
+    this._delegate = this._viewer.scene.postProcessStages.bloom
+    this._delegate.uniforms.contrast = this._contrast
+    this._delegate.uniforms.brightness = this._brightness
+    this._delegate.uniforms.glowOnly = this._glowOnly
+    this._delegate.uniforms.delta = this._delta
+    this._delegate.uniforms.sigma = this._sigma
+    this._delegate.uniforms.stepSize = this._stepSize
+  }
+
+  /**
+   *
+   * @param viewer
+   * @returns {Bloom}
+   */
+  addTo(viewer) {
+    if (!viewer) {
+      return this
+    }
+    this._viewer = viewer
+    this._state = State.ADDED
+    return this
+  }
+}
+
+export default Bloom

src/modules/effect/type/Brightness.js

@@ -0,0 +1,80 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-14 23:51:47
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+
+class Brightness {
+  constructor() {
+    this._viewer = undefined
+    this._delegate = undefined
+    this._enable = false
+    this._intensity = 1
+    this._selected = []
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return 'brightness'
+  }
+
+  set enable(enable) {
+    this._enable = enable
+    if (enable && this._viewer && !this._delegate) {
+      this._createPostProcessStage()
+    }
+    this._delegate && (this._delegate.enabled = enable)
+  }
+
+  get enable() {
+    return this._enable
+  }
+
+  set intensity(intensity) {
+    this._intensity = intensity
+    this._delegate && (this._delegate.uniforms.brightness = intensity)
+  }
+
+  get intensity() {
+    return this._intensity
+  }
+
+  set selected(selected) {
+    this._selected = selected
+    this._delegate && (this._delegate.selected = selected)
+  }
+
+  get selected() {
+    return this._selected
+  }
+
+  /**
+   *
+   * @private
+   */
+  _createPostProcessStage() {
+    this._delegate = Cesium.PostProcessStageLibrary.createBrightnessStage()
+    if (this._delegate) {
+      this._delegate.uniforms.brightness = this._intensity
+      this._viewer.scene.postProcessStages.add(this._delegate)
+    }
+  }
+
+  /**
+   *
+   * @param viewer
+   * @returns {Brightness}
+   */
+  addTo(viewer) {
+    if (!viewer) {
+      return this
+    }
+    this._viewer = viewer
+    this._state = State.ADDED
+    return this
+  }
+}
+
+export default Brightness

src/modules/effect/type/DepthOfField.js

@@ -0,0 +1,126 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-14 23:51:47
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+
+class DepthOfField {
+  constructor() {
+    this._viewer = undefined
+    this._delegate = undefined
+    this._enable = false
+    this._focalDistance = 87
+    this._delta = 1
+    this._sigma = 3.8
+    this._stepSize = 2.5
+    this._selected = []
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return 'depth_of_field'
+  }
+
+  set enable(enable) {
+    this._enable = enable
+    if (
+      enable &&
+      this._viewer &&
+      Cesium.PostProcessStageLibrary.isDepthOfFieldSupported(
+        this._viewer.scene
+      ) &&
+      !this._delegate
+    ) {
+      this._createPostProcessStage()
+    }
+    this._delegate && (this._delegate.enabled = enable)
+    return this
+  }
+
+  get enable() {
+    return this._enable
+  }
+
+  set focalDistance(focalDistance) {
+    this._focalDistance = focalDistance
+    this._delegate && (this._delegate.uniforms.focalDistance = focalDistance)
+    return this
+  }
+
+  get focalDistance() {
+    return this._focalDistance
+  }
+
+  set delta(delta) {
+    this._delta = delta
+    this._delegate && (this._delegate.uniforms.delta = delta)
+    return this
+  }
+
+  get delta() {
+    return this._delta
+  }
+
+  set sigma(sigma) {
+    this._sigma = sigma
+    this._delegate && (this._delegate.uniforms.sigma = sigma)
+    return this
+  }
+
+  get sigma() {
+    return this._sigma
+  }
+
+  set stepSize(stepSize) {
+    this._stepSize = stepSize
+    this._delegate && (this._delegate.uniforms.stepSize = stepSize)
+    return this
+  }
+
+  get stepSize() {
+    return this._stepSize
+  }
+
+  set selected(selected) {
+    this._selected = selected
+    this._delegate && (this._delegate.selected = selected)
+    return this
+  }
+
+  get selected() {
+    return this._selected
+  }
+
+  /**
+   *
+   * @private
+   */
+  _createPostProcessStage() {
+    this._delegate = Cesium.PostProcessStageLibrary.createDepthOfFieldStage()
+    if (this._delegate) {
+      this._delegate.uniforms.focalDistance = this._focalDistance
+      this._delegate.uniforms.delta = this._delta
+      this._delegate.uniforms.sigma = this._sigma
+      this._delegate.uniforms.stepSize = this._stepSize
+      this._viewer.scene.postProcessStages.add(this._delegate)
+    }
+  }
+
+  /**
+   *
+   * @param viewer
+   * @returns {DepthOfField}
+   */
+  addTo(viewer) {
+    if (!viewer) {
+      return this
+    }
+    this._viewer = viewer
+    this._state = State.ADDED
+    return this
+  }
+}
+
+export default DepthOfField

src/modules/effect/type/LensFlare.js

@@ -0,0 +1,119 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-14 23:51:47
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+
+class LensFlare {
+  constructor() {
+    this._viewer = undefined
+    this._delegate = undefined
+    this._enable = false
+    this._intensity = 6
+    this._distortion = 61
+    this._dirtAmount = 0.4
+    this._haloWidth = 0.4
+    this._selected = []
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return 'lens_flare'
+  }
+
+  set enable(enable) {
+    this._enable = enable
+    if (enable && this._viewer && !this._delegate) {
+      this._createPostProcessStage()
+    }
+    this._delegate && (this._delegate.enabled = enable)
+    return this
+  }
+
+  get enable() {
+    return this._enable
+  }
+
+  set intensity(intensity) {
+    this._intensity = intensity
+    this._delegate && (this._delegate.uniforms.intensity = intensity)
+    return this
+  }
+
+  get intensity() {
+    return this._intensity
+  }
+
+  set distortion(distortion) {
+    this._distortion = distortion
+    this._delegate && (this._delegate.uniforms.distortion = distortion)
+    return this
+  }
+
+  get distortion() {
+    return this._distortion
+  }
+
+  set dirtAmount(dirtAmount) {
+    this._dirtAmount = dirtAmount
+    this._delegate && (this._delegate.uniforms.dirtAmount = dirtAmount)
+    return this
+  }
+
+  get dirtAmount() {
+    return this._dirtAmount
+  }
+
+  set haloWidth(haloWidth) {
+    this._haloWidth = haloWidth
+    this._delegate && (this._delegate.uniforms.haloWidth = haloWidth)
+    return this
+  }
+
+  get haloWidth() {
+    return this._haloWidth
+  }
+
+  set selected(selected) {
+    this._selected = selected
+    this._delegate && (this._delegate.selected = selected)
+    return this
+  }
+
+  get selected() {
+    return this._selected
+  }
+
+  /**
+   *
+   * @private
+   */
+  _createPostProcessStage() {
+    this._delegate = Cesium.PostProcessStageLibrary.createLensFlareStage()
+    if (this._delegate) {
+      this._delegate.uniforms.intensity = this._intensity
+      this._delegate.uniforms.distortion = this._distortion
+      this._delegate.uniforms.dirtAmount = this._dirtAmount
+      this._delegate.uniforms.haloWidth = this._haloWidth
+      this._viewer.scene.postProcessStages.add(this._delegate)
+    }
+  }
+
+  /**
+   *
+   * @param viewer
+   * @returns {LensFlare}
+   */
+  addTo(viewer) {
+    if (!viewer) {
+      return this
+    }
+    this._viewer = viewer
+    this._state = State.ADDED
+    return this
+  }
+}
+
+export default LensFlare

src/modules/effect/type/NightVision.js

@@ -0,0 +1,69 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-14 23:10:14
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+
+class NightVision {
+  constructor() {
+    this._enable = false
+    this._selected = []
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return 'night'
+  }
+
+  set enable(enable) {
+    this._enable = enable
+    if (enable && this._viewer && !this._delegate) {
+      this._createPostProcessStage()
+    }
+    this._delegate && (this._delegate.enabled = enable)
+    return this
+  }
+
+  get enable() {
+    return this._enable
+  }
+
+  set selected(selected) {
+    this._selected = selected
+    this._delegate && (this._delegate.selected = selected)
+    return this
+  }
+
+  get selected() {
+    return this._selected
+  }
+
+  /**
+   *
+   * @private
+   */
+  _createPostProcessStage() {
+    this._delegate = Cesium.PostProcessStageLibrary.createNightVisionStage()
+    if (this._delegate) {
+      this._viewer.scene.postProcessStages.add(this._delegate)
+    }
+  }
+
+  /**
+   *
+   * @param viewer
+   * @returns {NightVision}
+   */
+  addTo(viewer) {
+    if (!viewer) {
+      return this
+    }
+    this._viewer = viewer
+    this._state = State.ADDED
+    return this
+  }
+}
+
+export default NightVision

src/modules/effect/type/Silhouette.js

@@ -0,0 +1,102 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-14 23:51:47
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+
+class Silhouette {
+  constructor() {
+    this._viewer = undefined
+    this._delegate = undefined
+    this._enable = false
+    this._color = Cesium.Color.GREEN
+    this._length = 0.5
+    this._selected = []
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return 'silhouette'
+  }
+
+  set enable(enable) {
+    this._enable = enable
+    if (
+      enable &&
+      this._viewer &&
+      Cesium.PostProcessStageLibrary.isSilhouetteSupported(
+        this._viewer.scene
+      ) &&
+      !this._delegate
+    ) {
+      this._createPostProcessStage()
+    }
+    this._delegate && (this._delegate.enabled = enable)
+    return this
+  }
+
+  get enable() {
+    return this._enable
+  }
+
+  set color(color) {
+    this._color = color
+    this._delegate && (this._delegate.uniforms.color = color)
+    return this
+  }
+
+  get color() {
+    return this._color
+  }
+
+  set length(length) {
+    this._length = length
+    this._delegate && (this._delegate.uniforms.length = length)
+    return this
+  }
+
+  get length() {
+    return this._length
+  }
+
+  set selected(selected) {
+    this._selected = selected
+    this._delegate && (this._delegate.selected = selected)
+    return this
+  }
+
+  get selected() {
+    return this._selected
+  }
+
+  /**
+   *
+   * @private
+   */
+  _createPostProcessStage() {
+    this._delegate = Cesium.PostProcessStageLibrary.createSilhouetteStage()
+    if (this._delegate) {
+      this._delegate.uniforms.color = this._color
+      this._delegate.uniforms.length = this._length
+      this._viewer.scene.postProcessStages.add(this._delegate)
+    }
+  }
+
+  /**
+   *
+   * @param viewer
+   * @returns {Silhouette}
+   */
+  addTo(viewer) {
+    if (!viewer) {
+      return this
+    }
+    this._viewer = viewer
+    this._state = State.ADDED
+    return this
+  }
+}
+
+export default Silhouette

src/modules/effect/type/Sun.js

@@ -0,0 +1,4 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-08-01 00:22:00
+ */

src/modules/event/Event.js

@@ -0,0 +1,128 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-02 15:24:38
+ */
+
+import { Cesium } from '../../namespace'
+
+class Event {
+  constructor(types) {
+    this._types = types
+    this._cache = {}
+  }
+
+  /**
+   * @param type
+   * @param callback
+   * @param context
+   * @returns {any}
+   * @private
+   */
+  _on(type, callback, context) {
+    let event = this.getEvent(type)
+    let removeCallback = undefined
+    if (event && callback) {
+      removeCallback = event.addEventListener(callback, context || this)
+    }
+    return removeCallback
+  }
+
+  /**
+   * @param type
+   * @param callback
+   * @param context
+   * @returns {boolean}
+   * @private
+   */
+  _off(type, callback, context) {
+    let event = this.getEvent(type)
+    let removed = false
+    if (event && callback) {
+      removed = event.removeEventListener(callback, context || this)
+    }
+    return removed
+  }
+
+  /**
+   * @param type
+   * @param params
+   * @private
+   */
+  _fire(type, params) {
+    let event = this.getEvent(type)
+    if (event) {
+      event.raiseEvent(params)
+    }
+  }
+
+  /**
+   * Event registration
+   * Subclasses need to override
+   *
+   */
+  _registerEvent() {
+    Object.keys(this._types).forEach((key) => {
+      let type = this._types[key]
+      this._cache[type] = new Cesium.Event()
+    })
+  }
+
+  /**
+   * Subscribe event
+   * @param type
+   * @param callback
+   * @param context
+   * @returns remove callback function
+   */
+  on(type, callback, context) {
+    return this._on(type, callback, context)
+  }
+
+  /**
+   * Subscribe once event
+   * @param type
+   * @param callback
+   * @param context
+   */
+  once(type, callback, context) {
+    let removeCallback = this._on(
+      type,
+      (e) => {
+        callback(e)
+        removeCallback && removeCallback()
+      },
+      context
+    )
+  }
+
+  /**
+   * Unsubscribe event
+   * @param type
+   * @param callback
+   * @param context
+   * @returns Boolean
+   */
+  off(type, callback, context) {
+    return this._off(type, callback, context)
+  }
+
+  /**
+   * Trigger subscription event
+   * @param type
+   * @param params
+   */
+  fire(type, params) {
+    this._fire(type, params)
+  }
+
+  /**
+   * Returns events by type
+   * @param type
+   * @returns Event
+   */
+  getEvent(type) {
+    return this._cache[type] || undefined
+  }
+}
+
+export default Event

src/modules/event/EventType.js

@@ -0,0 +1,120 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-04-10 17:02:28
+ */
+
+import { Cesium } from '../../namespace'
+
+const BaseEventType = {
+  ADD: 'add',
+  REMOVE: 'remove',
+}
+
+const MouseEventType = {
+  LEFT_DOWN: Cesium.ScreenSpaceEventType.LEFT_DOWN,
+  LEFT_UP: Cesium.ScreenSpaceEventType.LEFT_UP,
+  CLICK: Cesium.ScreenSpaceEventType.LEFT_CLICK,
+  RIGHT_DOWN: Cesium.ScreenSpaceEventType.RIGHT_DOWN,
+  RIGHT_UP: Cesium.ScreenSpaceEventType.RIGHT_UP,
+  RIGHT_CLICK: Cesium.ScreenSpaceEventType.RIGHT_CLICK,
+  DB_CLICK: Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK,
+  MOUSE_MOVE: Cesium.ScreenSpaceEventType.MOUSE_MOVE,
+  WHEEL: Cesium.ScreenSpaceEventType.WHEEL,
+  MOUSE_OVER: 'mouseover',
+  MOUSE_OUT: 'mouseout',
+}
+
+const ViewerEventType = {
+  ADD_LAYER: 'addLayer',
+  REMOVE_LAYER: 'removeLayer',
+  ADD_EFFECT: 'addEffect',
+  REMOVE_EFFECT: 'removeEffect',
+  LEFT_DOWN: Cesium.ScreenSpaceEventType.LEFT_DOWN,
+  LEFT_UP: Cesium.ScreenSpaceEventType.LEFT_UP,
+  CLICK: Cesium.ScreenSpaceEventType.LEFT_CLICK,
+  RIGHT_DOWN: Cesium.ScreenSpaceEventType.RIGHT_DOWN,
+  RIGHT_UP: Cesium.ScreenSpaceEventType.RIGHT_UP,
+  RIGHT_CLICK: Cesium.ScreenSpaceEventType.RIGHT_CLICK,
+  DB_CLICK: Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK,
+  MOUSE_MOVE: Cesium.ScreenSpaceEventType.MOUSE_MOVE,
+  WHEEL: Cesium.ScreenSpaceEventType.WHEEL,
+}
+
+const SceneEventType = {
+  CAMERA_MOVE_END: 'cameraMoveEnd',
+  CAMERA_CHANGED: 'cameraChanged',
+  PRE_UPDATE: 'preUpdate',
+  POST_UPDATE: 'postUpdate',
+  PRE_RENDER: 'preRender',
+  POST_RENDER: 'postRender',
+  MORPH_COMPLETE: 'morphComplete',
+  CLOCK_TICK: 'clockTick',
+  RENDER_ERROR: 'renderError',
+}
+
+const OverlayEventType = {
+  ...BaseEventType,
+  LEFT_DOWN: Cesium.ScreenSpaceEventType.LEFT_DOWN,
+  LEFT_UP: Cesium.ScreenSpaceEventType.LEFT_UP,
+  CLICK: Cesium.ScreenSpaceEventType.LEFT_CLICK,
+  RIGHT_DOWN: Cesium.ScreenSpaceEventType.RIGHT_DOWN,
+  RIGHT_UP: Cesium.ScreenSpaceEventType.RIGHT_UP,
+  RIGHT_CLICK: Cesium.ScreenSpaceEventType.RIGHT_CLICK,
+  DB_CLICK: Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK,
+  MOUSE_MOVE: Cesium.ScreenSpaceEventType.MOUSE_MOVE,
+  MOUSE_OVER: 'mouseover',
+  MOUSE_OUT: 'mouseout',
+  POSITION_UPDATE: 'positionUpdate',
+}
+
+const LayerGroupEventType = BaseEventType
+
+const LayerEventType = {
+  ...BaseEventType,
+  LEFT_DOWN: Cesium.ScreenSpaceEventType.LEFT_DOWN,
+  LEFT_UP: Cesium.ScreenSpaceEventType.LEFT_UP,
+  CLICK: Cesium.ScreenSpaceEventType.LEFT_CLICK,
+  RIGHT_DOWN: Cesium.ScreenSpaceEventType.RIGHT_DOWN,
+  RIGHT_UP: Cesium.ScreenSpaceEventType.RIGHT_UP,
+  RIGHT_CLICK: Cesium.ScreenSpaceEventType.RIGHT_CLICK,
+  DB_CLICK: Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK,
+}
+
+const TrackEventType = {
+  ...BaseEventType,
+  POST_RENDER: 'postRender',
+  ACTIVATE: 'activate',
+  DEACTIVATE: 'deactivate',
+  RESET_TIME_LINE: 'restTimeLine',
+}
+
+const PathEventType = {
+  ...BaseEventType,
+  POST_RENDER: 'postRender',
+  RESET_TIME_LINE: 'restTimeLine',
+}
+
+const PlotEventType = {
+  DRAW_START: 'drawStart',
+  DRAW_STOP: 'drawStop',
+  EDIT_START: 'editStart',
+  EDIT_STOP: 'editEnd',
+  DRAW_ANCHOR: 'drawAnchor',
+  CREATE_ANCHOR: 'createAnchor',
+  UPDATE_ANCHOR: 'updateAnchor',
+  ANCHOR_MOVING: 'anchorMoving',
+  EDIT_ANCHOR_STOP: 'editAnchorStop',
+  CLEAR_ANCHOR: 'clearAnchor',
+}
+
+export {
+  MouseEventType,
+  ViewerEventType,
+  SceneEventType,
+  LayerGroupEventType,
+  LayerEventType,
+  OverlayEventType,
+  TrackEventType,
+  PathEventType,
+  PlotEventType,
+}

src/modules/event/index.js

@@ -0,0 +1,32 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-03-13 13:24:24
+ */
+
+export * from './EventType'
+export { default as Event } from './Event'
+
+/**
+ * scene
+ */
+export { default as MouseEvent } from './type/MouseEvent'
+export { default as ViewerEvent } from './type/ViewerEvent'
+export { default as SceneEvent } from './type/SceneEvent'
+
+/**
+ * layer
+ */
+export { default as LayerGroupEvent } from './type/LayerGroupEvent'
+export { default as LayerEvent } from './type/LayerEvent'
+export { default as OverlayEvent } from './type/OverlayEvent'
+
+/**
+ * animation
+ */
+export { default as TrackEvent } from './type/TrackEvent'
+export { default as PathEvent } from './type/PathEvent'
+
+/**
+ * plot
+ */
+export { default as PlotEvent } from './type/PlotEvent'

src/modules/event/type/LayerEvent.js

@@ -0,0 +1,16 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-02 14:26:35
+ */
+
+import { LayerEventType } from '../EventType'
+import Event from '../Event'
+
+class LayerEvent extends Event {
+  constructor() {
+    super(LayerEventType)
+    this._registerEvent()
+  }
+}
+
+export default LayerEvent

src/modules/event/type/LayerGroupEvent.js

@@ -0,0 +1,16 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-28 20:18:04
+ */
+
+import { LayerGroupEventType } from '../EventType'
+import Event from '../Event'
+
+class LayerGroupEvent extends Event {
+  constructor() {
+    super(LayerGroupEventType)
+    this._registerEvent()
+  }
+}
+
+export default LayerGroupEvent

src/modules/event/type/MouseEvent.js

@@ -0,0 +1,417 @@
+/**
+ * @Author: Caven
+ * @Date: 2019-12-31 16:58:31
+ */
+
+import { Cesium } from '../../../namespace'
+import { MouseEventType } from '../EventType'
+import Event from '../Event'
+
+/**
+ * Mouse events in 3D scene, optimized Cesium event model
+ */
+class MouseEvent extends Event {
+  constructor(viewer) {
+    super(MouseEventType)
+    this._viewer = viewer
+    this._selected = undefined
+    this._registerEvent()
+    this._addDefaultEvent()
+  }
+
+  /**
+   *
+   * @private
+   */
+  _registerEvent() {
+    let handler = new Cesium.ScreenSpaceEventHandler(this._viewer.canvas)
+    Object.keys(Cesium.ScreenSpaceEventType).forEach((key) => {
+      let type = Cesium.ScreenSpaceEventType[key]
+      this._cache[type] = new Cesium.Event()
+      handler.setInputAction((movement) => {
+        this._cache[type].raiseEvent(movement)
+      }, type)
+    })
+  }
+
+  /**
+   * add default event for the viewer
+   * @private
+   */
+  _addDefaultEvent() {
+    this.on(this._types.LEFT_DOWN, this._leftDownHandler, this)
+    this.on(this._types.LEFT_UP, this._leftUpHandler, this)
+    this.on(this._types.CLICK, this._clickHandler, this)
+    this.on(this._types.DB_CLICK, this._dbClickHandler, this)
+    this.on(this._types.RIGHT_DOWN, this._rightDownHandler, this)
+    this.on(this._types.RIGHT_UP, this._rightUpHandler, this)
+    this.on(this._types.RIGHT_CLICK, this._rightClickHandler, this)
+    this.on(this._types.MOUSE_MOVE, this._mouseMoveHandler, this)
+    this.on(this._types.WHEEL, this._mouseWheelHandler, this)
+  }
+
+  /**
+   *
+   * Gets the mouse information for the mouse event
+   * @param position
+   * @private
+   *
+   */
+  _getMouseInfo(position) {
+    let scene = this._viewer.scene
+    let target = scene.pick(position)
+    let cartesian = undefined
+    let surfaceCartesian = undefined
+    let wgs84Position = undefined
+    let wgs84SurfacePosition = undefined
+    if (scene.pickPositionSupported) {
+      cartesian = scene.pickPosition(position)
+    }
+    if (cartesian) {
+      let c = Cesium.Ellipsoid.WGS84.cartesianToCartographic(cartesian)
+      if (c) {
+        wgs84Position = {
+          lng: Cesium.Math.toDegrees(c.longitude),
+          lat: Cesium.Math.toDegrees(c.latitude),
+          alt: c.height,
+        }
+      }
+    }
+    if (
+      scene.mode === Cesium.SceneMode.SCENE3D &&
+      !(this._viewer.terrainProvider instanceof Cesium.EllipsoidTerrainProvider)
+    ) {
+      let ray = scene.camera.getPickRay(position)
+      surfaceCartesian = scene.globe.pick(ray, scene)
+    } else {
+      surfaceCartesian = scene.camera.pickEllipsoid(
+        position,
+        Cesium.Ellipsoid.WGS84
+      )
+    }
+    if (surfaceCartesian) {
+      let c = Cesium.Ellipsoid.WGS84.cartesianToCartographic(surfaceCartesian)
+      if (c) {
+        wgs84SurfacePosition = {
+          lng: Cesium.Math.toDegrees(c.longitude),
+          lat: Cesium.Math.toDegrees(c.latitude),
+          alt: c.height,
+        }
+      }
+    }
+
+    return {
+      target: target,
+      windowPosition: position,
+      position: cartesian,
+      wgs84Position: wgs84Position,
+      surfacePosition: surfaceCartesian,
+      wgs84SurfacePosition: wgs84SurfacePosition,
+    }
+  }
+
+  /**
+   * Gets the drill pick overlays for the mouse event
+   * @param position
+   * @returns {[]}
+   * @private
+   */
+  _getDrillInfos(position) {
+    let drillInfos = []
+    let scene = this._viewer.scene
+    let targets = scene.drillPick(position)
+    if (targets && targets.length) {
+      targets.forEach((target) => {
+        drillInfos.push(this._getTargetInfo(target))
+      })
+    }
+    return drillInfos
+  }
+
+  /**
+   * Return the Overlay id
+   * @param target
+   * @returns {any}
+   * @private
+   */
+  _getOverlayId(target) {
+    let overlayId = undefined
+
+    // for Entity
+    if (target?.id instanceof Cesium.Entity) {
+      overlayId = target.id.overlayId
+    }
+
+    // for Cesium3DTileFeature
+    else if (target instanceof Cesium.Cesium3DTileFeature) {
+      overlayId = target.tileset.overlayId
+    }
+
+    // for Cesium3DTileset
+    else if (target?.primitive instanceof Cesium.Cesium3DTileset) {
+      overlayId = target.primitive.overlayId
+    }
+
+    // for Primitve
+    else if (target?.primitive) {
+      overlayId = target.primitive.overlayId
+    }
+
+    return overlayId
+  }
+
+  /**
+   * Returns the target information for the mouse event
+   * @param target
+   * @returns {{instanceId: *, overlay: undefined, feature: undefined, layer: undefined}}
+   * @private
+   */
+  _getTargetInfo(target) {
+    let overlay = undefined
+    let layer = undefined
+    let feature = undefined
+
+    // for Entity
+    if (target?.id instanceof Cesium.Entity) {
+      layer = this._viewer
+        .getLayers()
+        .filter((item) => item.layerId === target.id.layerId)[0]
+      if (layer?.getOverlay) {
+        overlay = layer.getOverlay(target.id.overlayId)
+      }
+    }
+
+    // for Cesium3DTileFeature
+    else if (target instanceof Cesium.Cesium3DTileFeature) {
+      layer = this._viewer
+        .getLayers()
+        .filter((item) => item.layerId === target.tileset.layerId)[0]
+      feature = target
+      if (layer?.getOverlay) {
+        overlay = layer.getOverlay(target.tileset.overlayId)
+        if (feature && feature.getPropertyNames) {
+          let propertyNames = feature.getPropertyNames()
+          propertyNames.forEach((item) => {
+            overlay.attr[item] = feature.getProperty(item)
+          })
+        }
+      }
+    }
+
+    // for Cesium3DTileset
+    else if (target?.primitive instanceof Cesium.Cesium3DTileset) {
+      layer = this._viewer
+        .getLayers()
+        .filter((item) => item.layerId === target.primitive.layerId)[0]
+      if (layer?.getOverlay) {
+        overlay = layer.getOverlay(target.primitive.overlayId)
+      }
+    }
+
+    // for Primitve
+    else if (target?.primitive) {
+      layer = this._viewer
+        .getLayers()
+        .filter((item) => item.layerId === target.primitive.layerId)[0]
+      if (layer?.getOverlay) {
+        overlay = layer.getOverlay(target.primitive.overlayId)
+      }
+    }
+
+    return {
+      layer: layer,
+      overlay: overlay,
+      feature: feature,
+      instanceId: target?.instanceId,
+    }
+  }
+
+  /**
+   * Trigger subscription event
+   * @param type
+   * @param mouseInfo
+   * @private
+   */
+  _raiseEvent(type, mouseInfo = {}) {
+    let event = undefined
+    let targetInfo = this._getTargetInfo(mouseInfo.target)
+    let overlay = targetInfo?.overlay
+    let layer = targetInfo?.layer
+    // get Overlay Event
+    if (overlay?.overlayEvent) {
+      event = overlay.overlayEvent.getEvent(type)
+    }
+
+    // get Layer Event
+    if ((!event || event.numberOfListeners === 0) && layer?.layerEvent) {
+      event = layer.layerEvent.getEvent(type)
+    }
+
+    // get Viewer Event
+    if (
+      (!event || event.numberOfListeners === 0) &&
+      this._viewer?.viewerEvent
+    ) {
+      event = this._viewer.viewerEvent.getEvent(type)
+    }
+
+    event &&
+      event.numberOfListeners > 0 &&
+      event.raiseEvent({
+        ...targetInfo,
+        ...mouseInfo,
+      })
+
+    // get Drill Pick Event
+    if (overlay?.allowDrillPicking) {
+      let drillInfos = this._getDrillInfos(mouseInfo.windowPosition)
+      drillInfos.forEach((drillInfo) => {
+        let dillOverlay = drillInfo?.overlay
+        let dillLayer = drillInfo?.layer
+        if (
+          dillOverlay?.overlayId !== overlay.overlayId &&
+          dillOverlay?.overlayEvent
+        ) {
+          // get Overlay Event
+          event = dillOverlay.overlayEvent.getEvent(type)
+          // get Layer Event
+          if (
+            (!event || event.numberOfListeners === 0) &&
+            dillLayer?.layerEvent
+          ) {
+            event = dillLayer.layerEvent.getEvent(type)
+          }
+          event &&
+            event.numberOfListeners > 0 &&
+            event.raiseEvent({
+              ...drillInfo,
+              ...mouseInfo,
+            })
+        }
+      })
+    }
+  }
+
+  /**
+   * Default click event handler
+   * @param movement
+   * @returns {boolean}
+   * @private
+   */
+  _clickHandler(movement) {
+    if (!movement?.position) {
+      return false
+    }
+    let mouseInfo = this._getMouseInfo(movement.position)
+    this._raiseEvent(MouseEventType.CLICK, mouseInfo)
+  }
+
+  /**
+   * Default dbClick event handler
+   * @param movement
+   * @returns {boolean}
+   * @private
+   */
+  _dbClickHandler(movement) {
+    if (!movement?.position) {
+      return false
+    }
+    let mouseInfo = this._getMouseInfo(movement.position)
+    this._raiseEvent(MouseEventType.DB_CLICK, mouseInfo)
+  }
+
+  /**
+   * Default rightClick event handler
+   * @param movement
+   * @returns {boolean}
+   * @private
+   */
+  _rightClickHandler(movement) {
+    if (!movement?.position) {
+      return false
+    }
+    let mouseInfo = this._getMouseInfo(movement.position)
+    this._raiseEvent(MouseEventType.RIGHT_CLICK, mouseInfo)
+  }
+
+  /**
+   * Default mousemove event handler
+   * @param movement
+   * @returns {boolean}
+   * @private
+   */
+  _mouseMoveHandler(movement) {
+    if (!movement?.endPosition) {
+      return false
+    }
+    let mouseInfo = this._getMouseInfo(movement.endPosition)
+    this._viewer.canvas.style.cursor = mouseInfo.target ? 'pointer' : 'default'
+    this._raiseEvent(MouseEventType.MOUSE_MOVE, mouseInfo)
+
+    // add event for overlay
+    if (
+      !this._selected ||
+      this._getOverlayId(this._selected.target) !==
+        this._getOverlayId(mouseInfo.target)
+    ) {
+      this._raiseEvent(MouseEventType.MOUSE_OUT, this._selected)
+      this._raiseEvent(MouseEventType.MOUSE_OVER, mouseInfo)
+      this._selected = mouseInfo
+    }
+  }
+
+  /**
+   * Default mouse left down event handler
+   * @param movement
+   * @private
+   */
+  _leftDownHandler(movement) {
+    if (!movement?.position) {
+      return false
+    }
+    let mouseInfo = this._getMouseInfo(movement.position)
+    this._raiseEvent(MouseEventType.LEFT_DOWN, mouseInfo)
+  }
+
+  /**
+   * Default mouse left up event handler
+   * @param movement
+   * @private
+   */
+  _leftUpHandler(movement) {
+    this._raiseEvent(MouseEventType.LEFT_UP, { movement })
+  }
+
+  /**
+   * Default mouse right down event handler
+   * @param movement
+   * @private
+   */
+  _rightDownHandler(movement) {
+    if (!movement?.position) {
+      return false
+    }
+    let mouseInfo = this._getMouseInfo(movement.position)
+    this._raiseEvent(MouseEventType.RIGHT_DOWN, mouseInfo)
+  }
+
+  /**
+   * Default mouse right up event handler
+   * @param movement
+   * @private
+   */
+  _rightUpHandler(movement) {
+    this._raiseEvent(MouseEventType.RIGHT_UP, { movement })
+  }
+
+  /**
+   * Default mouse wheel event handler
+   * @param movement
+   * @private
+   */
+  _mouseWheelHandler(movement) {
+    this._raiseEvent(MouseEventType.WHEEL, { movement })
+  }
+}
+
+export default MouseEvent

src/modules/event/type/OverlayEvent.js

@@ -0,0 +1,17 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-02 14:26:35
+ */
+
+import { Cesium } from '../../../namespace'
+import { OverlayEventType } from '../EventType'
+import Event from '../Event'
+
+class OverlayEvent extends Event {
+  constructor() {
+    super(OverlayEventType)
+    this._registerEvent()
+  }
+}
+
+export default OverlayEvent

src/modules/event/type/PathEvent.js

@@ -0,0 +1,17 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-05-11 23:28:13
+ */
+
+import { Cesium } from '../../../namespace'
+import { PathEventType } from '../EventType'
+import Event from '../Event'
+
+class PathEvent extends Event {
+  constructor() {
+    super(PathEventType)
+    this._registerEvent()
+  }
+}
+
+export default PathEvent

src/modules/event/type/PlotEvent.js

@@ -0,0 +1,16 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-05-11 23:28:13
+ */
+
+import { PlotEventType } from '../EventType'
+import Event from '../Event'
+
+class PlotEvent extends Event {
+  constructor() {
+    super(PlotEventType)
+    this._registerEvent()
+  }
+}
+
+export default PlotEvent

src/modules/event/type/SceneEvent.js

@@ -0,0 +1,159 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-03-02 21:32:43
+ */
+
+import { SceneEventType } from '../EventType'
+import Event from '../Event'
+
+class SceneEvent extends Event {
+  constructor(viewer) {
+    super(SceneEventType)
+    this._camera = viewer.camera
+    this._scene = viewer.scene
+    this._clock = viewer.clock
+  }
+
+  /**
+   * Subscribe event
+   * @param type
+   * @param callback
+   * @param context
+   * @returns {any}
+   */
+  on(type, callback, context) {
+    let removeCallback = undefined
+    switch (type) {
+      case SceneEventType.CAMERA_MOVE_END:
+        removeCallback = this._camera.moveEnd.addEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.CAMERA_CHANGED:
+        removeCallback = this._camera.changed.addEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.PRE_UPDATE:
+        removeCallback = this._scene.preUpdate.addEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.POST_UPDATE:
+        removeCallback = this._scene.postUpdate.addEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.PRE_RENDER:
+        removeCallback = this._scene.preRender.addEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.POST_RENDER:
+        removeCallback = this._scene.postRender.addEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.MORPH_COMPLETE:
+        removeCallback = this._scene.morphComplete.addEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.CLOCK_TICK:
+        removeCallback = this._clock.onTick.addEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.RENDER_ERROR:
+        removeCallback = this._scene.renderError.addEventListener(
+          callback,
+          context || this
+        )
+        break
+      default:
+        break
+    }
+    return removeCallback
+  }
+
+  /**
+   * Unsubscribe event
+   * @param type
+   * @param callback
+   * @param context
+   * @returns {boolean}
+   */
+  off(type, callback, context) {
+    let removed = false
+    switch (type) {
+      case SceneEventType.CAMERA_MOVE_END:
+        removed = this._camera.moveEnd.removeEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.CAMERA_CHANGED:
+        removed = this._camera.changed.removeEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.PRE_UPDATE:
+        removed = this._scene.preUpdate.removeEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.POST_UPDATE:
+        removed = this._scene.postUpdate.removeEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.PRE_RENDER:
+        removed = this._scene.preRender.removeEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.POST_RENDER:
+        removed = this._scene.postRender.removeEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.MORPH_COMPLETE:
+        removed = this._scene.morphComplete.removeEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.CLOCK_TICK:
+        removed = this._clock.onTick.removeEventListener(
+          callback,
+          context || this
+        )
+        break
+      case SceneEventType.RENDER_ERROR:
+        removed = this._scene.renderError.removeEventListener(
+          callback,
+          context || this
+        )
+        break
+      default:
+        break
+    }
+
+    return removed
+  }
+}
+
+export default SceneEvent

src/modules/event/type/TrackEvent.js

@@ -0,0 +1,16 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-06-08 20:37:28
+ */
+
+import { TrackEventType } from '../EventType'
+import Event from '../Event'
+
+class TrackEvent extends Event {
+  constructor() {
+    super(TrackEventType)
+    this._registerEvent()
+  }
+}
+
+export default TrackEvent

src/modules/event/type/ViewerEvent.js

@@ -0,0 +1,16 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-02 14:26:35
+ */
+
+import { ViewerEventType } from '../EventType'
+import Event from '../Event'
+
+class ViewerEvent extends Event {
+  constructor() {
+    super(ViewerEventType)
+    this._registerEvent()
+  }
+}
+
+export default ViewerEvent

src/modules/exts/BaseLayerPicker.js

@@ -0,0 +1,118 @@
+/**
+ @Author: Caven Chen
+ **/
+
+import { Cesium } from '../../namespace'
+
+const { EllipsoidTerrainProvider } = Cesium
+
+class BaseLayerPicker {
+  constructor(options) {
+    if (!options.globe) {
+      throw new Error('globe is required')
+    }
+    this._globe = options.globe
+    this._imageryLayers = []
+    this._terrainProviders = []
+    this._selectedImageryLayer = undefined
+    this._selectedTerrain = undefined
+    this._count = 0
+  }
+
+  set selectedImageryLayer(imageryLayer) {
+    if (!imageryLayer || !imageryLayer.layers) {
+      new Error('imagery format error')
+    }
+    let imageryLayers = this._globe.imageryLayers
+    if (!this._selectedImageryLayer) {
+      for (let i = imageryLayer.layers.length - 1; i >= 0; i--) {
+        imageryLayers.add(imageryLayer.layers[i], 0)
+      }
+    } else if (
+      this._selectedImageryLayer &&
+      imageryLayer.id !== this._selectedImageryLayer.id
+    ) {
+      imageryLayers.removeAll()
+      for (let i = imageryLayer.layers.length - 1; i >= 0; i--) {
+        imageryLayers.addImageryProvider(imageryLayer.layers[i], 0)
+      }
+    }
+    this._selectedImageryLayer = imageryLayer
+  }
+
+  get selectedImageryLayer() {
+    return this._selectedImageryLayer
+  }
+
+  set selectedTerrain(terrain) {
+    if (this.selectedTerrain !== terrain) {
+      this._globe.depthTestAgainstTerrain = !(
+        terrain instanceof EllipsoidTerrainProvider
+      )
+      this._globe.terrainProvider = terrain
+      this._selectedTerrain = terrain
+    }
+  }
+
+  get selectedTerrain() {
+    return this._selectedTerrain
+  }
+
+  /**
+   *
+   * @param imageryLayer
+   * @returns {BaseLayerPicker}
+   */
+  addImageryLayer(imageryLayer) {
+    let imageryLayers = []
+    if (Array.isArray(imageryLayer)) {
+      imageryLayers = imageryLayer.slice(0)
+    } else {
+      imageryLayers = [imageryLayer]
+    }
+    this._count++
+    this._imageryLayers.push({
+      id: `dc-imagery-${this._count}`,
+      layers: imageryLayers,
+    })
+    return this
+  }
+
+  /**
+   *
+   * @param provider
+   * @returns {BaseLayerPicker}
+   */
+  addTerrainProvider(provider) {
+    this._terrainProviders.push(provider)
+    return this
+  }
+
+  /**
+   *
+   * @param index
+   * @returns {BaseLayerPicker}
+   */
+  changeImageryLayer(index) {
+    if (index > this._imageryLayers.length - 1) {
+      throw new Error('index error')
+    }
+    this.selectedImageryLayer = this._imageryLayers[index]
+    return this
+  }
+
+  /**
+   *
+   * @param index
+   * @returns {BaseLayerPicker}
+   */
+  changeTerrain(index) {
+    if (index > this._terrainProviders.length - 1) {
+      throw new Error('index error')
+    }
+    this.selectedTerrain = this._terrainProviders[index]
+    return this
+  }
+}
+
+export default BaseLayerPicker

src/modules/exts/GroundSkyBox.js

@@ -0,0 +1,189 @@
+/**
+ @author : Caven Chen
+ @date : 2023-05-09
+ */
+
+import { Cesium } from '../../namespace'
+const {
+  BoxGeometry,
+  Cartesian3,
+  defined,
+  DeveloperError,
+  GeometryPipeline,
+  Matrix3,
+  Matrix4,
+  Transforms,
+  VertexFormat,
+  BufferUsage,
+  CubeMap,
+  loadCubeMap,
+  RenderState,
+  VertexArray,
+  BlendingState,
+  SceneMode,
+  ShaderProgram,
+  ShaderSource,
+  SkyBox,
+} = Cesium
+
+const SkyBoxFS = `
+  uniform samplerCube u_cubeMap;
+  in vec3 v_texCoord;
+  void main()
+  {
+    vec4 color = czm_textureCube(u_cubeMap, normalize(v_texCoord));
+    out_FragColor = vec4(czm_gammaCorrect(color).rgb, czm_morphTime);
+  }
+`
+
+const SkyBoxVS = `
+  in vec3 position;
+  out vec3 v_texCoord;
+  uniform mat3 u_rotateMatrix;
+  void main()
+  {
+    vec3 p = czm_viewRotation * u_rotateMatrix * (czm_temeToPseudoFixed * (czm_entireFrustum.y * position));
+    gl_Position = czm_projection * vec4(p, 1.0);
+    v_texCoord = position.xyz;
+  }
+`
+
+class GroundSkyBox extends SkyBox {
+  constructor(options = {}) {
+    super(options)
+    this.offsetAngle = options?.offsetAngle || 0
+  }
+
+  update(frameState, useHdr) {
+    const that = this
+
+    if (!this.show) {
+      return undefined
+    }
+
+    if (
+      frameState.mode !== SceneMode.SCENE3D &&
+      frameState.mode !== SceneMode.MORPHING
+    ) {
+      return undefined
+    }
+
+    if (!frameState.passes.render) {
+      return undefined
+    }
+
+    const context = frameState.context
+
+    if (this._sources !== this.sources) {
+      this._sources = this.sources
+      const sources = this.sources
+
+      if (
+        !defined(sources.positiveX) ||
+        !defined(sources.negativeX) ||
+        !defined(sources.positiveY) ||
+        !defined(sources.negativeY) ||
+        !defined(sources.positiveZ) ||
+        !defined(sources.negativeZ)
+      ) {
+        throw new DeveloperError(
+          'this.sources is required and must have positiveX, negativeX, positiveY, negativeY, positiveZ, and negativeZ properties.'
+        )
+      }
+
+      if (
+        typeof sources.positiveX !== typeof sources.negativeX ||
+        typeof sources.positiveX !== typeof sources.positiveY ||
+        typeof sources.positiveX !== typeof sources.negativeY ||
+        typeof sources.positiveX !== typeof sources.positiveZ ||
+        typeof sources.positiveX !== typeof sources.negativeZ
+      ) {
+        throw new DeveloperError(
+          'this.sources properties must all be the same type.'
+        )
+      }
+
+      if (typeof sources.positiveX === 'string') {
+        // Given urls for cube-map images. Load them.
+        loadCubeMap(context, this._sources).then(function (cubeMap) {
+          that._cubeMap = that._cubeMap && that._cubeMap.destroy()
+          that._cubeMap = cubeMap
+        })
+      } else {
+        this._cubeMap = this._cubeMap && this._cubeMap.destroy()
+        this._cubeMap = new CubeMap({
+          context: context,
+          source: sources,
+        })
+      }
+    }
+
+    const command = this._command
+
+    command.modelMatrix = Transforms.eastNorthUpToFixedFrame(
+      frameState.camera.positionWC
+    )
+
+    if (this.offsetAngle !== 0) {
+      Matrix4.multiply(
+        command.modelMatrix,
+        Matrix4.fromRotationTranslation(
+          Matrix3.fromRotationZ((this.offsetAngle / 180) * Math.PI)
+        ),
+        command.modelMatrix
+      )
+    }
+
+    if (!defined(command.vertexArray)) {
+      command.uniformMap = {
+        u_cubeMap: function () {
+          return that._cubeMap
+        },
+        u_rotateMatrix: function () {
+          return Matrix4.getMatrix3(command.modelMatrix, new Matrix3())
+        },
+      }
+
+      const geometry = BoxGeometry.createGeometry(
+        BoxGeometry.fromDimensions({
+          dimensions: new Cartesian3(2.0, 2.0, 2.0),
+          vertexFormat: VertexFormat.POSITION_ONLY,
+        })
+      )
+      const attributeLocations = (this._attributeLocations =
+        GeometryPipeline.createAttributeLocations(geometry))
+
+      command.vertexArray = VertexArray.fromGeometry({
+        context: context,
+        geometry: geometry,
+        attributeLocations: attributeLocations,
+        bufferUsage: BufferUsage._DRAW,
+      })
+
+      command.renderState = RenderState.fromCache({
+        blending: BlendingState.ALPHA_BLEND,
+      })
+    }
+
+    if (!defined(command.shaderProgram) || this._useHdr !== useHdr) {
+      const fs = new ShaderSource({
+        defines: [useHdr ? 'HDR' : ''],
+        sources: [SkyBoxFS],
+      })
+      command.shaderProgram = ShaderProgram.fromCache({
+        context: context,
+        vertexShaderSource: SkyBoxVS,
+        fragmentShaderSource: fs,
+        attributeLocations: this._attributeLocations,
+      })
+      this._useHdr = useHdr
+    }
+
+    if (!defined(this._cubeMap)) {
+      return undefined
+    }
+    return command
+  }
+}
+
+export default GroundSkyBox

src/modules/exts/index.js

@@ -0,0 +1,8 @@
+/**
+ @author : Caven Chen
+ @date : 2023-05-09
+ */
+
+export { default as BaseLayerPicker } from './BaseLayerPicker.js'
+export { default as GroundSkyBox } from './GroundSkyBox.js'
+export { default as CesiumViewer } from './Viewer.js'

src/modules/history-track/Track.js

@@ -0,0 +1,426 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-19 11:21:48
+ */
+
+import { Cesium } from '../../namespace'
+import { TrackEvent, TrackEventType } from '../event'
+import State from '../state/State'
+import Parse from '../parse/Parse'
+import { Util } from '../utils'
+import { Transform } from '../transform'
+import { heading, distance } from '../math'
+import TrackViewMode from './TrackViewMode'
+
+const DEF_OPTS = {
+  clampToGround: false,
+  clampToTileset: false,
+  interpolationType: 'Linear',
+  interpolationDegree: 2,
+  endDelayTime: 0.5,
+  headingOffset: 0,
+}
+
+const DEF_PATH_STYLE = {
+  width: 2,
+  material: Cesium.Color.ORANGE,
+  clampToGround: true,
+  depthFailMaterial: Cesium.Color.ORANGE.withAlpha(0.8),
+}
+
+class Track {
+  constructor(positions, duration, callback, options) {
+    this._id = Util.uuid()
+    this._bid = undefined
+    this._positions = Parse.parsePositions(positions)
+    this._duration = duration || 20
+    this._callback = callback
+    this._options = {
+      ...DEF_OPTS,
+      ...options,
+    }
+    this._controller = undefined
+    this._sampledPosition = undefined
+    this._velocityOrientation = undefined
+    this._viewed = false
+    this._delegate = new Cesium.Entity()
+    this._pathPositions = []
+    this._path = new Cesium.Entity({
+      show: false,
+      polyline: {
+        positions: new Cesium.CallbackProperty(() => {
+          return this._pathPositions
+        }, false),
+      },
+    })
+    this._positionIndex = 0
+    this._timeLine = []
+    this._startTime = undefined
+    this._endTime = undefined
+    this._trackEvent = new TrackEvent()
+    this._trackEvent.on(TrackEventType.POST_RENDER, this._onPostRender, this)
+    this._trackEvent.on(TrackEventType.ADD, this._onAdd, this)
+    this._trackEvent.on(TrackEventType.REMOVE, this._onRemove, this)
+    this._trackEvent.on(
+      TrackEventType.RESET_TIME_LINE,
+      this._resetTimeLine,
+      this
+    )
+    this._state = State.INITIALIZED
+  }
+
+  get trackId() {
+    return this._id
+  }
+
+  set id(id) {
+    this._bid = id
+  }
+
+  get id() {
+    return this._bid
+  }
+
+  set positions(positions) {
+    this._positions = Parse.parsePositions(positions)
+    this._resetTimeLine({})
+  }
+
+  get positions() {
+    return this._positions
+  }
+
+  set duration(duration) {
+    this._duration = duration
+    this._resetTimeLine({})
+  }
+
+  get duration() {
+    return this._duration
+  }
+
+  set startTime(startTime) {
+    if (startTime instanceof Date) {
+      this._startTime = Cesium.JulianDate.fromDate(startTime)
+    } else {
+      this._startTime = startTime
+    }
+    this._resetTimeLine({})
+  }
+
+  get startTime() {
+    return this._startTime
+  }
+
+  set viewed(viewed) {
+    this._viewed = viewed
+  }
+
+  get viewed() {
+    return this._viewed
+  }
+
+  get trackEvent() {
+    return this._trackEvent
+  }
+
+  get state() {
+    return this._state
+  }
+
+  /**
+   * add to entities
+   * @param controller
+   * @private
+   */
+  _onAdd(controller) {
+    if (!controller) {
+      return false
+    }
+    this._controller = controller
+    this._controller.delegate.add(this._delegate)
+    this._controller.delegate.add(this._path)
+    !this._startTime && (this._startTime = Cesium.JulianDate.now())
+    this._state = State.ADDED
+  }
+
+  /**
+   * remove from entities
+   * @private
+   */
+  _onRemove() {
+    if (!this._controller) {
+      return false
+    }
+    this._controller.delegate.remove(this._delegate)
+    this._controller.delegate.remove(this._path)
+    this._viewed = false
+    this._startTime = undefined
+    this._state = State.REMOVED
+  }
+
+  /**
+   *
+   * @param viewer
+   * @param viewOption
+   * @private
+   */
+  _onPostRender({ viewer, viewOption }) {
+    if (!this._startTime || !this._endTime) {
+      return false
+    }
+    let now = Cesium.JulianDate.now()
+    if (Cesium.JulianDate.lessThanOrEquals(now, this._endTime)) {
+      let p = this._sampledPosition.getValue(now)
+      if (!p) {
+        return false
+      }
+      this._pathPositions.push(p)
+      if (this._options.clampToTileset) {
+        this._delegate.position = viewer.scene.clampToHeight(p, [
+          this._delegate,
+        ])
+      } else {
+        this._delegate.position = p
+      }
+      let orientation = this._velocityOrientation.getValue(now)
+      if (orientation) {
+        let quaternion = Cesium.Quaternion.fromHeadingPitchRoll(
+          new Cesium.HeadingPitchRoll(
+            Cesium.Math.toRadians(this._options.headingOffset || 0),
+            0,
+            0
+          ),
+          new Cesium.Quaternion()
+        )
+        this._delegate.orientation = Cesium.Quaternion.multiply(
+          orientation,
+          quaternion,
+          new Cesium.Quaternion()
+        )
+      }
+      let time = this._timeLine[this._positionIndex]
+      if (time) {
+        let timeDiff = Cesium.JulianDate.secondsDifference(now, time)
+        if (timeDiff >= 0 && timeDiff <= 1) {
+          let position = this._positions[this._positionIndex] || undefined
+          if (position && orientation) {
+            let mat = Cesium.Matrix3.fromQuaternion(orientation)
+            let mat4 = Cesium.Matrix4.fromRotationTranslation(mat, p)
+            let hpr = Cesium.Transforms.fixedFrameToHeadingPitchRoll(mat4)
+            position.heading = Cesium.Math.toDegrees(hpr.heading)
+            position.pitch = Cesium.Math.toDegrees(hpr.pitch)
+            position.roll = Cesium.Math.toDegrees(hpr.roll)
+          }
+          this._callback &&
+            this._callback(
+              position,
+              this._positionIndex + 1 === this._positions.length
+            )
+          this._positionIndex++
+        }
+      }
+    }
+    this._setCameraView(viewer, viewOption)
+  }
+
+  /**
+   * Sets camera position
+   * @param viewer
+   * @param viewOption
+   * @private
+   */
+  _setCameraView(viewer, viewOption) {
+    if (!this._viewed) {
+      return false
+    }
+    let now = Cesium.JulianDate.now()
+    if (Cesium.JulianDate.greaterThan(now, this._endTime)) {
+      viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
+      viewer.delegate.trackedEntity &&
+        (viewer.delegate.trackedEntity = undefined)
+      this._viewed = false
+    } else {
+      let p = this._sampledPosition.getValue(now)
+      let next_p = this._sampledPosition.getValue(
+        Cesium.JulianDate.addSeconds(now, 1 / 60, new Cesium.JulianDate())
+      )
+      if (p && next_p) {
+        if (
+          viewOption?.mode === TrackViewMode.TRACKED &&
+          viewer.delegate?.trackedEntity?.id !== this._delegate?.id
+        ) {
+          viewer.delegate.trackedEntity = this._delegate
+        } else if (viewOption?.mode === TrackViewMode.FP) {
+          viewer.camera.lookAt(
+            p,
+            new Cesium.HeadingPitchRange(
+              heading(p, next_p),
+              Cesium.Math.toRadians(viewOption?.pitch || 0),
+              viewOption?.range || 10
+            )
+          )
+        } else if (viewOption?.mode === TrackViewMode.TP) {
+          viewer.camera.lookAt(
+            p,
+            new Cesium.HeadingPitchRange(
+              0,
+              Cesium.Math.toRadians(viewOption?.pitch || -90),
+              viewOption?.range || 1000
+            )
+          )
+        }
+      }
+    }
+  }
+
+  /**
+   *
+   * @param params
+   * @returns {boolean}
+   * @private
+   */
+  _resetTimeLine(params) {
+    if (!this._startTime || !this._duration || !this._positions?.length) {
+      return false
+    }
+    let interval = 0
+    if (!params?.stopTime && !params?.duration) {
+      let v = distance(this._positions) / this._duration
+      this._timeLine = this._positions.map((item, index, arr) => {
+        if (index !== 0) {
+          interval += distance([arr[index - 1], item]) / v
+        }
+        return Cesium.JulianDate.addSeconds(
+          this._startTime,
+          interval,
+          new Cesium.JulianDate()
+        )
+      })
+      this._pathPositions = []
+      this._positionIndex = 0
+    } else if (params?.stopTime && params?.duration) {
+      this._duration += params.duration
+      this._timeLine = this._timeLine.map((item) => {
+        if (Cesium.JulianDate.greaterThan(item, params.stopTime)) {
+          item = Cesium.JulianDate.addSeconds(
+            item,
+            params.duration,
+            new Cesium.JulianDate()
+          )
+        }
+        return item
+      })
+    }
+    this._sampledPosition = new Cesium.SampledPositionProperty()
+    this._sampledPosition.addSamples(
+      this._timeLine,
+      Transform.transformWGS84ArrayToCartesianArray(this._positions)
+    )
+    this._sampledPosition.forwardExtrapolationType =
+      Cesium.ExtrapolationType.HOLD
+    /// setInterpolationOptions
+    if (this._options.interpolationType === 'Hermite') {
+      this._sampledPosition.setInterpolationOptions({
+        interpolationDegree: this._options.interpolationDegree || 2,
+        interpolationAlgorithm: Cesium.HermitePolynomialApproximation,
+      })
+    } else if (this._options.interpolationType === 'Linear') {
+      this._sampledPosition.setInterpolationOptions({
+        interpolationDegree: this._options.interpolationDegree || 1,
+        interpolationAlgorithm: Cesium.LinearApproximation,
+      })
+    } else if (this._options.interpolationType === 'Lagrange') {
+      this._sampledPosition.setInterpolationOptions({
+        interpolationDegree: this._options.interpolationDegree || 5,
+        interpolationAlgorithm: Cesium.LagrangePolynomialApproximation,
+      })
+    }
+    this._velocityOrientation = new Cesium.VelocityOrientationProperty(
+      this._sampledPosition
+    )
+    this._endTime = Cesium.JulianDate.addSeconds(
+      this._timeLine[this._timeLine.length - 1],
+      this._options.endDelayTime,
+      new Cesium.JulianDate()
+    )
+  }
+
+  /**
+   * Adds Position
+   * @param position
+   * @param duration
+   * @returns {Track}
+   */
+  addPosition(position, duration) {
+    this._positions.push(Parse.parsePosition(position))
+    this._duration += duration
+    this._resetTimeLine({})
+    return this
+  }
+
+  /**
+   * Sets model
+   * @param modelPath
+   * @param style
+   * @returns {Track}
+   */
+  setModel(modelPath, style) {
+    this._delegate.model = {
+      ...style,
+      uri: modelPath,
+      heightReference: this._options.clampToGround
+        ? Cesium.HeightReference.CLAMP_TO_GROUND
+        : Cesium.HeightReference.NONE,
+    }
+    return this
+  }
+
+  /**
+   * Sets billboard
+   * @param icon
+   * @param style
+   * @returns {Track}
+   */
+  setBillboard(icon, style) {
+    this._delegate.billboard = {
+      ...style,
+      image: icon,
+      heightReference: this._options.clampToGround
+        ? Cesium.HeightReference.CLAMP_TO_GROUND
+        : Cesium.HeightReference.NONE,
+    }
+    return this
+  }
+
+  /**
+   * Sets label
+   * @param text
+   * @param style
+   * @returns {Track}
+   */
+  setLabel(text, style) {
+    this._delegate.label = {
+      ...style,
+      text: text,
+      heightReference: this._options.clampToGround
+        ? Cesium.HeightReference.CLAMP_TO_GROUND
+        : Cesium.HeightReference.NONE,
+    }
+    return this
+  }
+
+  /**
+   *
+   * @param visible
+   * @param style
+   * @returns {Track}
+   */
+  setPath(visible, style = {}) {
+    this._path.show = !!visible
+    Util.merge(this._path.polyline, DEF_PATH_STYLE, style)
+    return this
+  }
+}
+
+export default Track

src/modules/history-track/TrackController.js

@@ -0,0 +1,240 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-04-01 10:36:36
+ */
+
+import { Cesium } from '../../namespace'
+import { SceneEventType, TrackEventType } from '../event'
+import State from '../state/State'
+import TrackViewMode from './TrackViewMode'
+
+class TrackController {
+  constructor(viewer) {
+    this._viewer = viewer
+    this._cache = {}
+    this._delegete = new Cesium.CustomDataSource('history-track-layer')
+    this._viewer.dataSources.add(this._delegete)
+    this._activedTrack = undefined
+    this._viewOption = {}
+    this._stopTime = undefined
+    this._state = State.INITIALIZED
+  }
+
+  get delegate() {
+    return this._delegete.entities
+  }
+
+  get state() {
+    return this._state
+  }
+
+  /**
+   * @private
+   */
+  _onPostRender() {
+    Object.keys(this._cache).forEach((key) => {
+      let track = this._cache[key]
+      track.trackEvent &&
+        track.trackEvent.fire(TrackEventType.POST_RENDER, {
+          viewer: this._viewer,
+          viewOption: this._viewOption,
+        })
+    })
+    this._viewer.scene.requestRender()
+  }
+
+  /**
+   *
+   * @param track
+   * @returns {TrackController}
+   */
+  addTrack(track) {
+    if (
+      track &&
+      track.trackEvent &&
+      // eslint-disable-next-line no-prototype-builtins
+      !this._cache.hasOwnProperty(track.trackId)
+    ) {
+      track.trackEvent.fire(TrackEventType.ADD, this)
+      this._cache[track.trackId] = track
+    }
+    return this
+  }
+
+  /**
+   *
+   * @param tracks
+   * @returns {TrackController}
+   */
+  addTracks(tracks) {
+    if (Array.isArray(tracks)) {
+      tracks.forEach((item) => {
+        this.addTrack(item)
+      })
+    }
+    return this
+  }
+
+  /**
+   * Returns a track
+   * @param id
+   * @returns {*|undefined}
+   */
+  getTrack(id) {
+    let filters = this.getTracks().filter((item) => item.id === id)
+    return filters && filters.length ? filters[0] : undefined
+  }
+
+  /**
+   * Removes a track
+   * @param track
+   * @returns {TrackController}
+   */
+  removeTrack(track) {
+    if (
+      track &&
+      track.trackEvent &&
+      // eslint-disable-next-line no-prototype-builtins
+      this._cache.hasOwnProperty(track.trackId)
+    ) {
+      track.trackEvent.fire(TrackEventType.REMOVE, this)
+      delete this._cache[track.trackId]
+    }
+    return this
+  }
+
+  /**
+   *
+   * @returns {*[]}
+   */
+  getTracks() {
+    let result = []
+    Object.keys(this._cache).forEach((key) => {
+      result.push(this._cache[key])
+    })
+    return result
+  }
+
+  /**
+   * Starts play all path
+   * @returns {TrackController}
+   */
+  play() {
+    let now = Cesium.JulianDate.now()
+    Object.keys(this._cache).forEach((key) => {
+      let track = this._cache[key]
+      track.startTime = now
+      track.viewed = false
+    })
+    this._activedTrack = undefined
+    this._stopTime = undefined
+    this._viewer.off(SceneEventType.POST_RENDER, this._onPostRender, this)
+    this._viewer.on(SceneEventType.POST_RENDER, this._onPostRender, this)
+    this._state = State.PLAY
+    return this
+  }
+
+  /**
+   *
+   */
+  pause() {
+    this._stopTime = Cesium.JulianDate.now()
+    this._viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
+    this._viewer.delegate.trackedEntity = undefined
+    this._viewer.off(SceneEventType.POST_RENDER, this._onPostRender, this)
+    this._state = State.PAUSE
+    return this
+  }
+
+  /**
+   *
+   */
+  restore() {
+    if (this._state !== State.PAUSE) {
+      return this
+    }
+    if (this._stopTime) {
+      let now = Cesium.JulianDate.now()
+      Object.keys(this._cache).forEach((key) => {
+        let track = this._cache[key]
+        track.trackEvent.fire(TrackEventType.RESET_TIME_LINE, {
+          stopTime: this._stopTime,
+          duration: Cesium.JulianDate.secondsDifference(now, this._stopTime),
+        })
+      })
+    }
+    this._viewer.off(SceneEventType.POST_RENDER, this._onPostRender, this)
+    this._viewer.on(SceneEventType.POST_RENDER, this._onPostRender, this)
+    this._state = State.PLAY
+    return this
+  }
+
+  // /**
+  //  *
+  //  * @param speed
+  //  * @returns {TrackController}
+  //  */
+  // changeSpeed(speed) {
+  //   this._viewer.clock.multiplier = speed
+  //   return this
+  // }
+
+  /**
+   *
+   * @param track
+   * @param viewOption
+   * @returns {TrackController}
+   */
+  viewTrack(track, viewOption = {}) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (!this._cache.hasOwnProperty(track.trackId)) {
+      throw new Error('TrackController: track does not added ')
+    }
+    this._viewOption = viewOption
+    if (this._activedTrack) {
+      this._activedTrack.viewed = false
+    }
+    track.viewed = true
+    this._activedTrack = track
+    if (viewOption.mode === TrackViewMode.FREE) {
+      this._viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
+      this._viewer.delegate.trackedEntity = undefined
+    }
+    return this
+  }
+
+  /**
+   *
+   * @param track
+   * @returns {TrackController}
+   */
+  releaseTrack(track) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (!this._cache.hasOwnProperty(track.trackId)) {
+      throw new Error('TrackController: track does not added ')
+    }
+    if (track.viewed) {
+      track.viewed = false
+    }
+    this._activedTrack = undefined
+    this._viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY)
+    this._viewer.delegate.trackedEntity = undefined
+    return this
+  }
+
+  /**
+   *
+   * @returns {TrackController}
+   */
+  clear() {
+    Object.keys(this._cache).forEach((key) => {
+      this.removeTrack(this._cache[key])
+    })
+    this._activedTrack && (this._activedTrack.viewed = false)
+    this._activedTrack = undefined
+    this._viewer.off(SceneEventType.POST_RENDER, this._onPostRender, this)
+    return this
+  }
+}
+
+export default TrackController

src/modules/history-track/TrackViewMode.js

@@ -0,0 +1,13 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-05 10:51:13
+ */
+
+const TrackViewMode = {
+  FP: '1',
+  TP: '2',
+  TRACKED: 'tracked',
+  FREE: 'free',
+}
+
+export default TrackViewMode

src/modules/history-track/index.js

@@ -0,0 +1,8 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-04-13 09:32:31
+ */
+
+export { default as TrackController } from './TrackController'
+export { default as Track } from './Track'
+export { default as TrackViewMode } from './TrackViewMode'

src/modules/icons/compass-inner.js

@@ -0,0 +1,26 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-06-06 14:05:25
+ */
+
+const compass_inner = `
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="17px" height="17px" viewBox="0 0 17 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>compass-inner</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
+        <g id="compass-inner" fill-rule="nonzero">
+            <path d="M8.5,16.5 C4.081722,16.5 0.5,12.918278 0.5,8.5 C0.5,4.081722 4.081722,0.5 8.5,0.5 C12.918278,0.5 16.5,4.081722 16.5,8.5 C16.5,12.918278 12.918278,16.5 8.5,16.5 Z M8.5,15.5 C12.3659932,15.5 15.5,12.3659932 15.5,8.5 C15.5,4.63400675 12.3659932,1.5 8.5,1.5 C4.63400675,1.5 1.5,4.63400675 1.5,8.5 C1.5,12.3659932 4.63400675,15.5 8.5,15.5 Z" id="Oval-96"></path>
+            <path d="M9.92599835,7.09066832 C12.7122872,9.87695712 14.3709388,12.5452228 13.4497471,13.4664145 C12.5285555,14.3876061 9.86028979,12.7289545 7.074001,9.94266568 C4.2877122,7.15637688 2.62906055,4.48811119 3.55025221,3.56691953 C4.47144386,2.64572788 7.13970955,4.30437952 9.92599835,7.09066832 Z M9.21889157,7.7977751 C6.92836458,5.50724811 4.52075769,4.01062761 4.25735899,4.27402631 C3.99396029,4.53742501 5.49058078,6.9450319 7.78110778,9.2355589 C10.0716348,11.5260859 12.4792417,13.0227064 12.7426404,12.7593077 C13.0060391,12.495909 11.5094186,10.0883021 9.21889157,7.7977751 Z" id="Oval-96-Copy-2"></path>
+            <path d="M9.92599835,9.94266568 C7.13970955,12.7289545 4.47144386,14.3876061 3.55025221,13.4664145 C2.62906055,12.5452228 4.2877122,9.87695712 7.074001,7.09066832 C9.86028979,4.30437952 12.5285555,2.64572788 13.4497471,3.56691953 C14.3709388,4.48811119 12.7122872,7.15637688 9.92599835,9.94266568 Z M9.21889157,9.2355589 C11.5094186,6.9450319 13.0060391,4.53742501 12.7426404,4.27402631 C12.4792417,4.01062761 10.0716348,5.50724811 7.78110778,7.7977751 C5.49058078,10.0883021 3.99396029,12.495909 4.25735899,12.7593077 C4.52075769,13.0227064 6.92836458,11.5260859 9.21889157,9.2355589 Z" id="Oval-96-Copy-3"></path>
+            <path d="M15.1464466,1.1464466 L14.3453364,1.94755684 L13.9608692,2.33202401 L14.667976,3.03913077 L15.0524431,2.65466362 L15.8535534,1.8535534 L15.1464466,1.1464466 Z M2.29760014,13.995293 L1.85311902,14.4397742 L1.004311,15.2885822 L1.71141776,15.995689 L2.56022581,15.146881 L3.00470698,14.7023998 L2.29760014,13.995293 Z" id="Line"></path>
+            <circle id="Oval-432" cx="16" cy="1" r="1"></circle>
+            <circle id="Oval-432-Copy" cx="1" cy="16" r="1"></circle>
+        </g>
+    </g>
+</svg>
+`
+
+export default compass_inner

src/modules/icons/compass-outer.js

@@ -0,0 +1,29 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-06-05 16:01:22
+ */
+
+const compass_outer = `
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="162px" height="162px" viewBox="0 0 162 162" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 43.2 (39069) - http://www.bohemiancoding.com/sketch -->
+    <title>compass-outer</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill-rule="evenodd">
+        <g id="compass-outer" fill-rule="nonzero">
+            <path d="M80.8410544,161.682109 C36.1937731,161.682109 0,125.488336 0,80.8410544 C0,36.1937731 36.1937731,0 80.8410544,0 C125.488336,0 161.682109,36.1937731 161.682109,80.8410544 C161.682109,125.488336 125.488336,161.682109 80.8410544,161.682109 Z M81.1836011,134.620909 C110.696211,134.620909 134.620909,110.696211 134.620909,81.1836011 C134.620909,51.6709916 110.696211,27.7462941 81.1836011,27.7462941 C51.6709916,27.7462941 27.7462941,51.6709916 27.7462941,81.1836011 C27.7462941,110.696211 51.6709916,134.620909 81.1836011,134.620909 Z" id="Oval-108"></path>
+            <circle id="Oval-74" fill="#FFFFFF" cx="129.493683" cy="127.952092" r="1.54159147"></circle>
+            <circle id="Oval-74-Copy-3" fill="#FFFFFF" cx="129.493683" cy="35.4566038" r="1.54159147"></circle>
+            <circle id="Oval-74-Copy-5" fill="#FFFFFF" cx="30.8318294" cy="127.952092" r="1.54159147"></circle>
+            <circle id="Oval-74-Copy-4" fill="#FFFFFF" cx="30.8318294" cy="35.4566038" r="1.54159147"></circle>
+            <polygon id="N" fill="#FFFFFF" points="84.9318072 23.1238721 84.9318072 13.1321362 82.5623385 13.1321362 82.5623385 19.2984646 77.951866 13.1321362 75.7108625 13.1321362 75.7108625 23.1238721 78.0946053 23.1238721 78.0946053 16.9718176 82.6908037 23.1238721"></polygon>
+            <polygon id="Line" fill="#FFFFFF" points="143.368007 82.1093476 152.617555 82.1093476 152.617555 81.2993476 143.368007 81.2993476"></polygon>
+            <polygon id="Line-Copy-8" fill="#FFFFFF" points="9.24954884 82.1093476 18.4990976 82.1093476 18.4990976 81.2993476 9.24954884 81.2993476"></polygon>
+            <polygon id="Line" fill="#FFFFFF" points="81.2993476 143.368007 81.2993476 152.617555 82.1093476 152.617555 82.1093476 143.368007"></polygon>
+        </g>
+    </g>
+</svg>
+`
+
+export default compass_outer

src/modules/icons/compass-rotation-marker.js

@@ -0,0 +1,22 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-06-06 14:11:56
+ */
+
+const compass_rotation_marker = `
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="53px" height="53px" viewBox="0 0 53 53" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.3 (16044) - http://www.bohemiancoding.com/sketch -->
+    <title>compass-rotation-marker</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="compass-rotation-marker">
+            <path d="M52.4399986,26.2199993 C52.4399986,11.7390936 40.7009051,0 26.2199993,0 C11.7390936,0 0,11.7390936 0,26.2199993 C0,40.7009051 11.7390936,52.4399986 26.2199993,52.4399986 C40.7009051,52.4399986 52.4399986,40.7009051 52.4399986,26.2199993 Z" id="rotator" stroke-opacity="0.135841259" stroke="#E2A549" stroke-width="9" opacity="0.201434235"></path>
+            <path d="M0,26.2199993 C0,11.7390936 11.7390936,0 26.2199993,0 L26.2199993,9 C16.7096563,9 9,16.7096563 9,26.2199993" id="Shape" opacity="0.634561567" fill="#4990E2"></path>
+        </g>
+    </g>
+</svg>
+`
+
+export default compass_rotation_marker

src/modules/icons/decrease.js

@@ -0,0 +1,14 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-06-06 14:18:00
+ */
+
+const decrease = `
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="50px" height="6px" viewBox="0 0 50 6" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.3 (16044) - http://www.bohemiancoding.com/sketch -->
+    <title>decrease</title>
+    <path d="M46.6183575,0.657894737 L3.30112724,0.657894737 C1.44927539,0.657894737 0,1.66880618 0,2.96052632 C0,4.25224645 1.44927539,5.26315789 3.30112724,5.26315789 L46.6988728,5.26315789 C48.5507246,5.26315789 50,4.25224645 50,2.96052632 C49.9194847,1.66880618 48.4702093,0.657894737 46.6183575,0.657894737 L46.6183575,0.657894737 L46.6183575,0.657894737 Z" id="Shape"></path>
+</svg>
+`
+export default decrease

src/modules/icons/increase.js

@@ -0,0 +1,15 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-06-06 14:18:00
+ */
+
+const increase = `
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.3 (16044) - http://www.bohemiancoding.com/sketch -->
+    <title>increase</title>
+    <path d="M0,25 C0,25.3514939 0.131810207,25.659051 0.373462207,25.900703 C0.615114207,26.142355 0.922671379,26.2741652 1.27416517,26.2741652 L23.7258348,26.2741652 L23.7258348,48.7258348 C23.7258348,49.0773286 23.857645,49.3848858 24.099297,49.6265378 C24.3189807,49.8462214 24.6485061,50 25,50 C25.7029877,50 26.2741652,49.4288225 26.2741652,48.7258348 L26.2741652,26.2741652 L48.7258348,26.2741652 C49.4288225,26.2741652 50,25.7029877 50,25 C50,24.2970123 49.4288225,23.7258348 48.7258348,23.7258348 L26.2741652,23.7258348 L26.2741652,1.27416517 C26.2741652,0.571177517 25.7029877,0 25,0 C24.2970123,0 23.7258348,0.571177517 23.7258348,1.27416517 L23.7258348,23.7258348 L1.27416517,23.7258348 C0.571177517,23.7258348 0,24.2970123 0,25 L0,25 L0,25 L0,25 Z" id="Shape"></path>
+</svg>
+`
+
+export default increase

src/modules/icons/index.js

@@ -0,0 +1,26 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-06-05 16:35:22
+ */
+
+import logo from './logo'
+import compass_outer from './compass-outer'
+import compass_inner from './compass-inner'
+import compass_rotation_marker from './compass-rotation-marker'
+import decrease from './decrease'
+import increase from './increase'
+import refresh from './refresh'
+import splitter from './splitter'
+
+const Icons = {
+  logo,
+  compass_outer,
+  compass_inner,
+  compass_rotation_marker,
+  decrease,
+  increase,
+  refresh,
+  splitter,
+}
+
+export default Icons

src/modules/icons/logo.js

@@ -0,0 +1,9 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-12-02 19:59:35
+ */
+
+const logo = `
+data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAG5ElEQVRoQ+2Yf2xVZxnHP89py9qliPe0BUTqBrunuDEBx8QfcxuwRYcxM3HO7Y8JZUNKTweKmWyaGDBZYtwSMmnvuXRKcEMzt0WmwdllE1nclkgsyUaIUM4ZNmKihfbcDjbCpPc85rT3QG1677ltb5UlPf+e932e7/f5vu/zPO8jfMA/+YDjZ4rA/1vBKQWmFBgWAXOnex0Bu4FPAf8Evu3b1vOFgnTZHKHa1LEVgZTtEoLv9NkLfpMjs03hfMa2VucjcdkQSKTdVkGq/ebk2ghswjmxSMh2+Lb10cufgOO9AHRk7OSTw8Gajqu+beUN9GWjgJnq2qZi3JqxrRURATPtbka5w7etL066AjXprmUaGDdhyCI0WAhyHeAjHFPoMgI9lDWyr/Y3X9udD4yZcg8j2qMiewVZhmpjoeiHdiakgJny6tXQLaJ8FZiTA/auCD2q9IBWozILYdZF0KoHBXb2tTT8fDQiNanjjSpyCxr83W9ZsC0uTY+bQE3Ke1BFtwD14dkVpMNQOk63JL1RgbV13RYYxkqEO0S5AfQPasiOzAZrXxzIkqfR8LwixlaBfYEYT2aar/ld0SC2HplmzqzchKHfQpkLfD0u15eUgOl4z4DeiwY/LCSxmXIf8FusXXnP+1DReg5YCGz2beuJooMwbOGYjpDpuPuBlSrcl2m2fjncYV3KS2bJ3heSSqRcW4QUBgv9DdZfCwEzHffPwKfjAjLhLJRw3DaBltEkr3G8jYp+H5gdZFnRv9F6NZH2bso0J98oJqoJxz0gsFyRppF1IG5/UQok0t69ovoMsNu3rfsvVcqumwXje8AqlFcC1Uf7H2z4U5zTkf9n/vTErIELAy+D1BplFTf2Nl0d9kFFfbEE5rR3Xvl+dsbrCvUGZZ/vted3hZYTjrdK0N8DZxR5NGMnHy/KY55FCcdbL2j7WI9SLIEo46jqw5mWhsdC/2bK+xwS7BMkm1X9Qn9Lw5sTAX9JUbdT0HmixvasBq8FlVVHzqyr9yeUhUzHC1Pk9b6dvHow8mnvelRfEEgi+jW/ueHXpQAf2sjVltb/tqdvgfEySqvfkjw50ldhBQ5ouXnMe0+U5/ps6xuD0XeOt4OsV3gkY1s/LhX4Qds73A9Rxr8QeUNEn1aoRfkscLcKbZlma+OYCHy41V1ulHEgyjy1jrc0QDtBXvPt5C2lBB/ZMh33Z8ADw3ugMEsZQn1fs5UcE4EonytlizP2/MNR9Et9dIaDqkl7m1T1J/8eYOa7m6zTQ6q7YeKo8m3rY2MlkBLBLq8om33qm/N7wt4cOOjb1mcmI/q5BHEPor+KimBN2v2RKo+Iysa+lmTb2AjkCkwkp5k6/oML5Zo+27Sgd7IIRMc2LIiGESwPe65CqbXgJTZT3k5EmyIFJgv0cLtmyhtSAMK7sA70dd9uuDmf7xgC7maE7dEd+J8QyF3iQV8i+/3m5O3jrgOJtq4viWG8OJmX9mIRaz36CcrKHxLITSB0t283XGxbxqdAmJfLeQfY5dvWuslQYO72k1Xnqt5/CA2+CzId9ALIId+2wvwf+8W3Eo7bA1T4tmXGWhvDgrrUkeqAikbEuF/hk8CbKnJQVJtGa9fHp4Dj/gMYnMmI6tp879gx4A6r7Vwp18YAWTPYjsBJgXTV+dNPnKus2wuyZGDaFQvjeqDIZ14FEk7YWLFUIWwX7hKkPJALKwpNFQoRCXsoUdaANjLUInSKIXsGtGLPO/ZVmZqUt1pFnxKRx/qakw8XG5RRCSRS7mABi/Jv7sGyY+R7IM5JTXvXx4MBY6UIYdtxF1AO+iJq7PFbks9G+4e9B67FYEncK26433wETolQN7wfMR33JSAcMBV8hNc4b9+uol9G9VZgSc7ZKcIBQJZfhK+1kcSjFxno477dEE46iv5GJWA67pHQgoGs6bWThyJrpuN1g14VXbLa9u6PZIPsUgkGbhQxblDkNtArh9ZLN8JvA9U/XlE9fX/P6tnvjYYqehOHE44+27qzaOS5hXkUOL5FRIZaZeUVhDOonkWkH9gAVAJngekjHB5V0b2GUbGvr2newUJgctPnaCrxkm9bq8YKfjBM+TaZjnu3CMtVWQwsC1PppbVyLhfpEwodUPbsQFnl0bNNc+J7pJFzoZjxTByp2DowaGDrgfLaurmLVINz06undXevnXf+Yms95GEckzn+hgZPFzM+LESiOAJ5LAw9cIL1IPcAM3JHrgfhLdDDiswSdDHIoksm9C8Ce3RAnvI3WWfiIhz3f0IEIuOJ9rdnGEFwp6p+BeQaoA50JoRHjT6gV5VODXh+tCwUB3LSFJiI41LtLYkCpQIzHjtTBMYTtVLumVKglNEcj63/AIrz7E/FBbRAAAAAAElFTkSuQmCC
+`
+export default logo

src/modules/icons/refresh.js

@@ -0,0 +1,15 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-06-06 14:18:00
+ */
+
+const refresh = `
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+    <!-- Generator: Sketch 3.4.3 (16044) - http://www.bohemiancoding.com/sketch -->
+    <title>refresh</title>
+    <path d="M48.2758621,0 C47.2844828,0 46.5086207,0.775193846 46.5086207,1.76571923 L46.5086207,12.2308355 C42.0689655,4.78036173 34.0086207,0 25,0 C11.2068965,0 0,11.1972438 0,25.0215332 C0,38.8458226 11.2068965,50 25,50 C38.7931035,50 50,38.8027562 50,25.0215332 C50,24.0310078 49.2241379,23.2558139 48.2327587,23.2558139 C47.2413793,23.2558139 46.4655172,24.0310078 46.4655172,25.0215332 C46.4655172,36.8647717 36.8103448,46.5116279 24.9568965,46.5116279 C13.1034483,46.5116279 3.49137933,36.8217054 3.49137933,24.9784668 C3.49137933,13.1352283 13.1465517,3.48837212 25,3.48837212 C33.4913793,3.48837212 41.0775862,8.44099913 44.5258621,16.0206718 L32.1551724,16.0206718 C31.1637931,16.0206718 30.3879311,16.7958657 30.3879311,17.7863911 C30.3879311,18.7769164 31.1637931,19.5521103 32.1551724,19.5521103 L48.2327587,19.5521103 C49.2241379,19.5521103 50,18.7769164 50,17.7863911 L50,1.72265288 C50,0.775193846 49.2241379,0 48.2758621,0 L48.2758621,0 L48.2758621,0 Z" id="Shape"></path>
+</svg>
+`
+
+export default refresh

src/modules/icons/splitter.js

@@ -0,0 +1,13 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-06-06 14:18:00
+ */
+
+const splitter = `
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="19px" height="28px" viewBox="0 0 19 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <path d="M0.6551724,2.3448276 L0.6551724,25.6551724 C0.6551724,26.6454761 1.4579722,27.4482759 2.4482759,27.4482759 C3.4385796,27.4482759 4.2413793,26.6454761 4.2413793,25.6551724 L4.2413793,2.3448276 C4.2413793,1.3545239 3.4385796,0.5517241 2.4482759,0.5517241 C1.4579722,0.5517241 0.6551724,1.3545239 0.6551724,2.3448276 L0.6551724,2.3448276 Z M7.6551724,2.3448276 L7.6551724,25.6551724 C7.6551724,26.6454761 8.4579722,27.4482759 9.4482759,27.4482759 C10.4385796,27.4482759 11.2413793,26.6454761 11.2413793,25.6551724 L11.2413793,2.3448276 C11.2413793,1.3545239 10.4385796,0.5517241 9.4482759,0.5517241 C8.4579722,0.5517241 7.6551724,1.3545239 7.6551724,2.3448276 L7.6551724,2.3448276 Z M14.6551724,2.3448276 L14.6551724,25.6551724 C14.6551724,26.6454761 15.4579722,27.4482759 16.4482759,27.4482759 C17.4385796,27.4482759 18.2413793,26.6454761 18.2413793,25.6551724 L18.2413793,2.3448276 C18.2413793,1.3545239 17.4385796,0.5517241 16.4482759,0.5517241 C15.4579722,0.5517241 14.6551724,1.3545239 14.6551724,2.3448276 L14.6551724,2.3448276 Z" id="splitter"></path>
+</svg>
+`
+
+export default splitter

src/modules/imagery/ImageryLayerFactory.js

@@ -0,0 +1,211 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-21 15:54:56
+ */
+
+import { Cesium } from '../../namespace'
+import ImageryType from './ImageryType'
+import AmapImageryProvider from './provider/AmapImageryProvider'
+import BaiduImageryProvider from './provider/BaiduImageryProvider'
+import GoogleImageryProvider from './provider/GoogleImageryProvider'
+import TdtImageryProvider from './provider/TdtImageryProvider'
+import TencentImageryProvider from './provider/TencentImageryProvider'
+
+class ImageryLayerFactory {
+  /**
+   * Create amap image layer
+   * @param options
+   * @returns {AmapImageryProvider}
+   */
+  static createAmapImageryLayer(options) {
+    return new AmapImageryProvider(options)
+  }
+
+  /**
+   * Create baidu image layer
+   * @param options
+   * @returns {BaiduImageryProvider}
+   */
+  static createBaiduImageryLayer(options) {
+    return new BaiduImageryProvider(options)
+  }
+
+  /**
+   * Create google image layer
+   * @param options
+   * @returns {GoogleImageryProvider}
+   */
+  static createGoogleImageryLayer(options) {
+    return new GoogleImageryProvider(options)
+  }
+
+  /**
+   * Create tdt image layer
+   * @param options
+   * @returns {TdtImageryProvider}
+   */
+  static createTdtImageryLayer(options) {
+    return new TdtImageryProvider(options)
+  }
+
+  /**
+   * Create tencent image layer
+   * @param options
+   * @returns {TencentImageryProvider}
+   */
+  static createTencentImageryLayer(options) {
+    return new TencentImageryProvider(options)
+  }
+
+  /**
+   * Create arcgis image layer
+   * @param options
+   * @returns {module:cesium.ArcGisMapServerImageryProvider}
+   */
+  static createArcGisImageryLayer(options) {
+    return new Cesium.ArcGisMapServerImageryProvider(options)
+  }
+
+  /**
+   * Create single tile image layer
+   * @param options
+   * @returns {module:cesium.SingleTileImageryProvider}
+   */
+  static createSingleTileImageryLayer(options) {
+    return new Cesium.SingleTileImageryProvider(options)
+  }
+
+  /**
+   * Create WMS image layer
+   * @param options
+   * @returns {module:cesium.WebMapServiceImageryProvider}
+   */
+  static createWMSImageryLayer(options) {
+    return new Cesium.WebMapServiceImageryProvider(options)
+  }
+
+  /**
+   * Create WMTS image layer
+   * @param options
+   * @returns {module:cesium.WebMapTileServiceImageryProvider}
+   */
+  static createWMTSImageryLayer(options) {
+    return new Cesium.WebMapTileServiceImageryProvider(options)
+  }
+
+  /**
+   * Create xyz image layer
+   * @param options
+   * @returns {module:cesium.UrlTemplateImageryProvider}
+   */
+  static createXYZImageryLayer(options) {
+    return new Cesium.UrlTemplateImageryProvider(options)
+  }
+
+  /**
+   * Create coord image layer
+   * @param options
+   * @returns {module:cesium.TileCoordinatesImageryProvider}
+   */
+  static createCoordImageryLayer(options) {
+    return new Cesium.TileCoordinatesImageryProvider(options)
+  }
+
+  /**
+   * Create grid image layer
+   * @param options
+   * @returns {module:cesium.GridImageryProvider}
+   */
+  static createGridImageryLayer(options) {
+    return new Cesium.GridImageryProvider(options)
+  }
+
+  /**
+   * Create mapbox image layer
+   * @param options
+   * @returns {module:cesium.MapboxImageryProvider}
+   */
+  static createMapboxImageryLayer(options) {
+    return new Cesium.MapboxImageryProvider(options)
+  }
+
+  /**
+   * Create mapbox style image layer
+   * @param options
+   * @returns {module:cesium.MapboxStyleImageryProvider}
+   */
+  static createMapboxStyleImageryLayer(options) {
+    return new Cesium.MapboxStyleImageryProvider(options)
+  }
+
+  /**
+   * Create TMS image layer
+   * @param options
+   * @returns {module:cesium.TileMapServiceImageryProvider}
+   */
+  static createTMSImageryLayer(options) {
+    return new Cesium.TileMapServiceImageryProvider(options)
+  }
+
+  /**
+   * Create Imagery Layer
+   * @param type
+   * @param options
+   * @returns {any}
+   */
+  static createImageryLayer(type, options) {
+    let imageryLayer = undefined
+    switch (type) {
+      case ImageryType.AMAP:
+        imageryLayer = this.createAmapImageryLayer(options)
+        break
+      case ImageryType.BAIDU:
+        imageryLayer = this.createBaiduImageryLayer(options)
+        break
+      case ImageryType.GOOGLE:
+        imageryLayer = this.createGoogleImageryLayer(options)
+        break
+      case ImageryType.TDT:
+        imageryLayer = this.createTdtImageryLayer(options)
+        break
+      case ImageryType.TENCENT:
+        imageryLayer = this.createTencentImageryLayer(options)
+        break
+      case ImageryType.ARCGIS:
+        imageryLayer = this.createArcGisImageryLayer(options)
+        break
+      case ImageryType.SINGLE_TILE:
+        imageryLayer = this.createSingleTileImageryLayer(options)
+        break
+      case ImageryType.WMS:
+        imageryLayer = this.createWMSImageryLayer(options)
+        break
+      case ImageryType.WMTS:
+        imageryLayer = this.createWMTSImageryLayer(options)
+        break
+      case ImageryType.XYZ:
+        imageryLayer = this.createXYZImageryLayer(options)
+        break
+      case ImageryType.COORD:
+        imageryLayer = this.createCoordImageryLayer(options)
+        break
+      case ImageryType.GRID:
+        imageryLayer = this.createGridImageryLayer(options)
+        break
+      case ImageryType.MAPBOX:
+        imageryLayer = this.createMapboxImageryLayer(options)
+        break
+      case ImageryType.MAPBOX_STYLE:
+        imageryLayer = this.createMapboxStyleImageryLayer(options)
+        break
+      case ImageryType.TMS:
+        imageryLayer = this.createTMSImageryLayer(options)
+        break
+      default:
+        break
+    }
+    return imageryLayer
+  }
+}
+
+export default ImageryLayerFactory

src/modules/imagery/ImageryType.js

@@ -0,0 +1,19 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-05-10 08:15:36
+ */
+
+let ImageryType = {
+  ARCGIS: 'arcgis',
+  SINGLE_TILE: 'single_tile',
+  WMS: 'wms',
+  WMTS: 'wmts',
+  XYZ: 'xyz',
+  COORD: 'coord',
+  GRID: 'grid',
+  MAPBOX: 'mapbox',
+  MAPBOX_STYLE: 'mapbox_style',
+  TMS: 'tms',
+}
+
+export default ImageryType

src/modules/imagery/index.js

@@ -0,0 +1,7 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-03-14 00:31:46
+ */
+
+export { default as ImageryType } from './ImageryType'
+export { default as ImageryLayerFactory } from './ImageryLayerFactory'

src/modules/imagery/projection/BaiduMercatorProjection.js

@@ -0,0 +1,414 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-01-30 22:41:41
+ */
+
+const EARTH_RADIUS = 6370996.81
+const MC_BAND = [12890594.86, 8362377.87, 5591021, 3481989.83, 1678043.12, 0]
+const LL_BAND = [75, 60, 45, 30, 15, 0]
+const MC2LL = [
+  [
+    1.410526172116255e-8, 8.98305509648872e-6, -1.9939833816331,
+    2.009824383106796e2, -1.872403703815547e2, 91.6087516669843,
+    -23.38765649603339, 2.57121317296198, -0.03801003308653, 1.73379812e7,
+  ],
+  [
+    -7.435856389565537e-9, 8.983055097726239e-6, -0.78625201886289,
+    96.32687599759846, -1.85204757529826, -59.36935905485877, 47.40033549296737,
+    -16.50741931063887, 2.28786674699375, 1.026014486e7,
+  ],
+  [
+    -3.030883460898826e-8, 8.98305509983578e-6, 0.30071316287616,
+    59.74293618442277, 7.357984074871, -25.38371002664745, 13.45380521110908,
+    -3.29883767235584, 0.32710905363475, 6.85681737e6,
+  ],
+  [
+    -1.981981304930552e-8, 8.983055099779535e-6, 0.03278182852591,
+    40.31678527705744, 0.65659298677277, -4.44255534477492, 0.85341911805263,
+    0.12923347998204, -0.04625736007561, 4.48277706e6,
+  ],
+  [
+    3.09191371068437e-9, 8.983055096812155e-6, 0.00006995724062,
+    23.10934304144901, -0.00023663490511, -0.6321817810242, -0.00663494467273,
+    0.03430082397953, -0.00466043876332, 2.5551644e6,
+  ],
+  [
+    2.890871144776878e-9, 8.983055095805407e-6, -0.00000003068298,
+    7.47137025468032, -0.00000353937994, -0.02145144861037, -0.00001234426596,
+    0.00010322952773, -0.00000323890364, 8.260885e5,
+  ],
+]
+const LL2MC = [
+  [
+    -0.0015702102444, 1.113207020616939e5, 1.704480524535203e15,
+    -1.033898737604234e16, 2.611266785660388e16, -3.51496691766537e16,
+    2.659570071840392e16, -1.072501245418824e16, 1.800819912950474e15, 82.5,
+  ],
+  [
+    8.277824516172526e-4, 1.113207020463578e5, 6.477955746671608e8,
+    -4.082003173641316e9, 1.077490566351142e10, -1.517187553151559e10,
+    1.205306533862167e10, -5.124939663577472e9, 9.133119359512032e8, 67.5,
+  ],
+  [
+    0.00337398766765, 1.113207020202162e5, 4.481351045890365e6,
+    -2.339375119931662e7, 7.968221547186455e7, -1.159649932797253e8,
+    9.723671115602145e7, -4.366194633752821e7, 8.477230501135234e6, 52.5,
+  ],
+  [
+    0.00220636496208, 1.113207020209128e5, 5.175186112841131e4,
+    3.796837749470245e6, 9.920137397791013e5, -1.22195221711287e6,
+    1.340652697009075e6, -6.209436990984312e5, 1.444169293806241e5, 37.5,
+  ],
+  [
+    -3.441963504368392e-4, 1.113207020576856e5, 2.782353980772752e2,
+    2.485758690035394e6, 6.070750963243378e3, 5.482118345352118e4,
+    9.540606633304236e3, -2.71055326746645e3, 1.405483844121726e3, 22.5,
+  ],
+  [
+    -3.218135878613132e-4, 1.113207020701615e5, 0.00369383431289,
+    8.237256402795718e5, 0.46104986909093, 2.351343141331292e3,
+    1.58060784298199, 8.77738589078284, 0.37238884252424, 7.45,
+  ],
+]
+
+class BaiduMercatorProjection {
+  constructor() {
+    this.isWgs84 = false
+  }
+
+  /**
+   *
+   * @param point1
+   * @param point2
+   * @returns {number}
+   */
+  getDistanceByMC(point1, point2) {
+    if (!point1 || !point2) {
+      return 0
+    }
+    point1 = this.convertMC2LL(point1)
+    if (!point1) {
+      return 0
+    }
+    let x1 = this.toRadians(point1['lng'])
+    let y1 = this.toRadians(point1['lat'])
+    point2 = this.convertMC2LL(point2)
+    if (!point2) {
+      return 0
+    }
+    let x2 = this.toRadians(point2['lng'])
+    let y2 = this.toRadians(point2['lat'])
+    return this.getDistance(x1, x2, y1, y2)
+  }
+
+  /**
+   * Calculate the distance between two points according to the latitude and longitude coordinates
+   * @param point1
+   * @param point2
+   * @returns {number|*}
+   */
+  getDistanceByLL(point1, point2) {
+    if (!point1 || !point2) {
+      return 0
+    }
+    point1['lng'] = this.getLoop(point1['lng'], -180, 180)
+    point1['lat'] = this.getRange(point1['lat'], -74, 74)
+    point2['lng'] = this.getLoop(point2['lng'], -180, 180)
+    point2['lat'] = this.getRange(point2['lat'], -74, 74)
+    let x1 = this.toRadians(point1['lng'])
+    let y1 = this.toRadians(point1['lat'])
+    let x2 = this.toRadians(point2['lng'])
+    let y2 = this.toRadians(point2['lat'])
+    return this.getDistance(x1, x2, y1, y2)
+  }
+
+  /**
+   * The plane cartesian coordinates are converted to latitude and longitude coordinates
+   * @param point
+   * @returns {Point|{lng: number, lat: number}}
+   */
+  convertMC2LL(point) {
+    if (!point) {
+      return { lng: 0, lat: 0 }
+    }
+    let lnglat = {}
+    if (this.isWgs84) {
+      lnglat.lng = (point.lng / 20037508.34) * 180
+      let mmy = (point.lat / 20037508.34) * 180
+      lnglat.lat =
+        (180 / Math.PI) *
+        (2 * Math.atan(Math.exp((mmy * Math.PI) / 180)) - Math.PI / 2)
+      return {
+        lng: lnglat['lng'].toFixed(6),
+        lat: lnglat['lat'].toFixed(6),
+      }
+    }
+
+    let temp = {
+      lng: Math.abs(point['lng']),
+      lat: Math.abs(point['lat']),
+    }
+
+    let factor = undefined
+    for (let i = 0; i < MC_BAND.length; i++) {
+      if (temp['lat'] >= MC_BAND[i]) {
+        factor = MC2LL[i]
+        break
+      }
+    }
+    lnglat = this.convertor(point, factor)
+    return {
+      lng: lnglat['lng'].toFixed(6),
+      lat: lnglat['lat'].toFixed(6),
+    }
+  }
+
+  /**
+   * The latitude and longitude coordinates are converted to plane cartesian coordinates
+   * @param point
+   * @returns {{lng: number, lat: number}|*}
+   */
+  convertLL2MC(point) {
+    if (!point) {
+      return { lng: 0, lat: 0 }
+    }
+    if (
+      point['lng'] > 180 ||
+      point['lng'] < -180 ||
+      point['lat'] > 90 ||
+      point['lat'] < -90
+    ) {
+      return point
+    }
+
+    if (this.isWgs84) {
+      let mercator = {}
+      let earthRad = 6378137.0
+      mercator.lng = ((point.lng * Math.PI) / 180) * earthRad
+      let a = (point.lat * Math.PI) / 180
+      mercator.lat =
+        (earthRad / 2) * Math.log((1.0 + Math.sin(a)) / (1.0 - Math.sin(a)))
+
+      return {
+        lng: parseFloat(mercator['lng'].toFixed(2)),
+        lat: parseFloat(mercator['lat'].toFixed(2)),
+      }
+    }
+
+    point['lng'] = this.getLoop(point['lng'], -180, 180)
+    point['lat'] = this.getRange(point['lat'], -74, 74)
+    let temp = { lng: point['lng'], lat: point['lat'] }
+    let factor = undefined
+    for (let i = 0; i < LL_BAND.length; i++) {
+      if (temp['lat'] >= LL_BAND[i]) {
+        factor = LL2MC[i]
+        break
+      }
+    }
+    if (!factor) {
+      for (let i = 0; i < LL_BAND.length; i++) {
+        if (temp['lat'] <= -LL_BAND[i]) {
+          factor = LL2MC[i]
+          break
+        }
+      }
+    }
+    let mc = this.convertor(point, factor)
+    return {
+      lng: parseFloat(mc['lng'].toFixed(2)),
+      lat: parseFloat(mc['lat'].toFixed(2)),
+    }
+  }
+
+  /**
+   *
+   * @param fromPoint
+   * @param factor
+   * @returns {{lng: *, lat: *}}
+   */
+  convertor(fromPoint, factor) {
+    if (!fromPoint || !factor) {
+      return { lng: 0, lat: 0 }
+    }
+    let x = factor[0] + factor[1] * Math.abs(fromPoint['lng'])
+    let temp = Math.abs(fromPoint['lat']) / factor[9]
+    let y =
+      factor[2] +
+      factor[3] * temp +
+      factor[4] * temp * temp +
+      factor[5] * temp * temp * temp +
+      factor[6] * temp * temp * temp * temp +
+      factor[7] * temp * temp * temp * temp * temp +
+      factor[8] * temp * temp * temp * temp * temp * temp
+    x *= fromPoint['lng'] < 0 ? -1 : 1
+    y *= fromPoint['lat'] < 0 ? -1 : 1
+    return {
+      lng: x,
+      lat: y,
+    }
+  }
+
+  /**
+   *
+   * @param x1
+   * @param x2
+   * @param y1
+   * @param y2
+   * @returns {number}
+   */
+  getDistance(x1, x2, y1, y2) {
+    return (
+      EARTH_RADIUS *
+      Math.acos(
+        Math.sin(y1) * Math.sin(y2) +
+          Math.cos(y1) * Math.cos(y2) * Math.cos(x2 - x1)
+      )
+    )
+  }
+
+  /**
+   *
+   * @param deg
+   * @returns {number}
+   */
+  toRadians(deg) {
+    return (Math.PI * deg) / 180
+  }
+
+  /**
+   *
+   * @param rad
+   * @returns {number}
+   */
+  toDegrees(rad) {
+    return (180 * rad) / Math.PI
+  }
+
+  /**
+   *
+   * @param v
+   * @param a
+   * @param b
+   * @returns {number}
+   */
+  getRange(v, a, b) {
+    if (a != null) {
+      v = Math.max(v, a)
+    }
+    if (b != null) {
+      v = Math.min(v, b)
+    }
+    return v
+  }
+
+  /**
+   *
+   * @param v
+   * @param a
+   * @param b
+   * @returns {*}
+   */
+  getLoop(v, a, b) {
+    while (v > b) {
+      v -= b - a
+    }
+    while (v < a) {
+      v += b - a
+    }
+    return v
+  }
+
+  /**
+   *
+   * @param point
+   * @returns {{lng: number, lat: number}|*}
+   */
+  lngLatToMercator(point) {
+    return this.convertLL2MC(point)
+  }
+
+  /**
+   *
+   * @param point
+   * @returns {{x: (number|*), y: (number|*)}}
+   */
+  lngLatToPoint(point) {
+    let mercator = this.convertLL2MC(point)
+    return {
+      x: mercator['lng'],
+      y: mercator['lat'],
+    }
+  }
+
+  /**
+   * WebMercator transforms to latitude and longitude
+   * @param point
+   * @returns {Point|{lng: number, lat: number}}
+   */
+  mercatorToLngLat(point) {
+    return this.convertMC2LL(point)
+  }
+
+  /**
+   *
+   * @param point
+   * @returns {Point|{lng: number, lat: number}}
+   */
+  pointToLngLat(point) {
+    let mercator = { lng: point.x, lat: point.y }
+    return this.convertMC2LL(mercator)
+  }
+
+  /**
+   * Latitude and longitude coordinates  transforms to  pixel coordinates
+   * @param point
+   * @param zoom
+   * @param mapCenter
+   * @param mapSize
+   * @returns {{x: number, y: number}}
+   */
+  pointToPixel(point, zoom, mapCenter, mapSize) {
+    if (!point) {
+      return { x: 0, y: 0 }
+    }
+    point = this.lngLatToMercator(point)
+    let zoomUnits = this.getZoomUnits(zoom)
+    let x = Math.round(
+      (point['lng'] - mapCenter['lng']) / zoomUnits + mapSize.width / 2
+    )
+    let y = Math.round(
+      (mapCenter['lat'] - point['lat']) / zoomUnits + mapSize.height / 2
+    )
+    return { x, y }
+  }
+
+  /**
+   * Pixel coordinates transforms to latitude and longitude coordinates
+   * @param pixel
+   * @param zoom
+   * @param mapCenter
+   * @param mapSize
+   * @returns {Point|{lng: number, lat: number}}
+   */
+  pixelToPoint(pixel, zoom, mapCenter, mapSize) {
+    if (!pixel) {
+      return { lng: 0, lat: 0 }
+    }
+    let zoomUnits = this.getZoomUnits(zoom)
+    let lng = mapCenter['lng'] + zoomUnits * (pixel.x - mapSize.width / 2)
+    let lat = mapCenter['lat'] - zoomUnits * (pixel.y - mapSize.height / 2)
+    let point = { lng, lat }
+    return this.mercatorToLngLat(point)
+  }
+
+  /**
+   *
+   * @param zoom
+   * @returns {number}
+   */
+  getZoomUnits(zoom) {
+    return Math.pow(2, 18 - zoom)
+  }
+}
+
+export default BaiduMercatorProjection

src/modules/imagery/provider/AmapImageryProvider.js

@@ -0,0 +1,34 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-15 20:31:28
+ */
+
+import { Cesium } from '@dc-modules/namespace'
+import ImageryType from '../ImageryType'
+import AmapMercatorTilingScheme from '../tiling-scheme/AmapMercatorTilingScheme'
+
+const TILE_URL = {
+  img: '//webst{s}.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}',
+  elec: '//webrd{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
+  cva: '//webst{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}',
+}
+
+class AmapImageryProvider extends Cesium.UrlTemplateImageryProvider {
+  constructor(options = {}) {
+    options['url'] =
+      options.url ||
+      [
+        options.protocol || '',
+        TILE_URL[options.style] || TILE_URL['elec'],
+      ].join('')
+    options['subdomains'] = options.subdomains || ['01', '02', '03', '04']
+    if (options.crs === 'WGS84') {
+      options['tilingScheme'] = new AmapMercatorTilingScheme()
+    }
+    super(options)
+  }
+}
+
+ImageryType.AMAP = 'amap'
+
+export default AmapImageryProvider

src/modules/imagery/provider/BaiduImageryProvider.js

@@ -0,0 +1,176 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-15 20:27:27
+ */
+
+import { Cesium } from '../../../namespace'
+import ImageryType from '../ImageryType'
+import BaiduMercatorTilingScheme from '../tiling-scheme/BaiduMercatorTilingScheme'
+
+const TILE_URL = {
+  img: '//shangetu{s}.map.bdimg.com/it/u=x={x};y={y};z={z};v=009;type=sate&fm=46',
+  vec: '//online{s}.map.bdimg.com/tile/?qt=tile&x={x}&y={y}&z={z}&styles=sl&v=020',
+  custom:
+    '//api{s}.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&scale=1&customid={style}',
+  traffic:
+    '//its.map.baidu.com:8002/traffic/TrafficTileService?time={time}&label={labelStyle}&v=016&level={z}&x={x}&y={y}&scaler=2',
+}
+
+class BaiduImageryProvider {
+  constructor(options = {}) {
+    this._url =
+      options.url ||
+      [
+        options.protocol || '',
+        TILE_URL[options.style] || TILE_URL['custom'],
+      ].join('')
+    this._labelStyle = options.labelStyle || 'web2D'
+    this._tileWidth = 256
+    this._tileHeight = 256
+    this._maximumLevel = 18
+    this._crs = options.crs || 'BD09'
+    if (options.crs === 'WGS84') {
+      let resolutions = []
+      for (let i = 0; i < 19; i++) {
+        resolutions[i] = 256 * Math.pow(2, 18 - i)
+      }
+      this._tilingScheme = new BaiduMercatorTilingScheme({
+        resolutions,
+        rectangleSouthwestInMeters: new Cesium.Cartesian2(
+          -20037726.37,
+          -12474104.17
+        ),
+        rectangleNortheastInMeters: new Cesium.Cartesian2(
+          20037726.37,
+          12474104.17
+        ),
+      })
+    } else {
+      this._tilingScheme = new Cesium.WebMercatorTilingScheme({
+        rectangleSouthwestInMeters: new Cesium.Cartesian2(-33554054, -33746824),
+        rectangleNortheastInMeters: new Cesium.Cartesian2(33554054, 33746824),
+      })
+    }
+    this._rectangle = this._tilingScheme.rectangle
+    this._credit = undefined
+    this._token = undefined
+    this._style = options.style || 'normal'
+    this._errorEvent = new Cesium.Event()
+  }
+
+  get url() {
+    return this._url
+  }
+
+  get token() {
+    return this._token
+  }
+
+  get tileWidth() {
+    if (!this.ready) {
+      throw new Cesium.DeveloperError(
+        'tileWidth must not be called before the imagery provider is ready.'
+      )
+    }
+    return this._tileWidth
+  }
+
+  get tileHeight() {
+    if (!this.ready) {
+      throw new Cesium.DeveloperError(
+        'tileHeight must not be called before the imagery provider is ready.'
+      )
+    }
+    return this._tileHeight
+  }
+
+  get maximumLevel() {
+    if (!this.ready) {
+      throw new Cesium.DeveloperError(
+        'maximumLevel must not be called before the imagery provider is ready.'
+      )
+    }
+    return this._maximumLevel
+  }
+
+  get minimumLevel() {
+    if (!this.ready) {
+      throw new Cesium.DeveloperError(
+        'minimumLevel must not be called before the imagery provider is ready.'
+      )
+    }
+    return 0
+  }
+
+  get tilingScheme() {
+    if (!this.ready) {
+      throw new Cesium.DeveloperError(
+        'tilingScheme must not be called before the imagery provider is ready.'
+      )
+    }
+    return this._tilingScheme
+  }
+
+  get rectangle() {
+    if (!this.ready) {
+      throw new Cesium.DeveloperError(
+        'rectangle must not be called before the imagery provider is ready.'
+      )
+    }
+    return this._rectangle
+  }
+
+  get ready() {
+    return !!this._url
+  }
+
+  get credit() {
+    return this._credit
+  }
+
+  get hasAlphaChannel() {
+    return true
+  }
+
+  get errorEvent() {
+    return this._errorEvent
+  }
+
+  getTileCredits(x, y, level) {}
+
+  /**
+   * Request Image
+   * @param x
+   * @param y
+   * @param level
+   * @returns {Promise<HTMLImageElement | HTMLCanvasElement>}
+   */
+  requestImage(x, y, level) {
+    if (!this.ready) {
+      throw new Cesium.DeveloperError(
+        'requestImage must not be called before the imagery provider is ready.'
+      )
+    }
+    let xTiles = this._tilingScheme.getNumberOfXTilesAtLevel(level)
+    let yTiles = this._tilingScheme.getNumberOfYTilesAtLevel(level)
+    let url = this._url
+      .replace('{z}', level)
+      .replace('{s}', String(1))
+      .replace('{style}', this._style)
+      .replace('{labelStyle}', this._labelStyle)
+      .replace('{time}', String(new Date().getTime()))
+
+    if (this._crs === 'WGS84') {
+      url = url.replace('{x}', String(x)).replace('{y}', String(-y))
+    } else {
+      url = url
+        .replace('{x}', String(x - xTiles / 2))
+        .replace('{y}', String(yTiles / 2 - y - 1))
+    }
+    return Cesium.ImageryProvider.loadImage(this, url)
+  }
+}
+
+ImageryType.BAIDU = 'baidu'
+
+export default BaiduImageryProvider

src/modules/imagery/provider/GoogleImageryProvider.js

@@ -0,0 +1,30 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-21 16:06:14
+ */
+
+import { Cesium } from '../../../namespace'
+import ImageryType from '../ImageryType'
+
+const TILE_URL = {
+  img: '//mt{s}.google.cn/vt/lyrs=s&hl=zh-CN&x={x}&y={y}&z={z}&s=Gali',
+  elec: '//mt{s}.google.cn/vt/lyrs=m@207000000&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Galile',
+  ter: '//mt{s}.google.cn/vt/lyrs=t@131,r@227000000&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}&s=Galile',
+}
+
+class GoogleImageryProvider extends Cesium.UrlTemplateImageryProvider {
+  constructor(options = {}) {
+    options['url'] =
+      options.url ||
+      [
+        options.protocol || '',
+        TILE_URL[options.style] || TILE_URL['elec'],
+      ].join('')
+    options['subdomains'] = options.subdomains || ['1', '2', '3']
+    super(options)
+  }
+}
+
+ImageryType.GOOGLE = 'google'
+
+export default GoogleImageryProvider

src/modules/imagery/provider/TdtImageryProvider.js

@@ -0,0 +1,30 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-15 20:31:46
+ */
+
+import { Cesium } from '../../../namespace'
+import ImageryType from '../ImageryType'
+
+const MAP_URL =
+  '//t{s}.tianditu.gov.cn/DataServer?T={style}_w&x={x}&y={y}&l={z}&tk={key}'
+
+class TdtImageryProvider extends Cesium.UrlTemplateImageryProvider {
+  constructor(options = {}) {
+    super({
+      url: [
+        options.protocol || '',
+        MAP_URL.replace(/\{style\}/g, options.style || 'vec').replace(
+          /\{key\}/g,
+          options.key || ''
+        ),
+      ].join(''),
+      subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
+      maximumLevel: 18,
+    })
+  }
+}
+
+ImageryType.TDT = 'tdt'
+
+export default TdtImageryProvider

src/modules/imagery/provider/TencentImageryProvider.js

@@ -0,0 +1,40 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-21 18:10:47
+ */
+
+import { Cesium } from '../../../namespace'
+import ImageryType from '../ImageryType'
+
+const TILE_URL = {
+  img: '//p{s}.map.gtimg.com/sateTiles/{z}/{sx}/{sy}/{x}_{reverseY}.jpg?version=400',
+  elec: '//rt{s}.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid={style}&scene=0&version=347',
+}
+
+class TencentImageryProvider extends Cesium.UrlTemplateImageryProvider {
+  constructor(options = {}) {
+    let url =
+      options.url ||
+      [
+        options.protocol || '',
+        TILE_URL[options.style] || TILE_URL['elec'],
+      ].join('')
+    options['url'] = url.replace('{style}', options.style || 1)
+    options['subdomains'] = options.subdomains || ['1', '2', '3']
+    if (options.style === 'img') {
+      options['customTags'] = {
+        sx: (imageryProvider, x, y, level) => {
+          return x >> 4
+        },
+        sy: (imageryProvider, x, y, level) => {
+          return ((1 << level) - y) >> 4
+        },
+      }
+    }
+    super(options)
+  }
+}
+
+ImageryType.TENCENT = 'tencent'
+
+export default TencentImageryProvider

src/modules/imagery/tiling-scheme/AmapMercatorTilingScheme.js

@@ -0,0 +1,40 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-01-31 22:07:05
+ */
+
+import { Cesium } from '../../../namespace'
+import { CoordTransform } from '../../transform'
+
+class AmapMercatorTilingScheme extends Cesium.WebMercatorTilingScheme {
+  constructor(options) {
+    super(options)
+    let projection = new Cesium.WebMercatorProjection()
+    this._projection.project = function (cartographic, result) {
+      result = CoordTransform.WGS84ToGCJ02(
+        Cesium.Math.toDegrees(cartographic.longitude),
+        Cesium.Math.toDegrees(cartographic.latitude)
+      )
+      result = projection.project(
+        new Cesium.Cartographic(
+          Cesium.Math.toRadians(result[0]),
+          Cesium.Math.toRadians(result[1])
+        )
+      )
+      return new Cesium.Cartesian2(result.x, result.y)
+    }
+    this._projection.unproject = function (cartesian, result) {
+      let cartographic = projection.unproject(cartesian)
+      result = CoordTransform.GCJ02ToWGS84(
+        Cesium.Math.toDegrees(cartographic.longitude),
+        Cesium.Math.toDegrees(cartographic.latitude)
+      )
+      return new Cesium.Cartographic(
+        Cesium.Math.toRadians(result[0]),
+        Cesium.Math.toRadians(result[1])
+      )
+    }
+  }
+}
+
+export default AmapMercatorTilingScheme

src/modules/imagery/tiling-scheme/BaiduMercatorTilingScheme.js

@@ -0,0 +1,102 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-01-31 19:22:04
+ */
+
+import { Cesium } from '../../../namespace'
+import { CoordTransform } from '../../transform'
+import BaiduMercatorProjection from '../projection/BaiduMercatorProjection'
+
+class BaiduMercatorTilingScheme extends Cesium.WebMercatorTilingScheme {
+  constructor(options) {
+    super(options)
+    let projection = new BaiduMercatorProjection()
+    this._projection.project = function (cartographic, result) {
+      result = result || {}
+      result = CoordTransform.WGS84ToGCJ02(
+        Cesium.Math.toDegrees(cartographic.longitude),
+        Cesium.Math.toDegrees(cartographic.latitude)
+      )
+      result = CoordTransform.GCJ02ToBD09(result[0], result[1])
+      result[0] = Math.min(result[0], 180)
+      result[0] = Math.max(result[0], -180)
+      result[1] = Math.min(result[1], 74.000022)
+      result[1] = Math.max(result[1], -71.988531)
+      result = projection.lngLatToPoint({
+        lng: result[0],
+        lat: result[1],
+      })
+      return new Cesium.Cartesian2(result.x, result.y)
+    }
+    this._projection.unproject = function (cartesian, result) {
+      result = result || {}
+      result = projection.mercatorToLngLat({
+        lng: cartesian.x,
+        lat: cartesian.y,
+      })
+      result = CoordTransform.BD09ToGCJ02(result.lng, result.lat)
+      result = CoordTransform.GCJ02ToWGS84(result[0], result[1])
+      return new Cesium.Cartographic(
+        Cesium.Math.toRadians(result[0]),
+        Cesium.Math.toRadians(result[1])
+      )
+    }
+    this.resolutions = options.resolutions || []
+  }
+
+  /**
+   *
+   * @param x
+   * @param y
+   * @param level
+   * @param result
+   * @returns {module:cesium.Rectangle|*}
+   */
+  tileXYToNativeRectangle(x, y, level, result) {
+    const tileWidth = this.resolutions[level]
+    const west = x * tileWidth
+    const east = (x + 1) * tileWidth
+    const north = ((y = -y) + 1) * tileWidth
+    const south = y * tileWidth
+
+    if (!Cesium.defined(result)) {
+      return new Cesium.Rectangle(west, south, east, north)
+    }
+
+    result.west = west
+    result.south = south
+    result.east = east
+    result.north = north
+    return result
+  }
+
+  /**
+   *
+   * @param position
+   * @param level
+   * @param result
+   * @returns {undefined|*}
+   */
+  positionToTileXY(position, level, result) {
+    const rectangle = this._rectangle
+    if (!Cesium.Rectangle.contains(rectangle, position)) {
+      return undefined
+    }
+    const projection = this._projection
+    const webMercatorPosition = projection.project(position)
+    if (!Cesium.defined(webMercatorPosition)) {
+      return undefined
+    }
+    const tileWidth = this.resolutions[level]
+    const xTileCoordinate = Math.floor(webMercatorPosition.x / tileWidth)
+    const yTileCoordinate = -Math.floor(webMercatorPosition.y / tileWidth)
+    if (!Cesium.defined(result)) {
+      return new Cesium.Cartesian2(xTileCoordinate, yTileCoordinate)
+    }
+    result.x = xTileCoordinate
+    result.y = yTileCoordinate
+    return result
+  }
+}
+
+export default BaiduMercatorTilingScheme

src/modules/images/base64/index.js

@@ -0,0 +1,9 @@
+/**
+ * @Author: Caven
+ * @Date: 2022-05-28 23:30:45
+ */
+
+const IMG_PARTICLES =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAEACAYAAADSoXR2AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ1IDc5LjE2MzQ5OSwgMjAxOC8wOC8xMy0xNjo0MDoyMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjExQTg0NDEyMDEzQjExRUFBNDhBRjhGMUMzOUUyNTU0IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjExQTg0NDEzMDEzQjExRUFBNDhBRjhGMUMzOUUyNTU0Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTFBODQ0MTAwMTNCMTFFQUE0OEFGOEYxQzM5RTI1NTQiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTFBODQ0MTEwMTNCMTFFQUE0OEFGOEYxQzM5RTI1NTQiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz41vRwAAAAE90lEQVR42uydyW4UMRCG3T2dgYSAEGs4sp44cCJBcGUJbwCvALwWPAI8ABwAiUVwgLBdkEikJEiAGMhkZqhfU1aa1sy0g+yaJPyWSupOpPjz0uVyucrJer2eG2fJ3ZgLAQhAgC0PgN8XIlkqgGLE75oih0WmRVZEvop0rHog18rnRe6IzInsthyCXFt+TuSKyGmRXZZDgK5eFrkv8l7kiUhrxN/JSo3pigSvcNmI1bCh3b5LK2+NqHyvyEF9x3z5HgqRRViOAXhW5JrCoNdei/y20gMYxhmRSyIXRY6JTMT4DENLW+SdyD19x/NajDmwmYIW79Hnn+MA4GJEAAIQgABJbMJB+n5Sl9zWZvR9DABUfkJkVt8fi3zUldAEoKl24Y2S1fPZEmBdZFHkkb4vxTLRQ5djbyUf0ncYrD/UADUB8MZno2Q19yx7gIqIAAQgAAEIQIAtYZT+85LvRnjQCoPKR3rQUgN4Y3ZeK30g8qps0qeeAzDn4TWD9+ySG+BBS90DaGnVg9a2tgnR4il9/jkOACoiAhCAAASIZpAAFl6yulO0JACo/IDrn6CedP1zxOciv6wAYNnAP3RVBeWtJQCWzG8iL/X9g4vkqNzMctzUXtintt2KM/aS+bmQaY90rb8CF6tSKiICEIAABCAAAQiwbfcFIWVCbUcc9bZDLKiYAKj4uOv7Bb+ILLj+8W7PCgC7Jhzv44Qdh9yrru8V61jPgd645gD2io+15RiC5ZA5ENNPmGmDmtrta9YAVEQE2FlrQUM/J6efU8cSAD87ojodBaccS6kgiiErGiq/qe93XT+3oGU5BJnbyKrIUs6BQZoQUEcrQ7CYagiGqeKiMgnXLXsg5uJUm/RQJKy8fGS7PMw6SgVQPrJFGZr0kCfUL/7IFjIzrLGpemBQ0kPbehL6I9vMjUh6oEVEAAIQgAAEIAABdpyj0qcK71YrqGUJANNrv+sHOcAiRpDDM1cTY1BEHk7kqyP/2Ac5vLEEQEG8aDnIoTb5ObZRWg5ywG5o1dX4ClNYxT7IISgJPsXGpLut9MCWU0S5bqkmdAa3LQEwcZDAfkZ3tthQfkwNkVeeD6kiuaUabcp6DpS9YyalrAdQ8bT1EFQVUabarND9fNuyB2gREYAABCAAAQhAAAIQoM770UgBXARCIr/koDogVlzgrWuxemBKd0m4JnBed0+5ZQ9gn3BK5LK+P4y5ewoB8DFiKO91COLFfwVuTCZV1hSoYw1APZCsFIkbN1Haaa87wwiKQe6eT27AEX6esPVVd8/kOOdAz/oz9FE0p+uGIKUeqE5C8xgSKiICEIAABCAAAQhAAAIQgAAEIAABCECA6AA+sbkREyDUUYlKD6ggZwzRkr8tewBhusisv+0in5qE/hFchoZTE0TL4p8sTbtIpyahQ4Ag5fKpSVBmfdDECvQTZjoM0U9N6KgkwH9xY7PXpPiCmq5yuaLVldHIO7jgNi5XfOEhCqNh9udHV/RnC5YAUDTftdV4/ivvwEoRVS9XXPWa1FIT5ird8jpSB+BDN3rO8AaGMnGy0I0QRYTvdk6NkOsucuhGCMAgI8Q0isaHbmAevNMhiD4P6iZhstANGiQE2PEGCRo2NcgAsQDwKnxWFdlT17/duWU1BJmuHz6A5bwbEsCScgh+qAHit3Jr1oooOPExdRBLbeJjSpuwuy30AAH+CDAAPH5ltESNYl4AAAAASUVORK5CYII='
+
+export { IMG_PARTICLES }

src/modules/index.js

@@ -0,0 +1,6 @@
+/**
+ @author : Caven Chen
+ @date : 2023-05-08
+ */
+
+export { default as Viewer } from './viewer/Viewer.js'

src/modules/layer/Layer.js

@@ -0,0 +1,350 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-03 09:38:21
+ */
+
+import { Cesium } from '../../namespace'
+import { Util } from '../utils'
+import State from '../state/State'
+import { LayerEventType, OverlayEventType, LayerEvent } from '../event'
+import LayerType from './LayerType'
+
+class Layer {
+  constructor(id) {
+    this._id = Util.uuid()
+    this._bid = id || Util.uuid()
+    this._delegate = undefined
+    this._viewer = undefined
+    this._state = undefined
+    this._show = true
+    this._isGround = false
+    this._cache = {}
+    this._attr = {}
+    this._layerEvent = new LayerEvent()
+    this._layerEvent.on(LayerEventType.ADD, this._onAdd, this)
+    this._layerEvent.on(LayerEventType.REMOVE, this._onRemove, this)
+  }
+
+  get layerId() {
+    return this._id
+  }
+
+  get id() {
+    return this._bid
+  }
+
+  get delegate() {
+    return this._delegate
+  }
+
+  set show(show) {
+    this._show = show
+    this._delegate && (this._delegate.show = this._show)
+  }
+
+  get show() {
+    return this._show
+  }
+
+  get layerEvent() {
+    return this._layerEvent
+  }
+
+  set attr(attr) {
+    this._attr = attr
+  }
+
+  get attr() {
+    return this._attr
+  }
+
+  get state() {
+    return this._state
+  }
+
+  /**
+   * The hook for added
+   * @private
+   */
+  _addedHook() {}
+
+  /**
+   * The hook for removed
+   * @private
+   */
+  _removedHook() {}
+
+  /**
+   * The layer added callback function
+   * Subclasses need to be overridden
+   * @param viewer
+   * @private
+   */
+  _onAdd(viewer) {
+    this._viewer = viewer
+    if (!this._delegate) {
+      return
+    }
+    if (this._delegate instanceof Cesium.PrimitiveCollection) {
+      if (this._isGround) {
+        this._viewer.scene.groundPrimitives.add(this._delegate)
+      } else {
+        this._viewer.scene.primitives.add(this._delegate)
+      }
+    } else {
+      this._viewer.dataSources.add(this._delegate)
+    }
+    this._addedHook && this._addedHook()
+    this._state = State.ADDED
+  }
+
+  /**
+   * The layer added callback function
+   * Subclasses need to be overridden
+   * @private
+   */
+  _onRemove() {
+    if (!this._delegate) {
+      return
+    }
+    if (this._viewer) {
+      this._cache = {}
+      if (this._delegate instanceof Cesium.PrimitiveCollection) {
+        this._delegate.removeAll()
+        if (this._isGround) {
+          this._viewer.scene.groundPrimitives.remove(this._delegate)
+        } else {
+          this._viewer.scene.primitives.remove(this._delegate)
+        }
+      } else if (this._delegate.then) {
+        this._delegate.then((dataSource) => {
+          dataSource.entities.removeAll()
+        })
+        this._viewer.dataSources.remove(this._delegate)
+      } else {
+        this._delegate.entities && this._delegate.entities.removeAll()
+        this._viewer.dataSources.remove(this._delegate)
+      }
+      this._removedHook && this._removedHook()
+      this._state = State.REMOVED
+    }
+  }
+
+  /**
+   * The layer add overlay
+   * @param overlay
+   * @private
+   */
+  _addOverlay(overlay) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (!this._cache.hasOwnProperty(overlay.overlayId)) {
+      this._cache[overlay.overlayId] = overlay
+      this._delegate && overlay.fire(OverlayEventType.ADD, this)
+      if (this._state === State.CLEARED) {
+        this._state = State.ADDED
+      }
+    }
+  }
+
+  /**
+   * The layer remove overlay
+   * @param overlay
+   * @private
+   */
+  _removeOverlay(overlay) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (this._cache.hasOwnProperty(overlay.overlayId)) {
+      this._delegate && overlay.fire(OverlayEventType.REMOVE, this)
+      delete this._cache[overlay.overlayId]
+    }
+  }
+
+  /**
+   * Add overlay
+   * @param overlay
+   * @returns {Layer}
+   */
+  addOverlay(overlay) {
+    this._addOverlay(overlay)
+    return this
+  }
+
+  /**
+   * Add overlays
+   * @param overlays
+   * @returns {Layer}
+   */
+  addOverlays(overlays) {
+    if (Array.isArray(overlays)) {
+      overlays.forEach((item) => {
+        this._addOverlay(item)
+      })
+    }
+    return this
+  }
+
+  /**
+   * Remove overlay
+   * @param overlay
+   * @returns {Layer}
+   */
+  removeOverlay(overlay) {
+    this._removeOverlay(overlay)
+    return this
+  }
+
+  /**
+   * Returns the overlay by overlayId
+   * @param overlayId
+   * @returns {*|undefined}
+   */
+  getOverlay(overlayId) {
+    return this._cache[overlayId] || undefined
+  }
+
+  /**
+   * Returns the overlay by bid
+   * @param id
+   * @returns {any}
+   */
+  getOverlayById(id) {
+    let overlay = undefined
+    Object.keys(this._cache).forEach((key) => {
+      if (this._cache[key].id === id) {
+        overlay = this._cache[key]
+      }
+    })
+    return overlay
+  }
+
+  /**
+   * Returns the overlays by attrName and AttrVal
+   * @param attrName
+   * @param attrVal
+   * @returns {[]}
+   */
+  getOverlaysByAttr(attrName, attrVal) {
+    let result = []
+    this.eachOverlay((item) => {
+      if (item.attr[attrName] === attrVal) {
+        result.push(item)
+      }
+    }, this)
+    return result
+  }
+
+  /**
+   * Iterate through each overlay and pass it as an argument to the callback function
+   * @param method
+   * @param context
+   * @returns {Layer}
+   */
+  eachOverlay(method, context) {
+    Object.keys(this._cache).forEach((key) => {
+      method && method.call(context || this, this._cache[key])
+    })
+    return this
+  }
+
+  /**
+   * Returns all overlays
+   * @returns {[]}
+   */
+  getOverlays() {
+    let result = []
+    Object.keys(this._cache).forEach((key) => {
+      result.push(this._cache[key])
+    })
+    return result
+  }
+
+  /**
+   * Clears all overlays
+   * Subclasses need to be overridden
+   */
+  clear() {}
+
+  /**
+   * Removes from the viewer
+   */
+  remove() {
+    if (this._viewer) {
+      this._viewer.removeLayer(this)
+    }
+  }
+
+  /**
+   * Adds to the viewer
+   * @param viewer
+   * @returns {Layer}
+   */
+  addTo(viewer) {
+    if (viewer?.addLayer) {
+      viewer.addLayer(this)
+    }
+    return this
+  }
+
+  /**
+   * sets the style, the style will apply to every overlay of the layer
+   * Subclasses need to be overridden
+   * @param style
+   */
+  setStyle(style) {}
+
+  /**
+   * Subscribe event
+   * @param type
+   * @param callback
+   * @param context
+   * @returns {Layer}
+   */
+  on(type, callback, context) {
+    this._layerEvent.on(type, callback, context || this)
+    return this
+  }
+
+  /**
+   * Unsubscribe event
+   * @param type
+   * @param callback
+   * @param context
+   * @returns {Layer}
+   */
+  off(type, callback, context) {
+    this._layerEvent.off(type, callback, context || this)
+    return this
+  }
+
+  /**
+   * Trigger subscription event
+   * @param type
+   * @param params
+   * @returns {Layer}
+   */
+  fire(type, params) {
+    this._layerEvent.fire(type, params)
+    return this
+  }
+
+  /**
+   * Registers Type
+   * @param type
+   */
+  static registerType(type) {
+    if (type) {
+      LayerType[type.toLocaleUpperCase()] = type.toLocaleLowerCase()
+    }
+  }
+
+  /**
+   * Returns type
+   * @param type
+   * @returns {*|undefined}
+   */
+  static getLayerType(type) {
+    return LayerType[type.toLocaleUpperCase()] || undefined
+  }
+}
+
+export default Layer

src/modules/layer/LayerGroup.js

@@ -0,0 +1,148 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-08-27 19:50:32
+ */
+
+import { Util } from '../utils'
+import State from '../state/State'
+import { LayerGroupEventType, LayerGroupEvent } from '../event'
+import Layer from './Layer'
+
+class LayerGroup {
+  constructor(id) {
+    this._id = id || Util.uuid()
+    this._cache = {}
+    this._show = true
+    this._viewer = undefined
+    this._layerGroupEvent = new LayerGroupEvent()
+    this._layerGroupEvent.on(LayerGroupEventType.ADD, this._onAdd, this)
+    this._layerGroupEvent.on(LayerGroupEventType.REMOVE, this._onRemove, this)
+    this._state = State.INITIALIZED
+  }
+
+  get id() {
+    return this._id
+  }
+
+  get type() {
+    return Layer.getLayerType('layer_group')
+  }
+
+  set show(show) {
+    this._show = show
+    Object.keys(this._cache).forEach((key) => {
+      this._cache[key].show = this._show
+    })
+  }
+
+  get show() {
+    return this._show
+  }
+
+  get layerGroupEvent() {
+    return this._layerGroupEvent
+  }
+
+  get state() {
+    return this._state
+  }
+
+  /**
+   *
+   * @param viewer
+   * @private
+   */
+  _onAdd(viewer) {
+    this._viewer = viewer
+    Object.keys(this._cache).forEach((key) => {
+      this._viewer.addLayer(this._cache[key])
+    })
+    this._state = State.ADDED
+  }
+
+  /**
+   *
+   * @private
+   */
+  _onRemove() {
+    Object.keys(this._cache).forEach((key) => {
+      this._viewer && this._viewer.removeLayer(this._cache[key])
+    })
+    this._cache = {}
+    this._state = State.REMOVED
+  }
+
+  /**
+   * Adds a layer
+   * @param layer
+   * @returns {LayerGroup}
+   */
+  addLayer(layer) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (!Object(this._cache).hasOwnProperty(layer.id)) {
+      this._cache[layer.id] = layer
+      this._viewer && this._viewer.addLayer(layer)
+    }
+    return this
+  }
+
+  /**
+   * Removes a layer
+   * @param layer
+   * @returns {LayerGroup}
+   */
+  removeLayer(layer) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (Object(this._cache).hasOwnProperty(layer.id)) {
+      this._viewer && this._viewer.removeLayer(layer)
+      delete this._cache[layer.id]
+    }
+    return this
+  }
+
+  /**
+   * Returns a layer by id
+   * @param id
+   * @returns {*|undefined}
+   */
+  getLayer(id) {
+    return this._cache[id] || undefined
+  }
+
+  /**
+   * Returns all layers
+   * @returns {[]}
+   */
+  getLayers() {
+    let result = []
+    Object.keys(this._cache).forEach((key) => {
+      result.push(this._cache[key])
+    })
+    return result
+  }
+
+  /**
+   * Adds to the viewer
+   * @param viewer
+   * @returns {LayerGroup}
+   */
+  addTo(viewer) {
+    if (viewer && viewer.addLayerGroup) {
+      viewer.addLayerGroup(this)
+    }
+    return this
+  }
+
+  /**
+   *
+   * @returns {LayerGroup}
+   */
+  remove() {
+    this._viewer && this._viewer.removeLayerGroup(this)
+    return this
+  }
+}
+
+Layer.registerType('layer_group')
+
+export default LayerGroup

src/modules/layer/LayerType.js

@@ -0,0 +1,8 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-05-10 08:21:19
+ */
+
+let LayerType = {}
+
+export default LayerType

src/modules/layer/index.js

@@ -0,0 +1,27 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-03-13 13:46:19
+ */
+
+export { default as LayerType } from './LayerType'
+export { default as Layer } from './Layer'
+export { default as LayerGroup } from './LayerGroup'
+
+/**
+ * types
+ */
+export { default as ClusterLayer } from './type/ClusterLayer'
+export { default as CzmlLayer } from './type/CzmlLayer'
+export { default as DynamicLayer } from './type/DynamicLayer'
+export { default as FeatureGridLayer } from './type/FeatureGridLayer'
+export { default as GeoJsonLayer } from './type/GeoJsonLayer'
+export { default as GpxLayer } from './type/GpxLayer'
+export { default as GraticuleLayer } from './type/GraticuleLayer'
+export { default as GroundPrimitiveLayer } from './type/GroundPrimitiveLayer'
+export { default as HtmlLayer } from './type/HtmlLayer'
+export { default as KmlLayer } from './type/KmlLayer'
+export { default as LabelLayer } from './type/LabelLayer'
+export { default as PrimitiveLayer } from './type/PrimitiveLayer'
+export { default as TilesetLayer } from './type/TilesetLayer'
+export { default as TopoJsonLayer } from './type/TopoJsonLayer'
+export { default as VectorLayer } from './type/VectorLayer'

src/modules/layer/type/ClusterLayer.js

@@ -0,0 +1,183 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-02-10 10:05:41
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+import Layer from '../Layer'
+
+const DEF_OPT = {
+  size: 18,
+  pixelRange: 40,
+  gradient: {
+    0.0001: Cesium.Color.DEEPSKYBLUE,
+    0.001: Cesium.Color.GREEN,
+    0.01: Cesium.Color.ORANGE,
+    0.1: Cesium.Color.RED,
+  },
+  fontSize: 12,
+  fontColor: Cesium.Color.BLACK,
+  style: 'circle',
+}
+
+class ClusterLayer extends Layer {
+  constructor(id, options = {}) {
+    super(id)
+    this._delegate = new Cesium.CustomDataSource(id)
+    this._options = {
+      ...DEF_OPT,
+      ...options,
+    }
+    this._delegate.clustering.enabled = true
+    this._delegate.clustering.clusterEvent.addEventListener(
+      this._clusterEventHandler,
+      this
+    )
+    this._delegate.clustering.pixelRange = this._options.pixelRange
+
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return Layer.getLayerType('cluster')
+  }
+
+  set enableCluster(enableCluster) {
+    this._delegate.clustering.enabled = enableCluster
+  }
+
+  /**
+   *
+   * @param color
+   * @param numLength
+   * @returns {*}
+   * @private
+   */
+  _drawCircle(color, numLength) {
+    let size = this._options.size * (numLength + 1)
+    let key = color.toCssColorString() + '-' + size
+    if (!this._cache[key]) {
+      let canvas = document.createElement('canvas')
+      canvas.width = size
+      canvas.height = size
+      let context2D = canvas.getContext('2d')
+      context2D.save()
+      context2D.scale(size / 24, size / 24) //Added to auto-generated code to scale up to desired size.
+      context2D.fillStyle = color.withAlpha(0.2).toCssColorString() //Modified from auto-generated code.
+      context2D.beginPath()
+      context2D.arc(12, 12, 9, 0, 2 * Math.PI)
+      context2D.closePath()
+      context2D.fill()
+      context2D.beginPath()
+      context2D.arc(12, 12, 6, 0, 2 * Math.PI)
+      context2D.fillStyle = color.toCssColorString()
+      context2D.fill()
+      context2D.closePath()
+      context2D.restore()
+      this._cache[key] = canvas.toDataURL()
+    }
+    return this._cache[key]
+  }
+
+  /**
+   *
+   * @param color
+   * @param numLength
+   * @returns {*}
+   * @private
+   */
+  _drawClustering(color, numLength) {
+    let size = this._options.size * (numLength + 1)
+    let key = color.toCssColorString() + '-' + size
+    let startAngle = -Math.PI / 12
+    let angle = Math.PI / 2
+    let intervalAngle = Math.PI / 6
+    if (!this._cache[key]) {
+      let canvas = document.createElement('canvas')
+      canvas.width = size
+      canvas.height = size
+      let context2D = canvas.getContext('2d')
+      context2D.save()
+      context2D.scale(size / 24, size / 24) //Added to auto-generated code to scale up to desired size.
+      context2D.beginPath()
+      context2D.arc(12, 12, 6, 0, 2 * Math.PI)
+      context2D.fillStyle = color.toCssColorString()
+      context2D.fill()
+      context2D.closePath()
+      context2D.lineWidth = 2
+      for (let i = 0; i < 3; i++) {
+        context2D.beginPath()
+        context2D.arc(12, 12, 8, startAngle, startAngle + angle, false)
+        context2D.strokeStyle = color.withAlpha(0.4).toCssColorString()
+        context2D.stroke()
+        context2D.arc(12, 12, 11, startAngle, startAngle + angle, false)
+        context2D.strokeStyle = color.withAlpha(0.2).toCssColorString()
+        context2D.stroke()
+        context2D.closePath()
+        startAngle = startAngle + angle + intervalAngle
+      }
+      context2D.restore()
+      this._cache[key] = canvas.toDataURL()
+    }
+    return this._cache[key]
+  }
+
+  /**
+   *
+   * @param {*} clusteredEntities
+   * @param {*} cluster
+   */
+  _clusterEventHandler(clusteredEntities, cluster) {
+    if (!this._delegate.clustering.enabled) {
+      return
+    }
+    cluster.billboard.show = true
+    cluster.label.font = `bold ${this._options.fontSize}px sans-serif`
+    cluster.label.fillColor = this._options.fontColor
+    cluster.label.disableDepthTestDistance = Number.POSITIVE_INFINITY
+    if (this._delegate.entities.values.length) {
+      let allCount = this._delegate.entities.values.length || 0
+      for (let key in this._options.gradient) {
+        if (clusteredEntities.length >= allCount * key) {
+          let numLength = String(clusteredEntities.length).length
+          if (this._options.style === 'circle') {
+            cluster.billboard.image = this._drawCircle(
+              this._options.gradient[key],
+              numLength
+            )
+          } else if (this._options.style === 'custom') {
+            cluster.billboard.image = this._options.gradient[key]
+          } else {
+            cluster.billboard.image = this._drawClustering(
+              this._options.gradient[key],
+              numLength
+            )
+          }
+          cluster.label.show = true
+          if (numLength === 1) {
+            cluster.label.pixelOffset = new Cesium.Cartesian2(-2, 3)
+          } else {
+            cluster.label.pixelOffset = new Cesium.Cartesian2(
+              -5 * (numLength - 1),
+              5
+            )
+          }
+        } else if (clusteredEntities.length <= 1) {
+          cluster.label.show = false
+        }
+      }
+    }
+  }
+
+  clear() {
+    this._delegate.entities.removeAll()
+    this._cache = {}
+    this._state = State.CLEARED
+    return this
+  }
+}
+
+Layer.registerType('cluster')
+
+export default ClusterLayer

src/modules/layer/type/CzmlLayer.js

@@ -0,0 +1,54 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-19 13:38:48
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+import Layer from '../Layer'
+
+class CzmlLayer extends Layer {
+  constructor(id, url = '', options = {}) {
+    super(id)
+    this._delegate = Cesium.CzmlDataSource.load(url, options)
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return Layer.getLayerType('czml')
+  }
+
+  set show(show) {
+    this._show = show
+    this._delegate &&
+      this._delegate.then((dataSource) => {
+        dataSource.show = this._show
+      })
+  }
+
+  get show() {
+    return this._show
+  }
+
+  /**
+   *
+   * @param method
+   * @param context
+   * @returns {CzmlLayer}
+   */
+  eachOverlay(method, context) {
+    if (this._delegate) {
+      this._delegate.then((dataSource) => {
+        let entities = dataSource.entities.values
+        entities.forEach((item) => {
+          method.call(context, item)
+        })
+      })
+      return this
+    }
+  }
+}
+
+Layer.registerType('czml')
+
+export default CzmlLayer

src/modules/layer/type/DynamicLayer.js

@@ -0,0 +1,35 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-05-05 09:12:41
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+import Layer from '../Layer'
+
+class DynamicLayer extends Layer {
+  constructor(id) {
+    super(id)
+    this._delegate = new Cesium.CustomDataSource(id)
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return Layer.getLayerType('dynamic')
+  }
+
+  /**
+   * Clears all entities
+   * @returns {DynamicLayer}
+   */
+  clear() {
+    this._delegate.entities && this._delegate.entities.removeAll()
+    this._cache = {}
+    this._state = State.CLEARED
+    return this
+  }
+}
+
+Layer.registerType('dynamic')
+
+export default DynamicLayer

src/modules/layer/type/FeatureGridLayer.js

@@ -0,0 +1,221 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-04-15 20:00:42
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+import Layer from '../Layer'
+import VectorLayer from './VectorLayer'
+
+const DEF_OPTS = {
+  name: '',
+  count: 10,
+  maximumLevel: 21,
+  dataProperty: '',
+  callback: () => {
+    return null
+  },
+}
+
+class FeatureGridLayer extends Layer {
+  constructor(id, url, options = {}) {
+    super(id)
+    this._url = url
+    this._options = {
+      ...DEF_OPTS,
+      ...options,
+    }
+    this._levelLayers = {}
+    this._tileWidth = 256
+    this._tileHeight = 256
+    this._maximumLevel = this._options.maximumLevel
+    this._tilingScheme =
+      this._options.tilingScheme || new Cesium.GeographicTilingScheme()
+    this._rectangle = this._tilingScheme.rectangle
+    this._credit = undefined
+    this._token = undefined
+    for (let i = 0; i < this.maximumLevel; i++) {
+      this._levelLayers[String(i)] = new VectorLayer(id + '-grid-' + i)
+    }
+    this._viewer = undefined
+    this._imageryLayer = undefined
+    this._imagery = document.createElement('canvas')
+    this._imagery.width = this._tileWidth
+    this._imagery.height = this._tileHeight
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return Layer.getLayerType('feature_grid')
+  }
+
+  get url() {
+    return this._url
+  }
+
+  set show(show) {
+    this._show = show
+    Object.keys(this._levelLayers).forEach((key) => {
+      this._levelLayers[key].show = show
+    })
+    return this
+  }
+
+  get show() {
+    return this._show
+  }
+
+  get token() {
+    return this._token
+  }
+
+  get tileWidth() {
+    if (!this.ready) {
+      throw new Cesium.DeveloperError(
+        'tileWidth must not be called before the imagery provider is ready.'
+      )
+    }
+    return this._tileWidth
+  }
+
+  get tileHeight() {
+    if (!this.ready) {
+      throw new Cesium.DeveloperError(
+        'tileHeight must not be called before the imagery provider is ready.'
+      )
+    }
+    return this._tileHeight
+  }
+
+  get maximumLevel() {
+    if (!this.ready) {
+      throw new Cesium.DeveloperError(
+        'maximumLevel must not be called before the imagery provider is ready.'
+      )
+    }
+    return this._maximumLevel
+  }
+
+  get minimumLevel() {
+    if (!this.ready) {
+      throw new Cesium.DeveloperError(
+        'minimumLevel must not be called before the imagery provider is ready.'
+      )
+    }
+    return 0
+  }
+
+  get tilingScheme() {
+    if (!this.ready) {
+      throw new Cesium.DeveloperError(
+        'tilingScheme must not be called before the imagery provider is ready.'
+      )
+    }
+    return this._tilingScheme
+  }
+
+  get rectangle() {
+    if (!this.ready) {
+      throw new Cesium.DeveloperError(
+        'rectangle must not be called before the imagery provider is ready.'
+      )
+    }
+    return this._rectangle
+  }
+
+  get ready() {
+    return !!this._url
+  }
+
+  get credit() {
+    return this._credit
+  }
+
+  get hasAlphaChannel() {
+    return true
+  }
+
+  /**
+   *
+   * @param {*} viewer
+   * @returns
+   */
+  _onAdd(viewer) {
+    this._viewer = viewer
+    this._imageryLayer = this._viewer.imageryLayers.addImageryProvider(this)
+    Object.keys(this._levelLayers).forEach((key) => {
+      this._viewer.addLayer(this._levelLayers[key])
+    })
+    this._state = State.ADDED
+  }
+
+  _onRemove() {
+    this._imageryLayer && this._viewer.imageryLayers.remove(this._imageryLayer)
+    Object.keys(this._levelLayers).forEach((key) => {
+      this._viewer.removeLayer(this._levelLayers[key])
+    })
+    this._state = State.REMOVED
+  }
+
+  getTileCredits(x, y, level) {}
+
+  /**
+   *
+   * @param {*} x
+   * @param {*} y
+   * @param {*} level
+   * @param {*} request
+   * @returns
+   */
+  requestImage(x, y, level, request) {
+    let layer = this._levelLayers[String(level)]
+    let rectangle = this._tilingScheme.tileXYToRectangle(x, y, level)
+    if (
+      this._viewer &&
+      rectangle &&
+      layer &&
+      Cesium.Rectangle.intersection(rectangle, this._viewer.viewBounds)
+    ) {
+      Cesium.Resource.fetchJson({
+        url: this._url,
+        queryParameters: {
+          minX: Cesium.Math.toDegrees(rectangle.west),
+          minY: Cesium.Math.toDegrees(rectangle.south),
+          maxX: Cesium.Math.toDegrees(rectangle.east),
+          maxY: Cesium.Math.toDegrees(rectangle.north),
+          count: this._options.count,
+        },
+      }).then((res) => {
+        let dataList = res
+        if (this._options.dataProperty) {
+          dataList = res[this._options.dataProperty]
+        }
+        if (dataList && dataList.length) {
+          for (let i = level + 3; i < this._maximumLevel; i++) {
+            this._levelLayers[String(i)] && this._levelLayers[String(i)].clear()
+          }
+          dataList.forEach((item) => {
+            let overlay = this._options.callback(item)
+            overlay && layer.addOverlay(overlay)
+          })
+        }
+      })
+    }
+    return this._imagery
+  }
+
+  /**
+   *
+   */
+  clear() {
+    Object.keys(this._levelLayers).forEach((key) => {
+      this._levelLayers[key].clear()
+    })
+    this._state = State.CLEARED
+  }
+}
+
+Layer.registerType('feature_grid')
+
+export default FeatureGridLayer

src/modules/layer/type/GeoJsonLayer.js

@@ -0,0 +1,133 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-13 10:13:53
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+import { Billboard, Polyline, Polygon, Model } from '../../overlay'
+import Layer from '../Layer'
+import VectorLayer from './VectorLayer'
+
+class GeoJsonLayer extends Layer {
+  constructor(id, url, options = {}) {
+    if (!url) {
+      throw new Error('GeoJsonLayer：the url invalid')
+    }
+    super(id)
+    this._delegate = Cesium.GeoJsonDataSource.load(url, options)
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return Layer.getLayerType('geojson')
+  }
+
+  set show(show) {
+    this._show = show
+    this._delegate &&
+      this._delegate.then((dataSource) => {
+        dataSource.show = this._show
+      })
+  }
+
+  get show() {
+    return this._show
+  }
+
+  _createBillboard(entity) {
+    if (entity.position && entity.billboard) {
+      return Billboard.fromEntity(entity)
+    }
+  }
+
+  /**
+   * Returns polyline Entity
+   * @param entity
+   * @returns {any}
+   * @private
+   */
+  _createPolyline(entity) {
+    if (entity.polyline) {
+      return Polyline.fromEntity(entity)
+    }
+  }
+
+  /**
+   * Returns polygon Entity
+   * @param entity
+   * @returns {any}
+   * @private
+   */
+  _createPolygon(entity) {
+    if (entity.polygon) {
+      return Polygon.fromEntity(entity)
+    }
+  }
+
+  /**
+   * Returns model Entity
+   * @param entity
+   * @param modelUrl
+   * @returns {Model}
+   * @private
+   */
+  _createModel(entity, modelUrl) {
+    if (entity) {
+      return Model.fromEntity(entity, modelUrl)
+    }
+  }
+
+  /**
+   *
+   * @param method
+   * @param context
+   * @returns {GeoJsonLayer}
+   */
+  eachOverlay(method, context) {
+    if (this._delegate) {
+      this._delegate.then((dataSource) => {
+        let entities = dataSource.entities.values
+        entities.forEach((item) => {
+          method.call(context, item)
+        })
+      })
+      return this
+    }
+  }
+
+  /**
+   * Converts to VectorLayer
+   * @returns {VectorLayer}
+   */
+  toVectorLayer() {
+    let layer = new VectorLayer(this.id)
+    this.eachOverlay((item) => {
+      if (item.billboard) {
+        layer.addOverlay(this._createBillboard(item))
+      } else if (item.polyline) {
+        layer.addOverlay(this._createPolyline(item))
+      } else if (item.polygon) {
+        layer.addOverlay(this._createPolygon(item))
+      }
+    }, this)
+    return layer
+  }
+
+  /**
+   * Converts to VectorLayer
+   * @param modelUrl
+   * @returns {VectorLayer}
+   */
+  toModelLayer(modelUrl) {
+    let layer = new VectorLayer(this.id)
+    this.eachOverlay((item) => {
+      layer.addOverlay(this._createModel(item, modelUrl))
+    }, this)
+    return layer
+  }
+}
+
+Layer.registerType('geojson')
+
+export default GeoJsonLayer

src/modules/layer/type/GpxLayer.js

@@ -0,0 +1,51 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-19 11:03:17
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+import Layer from '../Layer'
+
+class GpxLayer extends Layer {
+  constructor(id, url, options = {}) {
+    if (!url) {
+      throw new Error('GpxLayer: the url is empty')
+    }
+    super(id)
+    this._delegate = Cesium.KmlDataSource.load(url, options)
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return Layer.getLayerType('gpx')
+  }
+
+  set show(show) {
+    this._show = show
+    this._delegate &&
+      this._delegate.then((dataSource) => {
+        dataSource.show = this._show
+      })
+  }
+
+  get show() {
+    return this._show
+  }
+
+  eachOverlay(method, context) {
+    if (this._delegate) {
+      this._delegate.then((dataSource) => {
+        let entities = dataSource.entities.values
+        entities.forEach((item) => {
+          method.call(context, item)
+        })
+      })
+      return this
+    }
+  }
+}
+
+Layer.registerType('gpx')
+
+export default GpxLayer

src/modules/layer/type/GraticuleLayer.js

@@ -0,0 +1,78 @@
+/**
+  @Author: Caven Chen
+  @Date: 2023-01-12
+**/
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+import Layer from '../Layer'
+
+const DEF_OPTS = {
+  radialColor: Cesium.Color.WHITE,
+  radialWidth: 2,
+  showRadial: true,
+  LabelColor: Cesium.Color.YELLOW,
+  weftColor: Cesium.Color.WHITE,
+  weftWidth: 2,
+}
+
+class GraticuleLayer extends Layer {
+  constructor(id, options) {
+    super(id)
+    this._options = {
+      ...DEF_OPTS,
+      ...options,
+    }
+    this._delegate = new Cesium.CustomDataSource(id)
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return Layer.getLayerType('graticule')
+  }
+
+  _addedHook() {
+    for (let i = 0; i < 36; i++) {
+      this._delegate.entities.add({
+        polyline: {
+          positions: Cesium.Cartesian3.fromDegreesArray([
+            i * 10,
+            89.5,
+            i * 10,
+            -89.5,
+          ]),
+          material: this._options.radialColor,
+          width: this._options.radialWidth,
+        },
+        show: this._options.showRadial,
+      })
+
+      this._delegate.entities.add({
+        position: Cesium.Cartesian3.fromDegrees(i * 10, 0.0),
+        label: {
+          text: i * 10 + '°',
+          font: '12px',
+          fillColor: this._options.LabelColor,
+        },
+      })
+    }
+
+    for (let i = 0; i < 18; i++) {
+      let coords = []
+      for (let k = 0; k < 129; k++) {
+        coords.push(-180 + k * (360 / 128), (i < 9 ? i : -i) * 10)
+      }
+      this._delegate.entities.add({
+        polyline: {
+          positions: Cesium.Cartesian3.fromDegreesArray(coords),
+          material: this._options.weftColor,
+          width: this._options.weftWidth,
+        },
+      })
+    }
+  }
+}
+
+Layer.registerType('graticule')
+
+export default GraticuleLayer

src/modules/layer/type/GroundPrimitiveLayer.js

@@ -0,0 +1,36 @@
+/**
+ * @Author: Caven
+ * @Date: 2021-12-03 20:12:59
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+import Layer from '../Layer'
+
+class GroundPrimitiveLayer extends Layer {
+  constructor(id) {
+    super(id)
+    this._delegate = new Cesium.PrimitiveCollection()
+    this._isGround = true
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return Layer.getLayerType('ground_primitive')
+  }
+
+  /**
+   *
+   * @return {GroundPrimitiveLayer}
+   */
+  clear() {
+    this._delegate && this._delegate.removeAll()
+    this._cache = {}
+    this._state = State.CLEARED
+    return this
+  }
+}
+
+Layer.registerType('ground_primitive')
+
+export default GroundPrimitiveLayer

src/modules/layer/type/HtmlLayer.js

@@ -0,0 +1,98 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-02-12 21:43:33
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+import { DomUtil } from '../../utils'
+import { Transform } from '../../transform'
+import Layer from '../Layer'
+
+class HtmlLayer extends Layer {
+  constructor(id) {
+    super(id)
+    this._delegate = DomUtil.create('div', 'html-layer', undefined)
+    this._delegate.setAttribute('id', this._id)
+    this._renderRemoveCallback = undefined
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return Layer.getLayerType('html')
+  }
+
+  set show(show) {
+    this._show = show
+    this._delegate.style.visibility = this._show ? 'visible' : 'hidden'
+    Object.keys(this._cache).forEach((key) => {
+      this._cache[key].show = show
+    })
+  }
+
+  get show() {
+    return this._show
+  }
+
+  /**
+   * add handler
+   * @param viewer
+   * @private
+   */
+  _onAdd(viewer) {
+    this._viewer = viewer
+    this._viewer.dcContainer.appendChild(this._delegate)
+    let scene = this._viewer.scene
+    this._renderRemoveCallback = scene.postRender.addEventListener(() => {
+      let cp = this._viewer.camera.positionWC
+      let cd = this._viewer.camera.direction
+      this.eachOverlay((item) => {
+        if (item && item.position) {
+          let position = Transform.transformWGS84ToCartesian(item.position)
+          let up = scene.globe.ellipsoid.geodeticSurfaceNormal(
+            position,
+            new Cesium.Cartesian3()
+          )
+          let windowCoord = Cesium.SceneTransforms.wgs84ToWindowCoordinates(
+            scene,
+            position
+          )
+          item._updateStyle(
+            windowCoord,
+            Cesium.Cartesian3.distance(position, cp),
+            Cesium.Cartesian3.dot(cd, up) <= 0
+          )
+        }
+      }, this)
+    }, this)
+    this._state = State.ADDED
+  }
+
+  /**
+   * remove handler
+   * @returns {boolean}
+   * @private
+   */
+  _onRemove() {
+    this._renderRemoveCallback && this._renderRemoveCallback()
+    this._viewer.dcContainer.removeChild(this._delegate)
+    this._state = State.REMOVED
+  }
+
+  /**
+   * Clears all divIcons
+   * @returns {HtmlLayer}
+   */
+  clear() {
+    while (this._delegate.hasChildNodes()) {
+      this._delegate.removeChild(this._delegate.firstChild)
+    }
+    this._cache = {}
+    this._state = State.CLEARED
+    return this
+  }
+}
+
+Layer.registerType('html')
+
+export default HtmlLayer

src/modules/layer/type/KmlLayer.js

@@ -0,0 +1,51 @@
+/**
+ * @Author: Caven
+ * @Date: 2020-01-19 11:03:17
+ */
+
+import { Cesium } from '../../../namespace'
+import State from '../../state/State'
+import Layer from '../Layer'
+
+class KmlLayer extends Layer {
+  constructor(id, url, options = {}) {
+    if (!url) {
+      throw new Error('KmlLayer: the url is empty')
+    }
+    super(id)
+    this._delegate = Cesium.KmlDataSource.load(url, options)
+    this._state = State.INITIALIZED
+  }
+
+  get type() {
+    return Layer.getLayerType('kml')
+  }
+
+  set show(show) {
+    this._show = show
+    this._delegate &&
+      this._delegate.then((dataSource) => {
+        dataSource.show = this._show
+      })
+  }
+
+  get show() {
+    return this._show
+  }
+
+  eachOverlay(method, context) {
+    if (this._delegate) {
+      this._delegate.then((dataSource) => {
+        let entities = dataSource.entities.values
+        entities.forEach((item) => {
+          method.call(context, item)
+        })
+      })
+      return this
+    }
+  }
+}
+
+Layer.registerType('kml')
+
+export default KmlLayer