fix：拉取angular-ts和react-ts分支最新代码

frontend/angular-ts/.browserslistrc

@@ -0,0 +1,17 @@
+# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
+# For additional information regarding the format and rule options, please see:
+# https://github.com/browserslist/browserslist#queries
+
+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
+# You can see what browsers were selected by your queries by running:
+#   npx browserslist
+
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.

frontend/angular-ts/.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

frontend/angular-ts/.gitignore

@@ -0,0 +1,46 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist
+/tmp
+/out-tsc
+# Only exists if Bazel was run
+/bazel-out
+
+# dependencies
+/node_modules
+
+# profiling files
+chrome-profiler-events*.json
+speed-measure-plugin*.json
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+.history/*
+
+# misc
+/.sass-cache
+/connect.lock
+/coverage
+/libpeerconnection.log
+npm-debug.log
+yarn-error.log
+testem.log
+/typings
+
+# System Files
+.DS_Store
+Thumbs.db

frontend/angular-ts/angular.json

@@ -0,0 +1,140 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "angular-ts": {
+      "projectType": "application",
+      "schematics": {
+        "@schematics/angular:component": {
+          "style": "scss"
+        },
+        "@schematics/angular:application": {
+          "strict": true
+        }
+      },
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/angular-ts",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.app.json",
+            "aot": true,
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss",
+              "node_modules/leaflet/dist/leaflet.css"
+            ],
+            "scripts": [
+              "node_modules/leaflet/dist/leaflet.js"
+            ]
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true,
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ]
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "angular-ts:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "angular-ts:build:production"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "angular-ts:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "src/test.ts",
+            "polyfills": "src/polyfills.ts",
+            "tsConfig": "tsconfig.spec.json",
+            "karmaConfig": "karma.conf.js",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "src/styles.scss",
+              "node_modules/leaflet/dist/leaflet.css"
+            ],
+            "scripts": [
+              "node_modules/leaflet/dist/leaflet.js"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@angular-devkit/build-angular:tslint",
+          "options": {
+            "tsConfig": [
+              "tsconfig.app.json",
+              "tsconfig.spec.json",
+              "e2e/tsconfig.json"
+            ],
+            "exclude": [
+              "**/node_modules/**"
+            ]
+          }
+        },
+        "e2e": {
+          "builder": "@angular-devkit/build-angular:protractor",
+          "options": {
+            "protractorConfig": "e2e/protractor.conf.js",
+            "devServerTarget": "angular-ts:serve"
+          },
+          "configurations": {
+            "production": {
+              "devServerTarget": "angular-ts:serve:production"
+            }
+          }
+        }
+      }
+    }
+  },
+  "defaultProject": "angular-ts",
+  "cli": {
+    "analytics": "71d974d8-5195-475b-868c-8de76159c8c1"
+  }
+}

frontend/angular-ts/e2e/protractor.conf.js

@@ -0,0 +1,37 @@
+// @ts-check
+// Protractor configuration file, see link for more information
+// https://github.com/angular/protractor/blob/master/lib/config.ts
+
+const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter');
+
+/**
+ * @type { import("protractor").Config }
+ */
+exports.config = {
+  allScriptsTimeout: 11000,
+  specs: [
+    './src/**/*.e2e-spec.ts'
+  ],
+  capabilities: {
+    browserName: 'chrome'
+  },
+  directConnect: true,
+  SELENIUM_PROMISE_MANAGER: false,
+  baseUrl: 'http://localhost:4200/',
+  framework: 'jasmine',
+  jasmineNodeOpts: {
+    showColors: true,
+    defaultTimeoutInterval: 30000,
+    print: function() {}
+  },
+  onPrepare() {
+    require('ts-node').register({
+      project: require('path').join(__dirname, './tsconfig.json')
+    });
+    jasmine.getEnv().addReporter(new SpecReporter({
+      spec: {
+        displayStacktrace: StacktraceOption.PRETTY
+      }
+    }));
+  }
+};

frontend/angular-ts/e2e/src/app.e2e-spec.ts

@@ -0,0 +1,23 @@
+import { AppPage } from './app.po';
+import { browser, logging } from 'protractor';
+
+describe('workspace-project App', () => {
+  let page: AppPage;
+
+  beforeEach(() => {
+    page = new AppPage();
+  });
+
+  it('should display welcome message', async () => {
+    await page.navigateTo();
+    expect(await page.getTitleText()).toEqual('angular-ts app is running!');
+  });
+
+  afterEach(async () => {
+    // Assert that there are no errors emitted from the browser
+    const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+    expect(logs).not.toContain(jasmine.objectContaining({
+      level: logging.Level.SEVERE,
+    } as logging.Entry));
+  });
+});

frontend/angular-ts/e2e/src/app.po.ts

@@ -0,0 +1,11 @@
+import { browser, by, element } from 'protractor';
+
+export class AppPage {
+  async navigateTo(): Promise<unknown> {
+    return browser.get(browser.baseUrl);
+  }
+
+  async getTitleText(): Promise<string> {
+    return element(by.css('app-root .content span')).getText();
+  }
+}

frontend/angular-ts/e2e/tsconfig.json

@@ -0,0 +1,13 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../out-tsc/e2e",
+    "module": "commonjs",
+    "target": "es2018",
+    "types": [
+      "jasmine",
+      "node"
+    ]
+  }
+}

frontend/angular-ts/karma.conf.js

@@ -0,0 +1,35 @@
+// Karma configuration file, see link for more information
+// https://karma-runner.github.io/1.0/config/configuration-file.html
+
+module.exports = function (config) {
+  config.set({
+    basePath: '',
+    frameworks: ['jasmine', '@angular-devkit/build-angular'],
+    plugins: [
+      require('karma-jasmine'),
+      require('karma-chrome-launcher'),
+      require('karma-jasmine-html-reporter'),
+      require('karma-coverage'),
+      require('@angular-devkit/build-angular/plugins/karma')
+    ],
+    client: {
+      clearContext: false // leave Jasmine Spec Runner output visible in browser
+    },
+    coverageReporter: {
+      dir: require('path').join(__dirname, './coverage/angular-ts'),
+      subdir: '.',
+      reporters: [
+        { type: 'html' },
+        { type: 'text-summary' }
+      ]
+    },
+    reporters: ['progress', 'kjhtml'],
+    port: 9876,
+    colors: true,
+    logLevel: config.LOG_INFO,
+    autoWatch: true,
+    browsers: ['Chrome'],
+    singleRun: false,
+    restartOnFileChange: true
+  });
+};

frontend/angular-ts/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "angular-ts",
+  "version": "0.0.0",
+  "scripts": {
+    "ng": "ng",
+    "start": "ng serve --host=0.0.0.0",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
+  },
+  "private": true,
+  "dependencies": {
+    "@angular/animations": "~11.0.0",
+    "@angular/common": "~11.0.0",
+    "@angular/compiler": "~11.0.0",
+    "@angular/core": "~11.0.0",
+    "@angular/forms": "~11.0.0",
+    "@angular/platform-browser": "~11.0.0",
+    "@angular/platform-browser-dynamic": "~11.0.0",
+    "@angular/router": "~11.0.0",
+    "@supermap/iclient-leaflet": "^10.1.1",
+    "html2canvas": "^1.0.0-rc.7",
+    "leaflet": "^1.7.1",
+    "localforage": "^1.5.0",
+    "lodash": "^4.17.20",
+    "moment": "^2.29.1",
+    "ngforage": "^6.0.0",
+    "rxjs": "~6.6.0",
+    "tsickle": "^0.39.1",
+    "tslib": "^2.0.0",
+    "zone.js": "~0.10.2"
+  },
+  "devDependencies": {
+    "@angular-devkit/build-angular": "~0.1100.1",
+    "@angular/cli": "~11.0.1",
+    "@angular/compiler-cli": "~11.0.0",
+    "@types/jasmine": "~3.6.0",
+    "@types/node": "^12.11.1",
+    "codelyzer": "^6.0.0",
+    "jasmine-core": "~3.6.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~5.1.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage": "~2.0.3",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "ng-packagr": "^11.1.2",
+    "protractor": "~7.0.0",
+    "ts-node": "~8.3.0",
+    "tslint": "~6.1.0",
+    "typescript": "~4.0.2"
+  }
+}

frontend/angular-ts/proxy.conf.json

@@ -0,0 +1,11 @@
+{
+  "/api": {
+    "target": "http://192.168.15.213:3000/",
+    "secure": false,
+    "pathRewrite": {
+      "^/api": ""
+    },
+    "changeOrigin": true,
+    "logLevel": "debug"
+  }
+}

frontend/angular-ts/src/CX/components/error/err404/err404.component.html

@@ -0,0 +1 @@
+<p>err404 works!</p>

frontend/angular-ts/src/CX/components/error/err404/err404.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-err404',
+  templateUrl: './err404.component.html',
+  styleUrls: ['./err404.component.scss']
+})
+export class Err404Component implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/angular-ts/src/CX/components/error/err404/err404.module.ts

@@ -0,0 +1,14 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { Err404Component } from './err404.component';
+
+
+
+@NgModule({
+  declarations: [Err404Component],
+  imports: [
+    CommonModule
+  ],
+  exports: [Err404Component]
+})
+export class Err404Module { }

frontend/angular-ts/src/CX/components/index.ts

@@ -0,0 +1 @@
+export * from './error/err404/err404.module';

frontend/angular-ts/src/CX/directives/directives.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { DisabledDirective } from './disabled.directive';
+
+@NgModule({
+  declarations: [DisabledDirective],
+  imports: [
+    CommonModule,
+  ],
+  exports: [DisabledDirective]
+})
+export class DirectivesModule { }

frontend/angular-ts/src/CX/directives/disabled.directive.ts

@@ -0,0 +1,19 @@
+import { Directive, Input } from '@angular/core';
+import { NgControl } from '@angular/forms';
+
+@Directive({
+  selector: '[appDisabled]',
+})
+export class DisabledDirective {
+
+  @Input('appDisabled') set disabledDirective(condition: boolean) {
+    const action = condition ? 'enable' : 'disable';
+    setTimeout(() => this.ngControl.control[action](), 0);
+  }
+
+  constructor(
+    private ngControl: NgControl,
+  ) {
+  }
+
+}

frontend/angular-ts/src/CX/services/SimpleReuseStrategy.ts

@@ -0,0 +1,63 @@
+import { RouteReuseStrategy, DefaultUrlSerializer, ActivatedRouteSnapshot, DetachedRouteHandle } from '@angular/router';
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class SimpleReuseStrategy implements RouteReuseStrategy {
+
+    public static handlers: { [key: string]: DetachedRouteHandle } = {};
+
+    private static waitDelete: string;
+
+    /** 表示对所有路由允许复用 如果你有路由不想利用可以在这加一些业务逻辑判断 */
+    public shouldDetach(route: ActivatedRouteSnapshot): boolean {
+        console.debug('===shouldDetach-route', route);
+        if (route.data.isPage) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    /** 当路由离开时会触发。按path作为key存储路由快照&组件当前实例对象 */
+    public store(route: ActivatedRouteSnapshot, handle: DetachedRouteHandle): void {
+        console.debug('===store-route', route, 'store-handle', handle);
+        SimpleReuseStrategy.handlers[this.getRouteUrl(route)] = handle;
+    }
+
+    /** 若 path 在缓存中有的都认为允许还原路由 */
+    public shouldAttach(route: ActivatedRouteSnapshot): boolean {
+        console.debug('===shouldAttach-route', route);
+        return !!SimpleReuseStrategy.handlers[this.getRouteUrl(route)];
+    }
+
+    /** 从缓存中获取快照，若无则返回null */
+    public retrieve(route: ActivatedRouteSnapshot): DetachedRouteHandle {
+        console.debug('===retrieve-route', route);
+        if (!route.routeConfig) {
+            return null;
+        }
+
+        return SimpleReuseStrategy.handlers[this.getRouteUrl(route)];
+    }
+
+    /** 进入路由触发，判断是否同一路由 */
+    public shouldReuseRoute(future: ActivatedRouteSnapshot, curr: ActivatedRouteSnapshot): boolean {
+        console.debug('===shouldReuseRoute-future', future, 'shouldReuseRoute-cur', curr);
+        return future.routeConfig === curr.routeConfig &&
+            JSON.stringify(future.params) == JSON.stringify(curr.params);
+    }
+
+    private getRouteUrl(route: ActivatedRouteSnapshot) {
+        var path = route['_routerState'].url.replace(/\//g, '_');
+        console.debug('---getRouteUrl-path', path);
+        return path;
+    }
+
+    public static deleteRouteSnapshot(name: string): void {
+        if (SimpleReuseStrategy.handlers[name]) {
+            delete SimpleReuseStrategy.handlers[name];
+        } else {
+            SimpleReuseStrategy.waitDelete = name;
+        }
+    }
+}

frontend/angular-ts/src/CX/services/http-requtst/http-request.service.ts

@@ -0,0 +1,48 @@
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+import { Observable, Subject } from 'rxjs';
+import { NgForage } from 'ngforage';
+import { HttpRequest } from './http-request';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class HttpRequestService extends HttpRequest{
+
+  constructor(
+    private http: HttpClient,
+    private ngforage: NgForage
+  ) {
+    super();
+  }
+
+  get(url: string): Observable<any> {
+    throw new Error('Method not implemented.');
+  }
+  post(url: string): Observable<any> {
+    throw new Error('Method not implemented.');
+  }
+  put(url: string): Observable<any> {
+    throw new Error('Method not implemented.');
+  }
+  delete(url: string): Observable<any> {
+    throw new Error('Method not implemented.');
+  }
+
+  authDelete(url: string): Observable<any> {
+    return undefined;
+  }
+
+  authGet(url: string): Observable<any> {
+    return undefined;
+  }
+
+  authPost(url: string): Observable<any> {
+    return undefined;
+  }
+
+  authPut(url: string): Observable<any> {
+    return undefined;
+  }
+}

frontend/angular-ts/src/CX/services/http-requtst/http-request.ts

@@ -0,0 +1,20 @@
+import { Observable } from 'rxjs';
+
+export abstract class HttpRequest {
+  constructor() {}
+  abstract get(url: string): Observable<any>;
+
+  abstract post(url: string): Observable<any>;
+
+  abstract put(url: string): Observable<any>;
+
+  abstract delete(url: string): Observable<any>;
+
+  abstract authGet(url: string): Observable<any>;
+
+  abstract authPost(url: string): Observable<any>;
+
+  abstract authPut(url: string): Observable<any>;
+
+  abstract authDelete(url: string): Observable<any>;
+}

frontend/angular-ts/src/CX/services/selective-preloading-strategy.service.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { PreloadingStrategy, Route } from '@angular/router';
+import { Observable, of } from 'rxjs';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class SelectivePreloadingStrategyService implements PreloadingStrategy {
+
+    constructor() {
+    }
+
+    preload(route: Route, load: () => Observable<any>): Observable<any> {
+        if (route.data && route.data?.preload) {
+            return load();
+        } else {
+            return of(null);
+        }
+    }
+}

frontend/angular-ts/src/app/app-routing.module.ts

@@ -0,0 +1,37 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+import { SelectivePreloadingStrategyService } from '../CX/services/selective-preloading-strategy.service';
+import { AuthGuard } from './auth.guard';
+
+const routes: Routes = [
+  {
+    path: '',
+    pathMatch: 'full',
+    redirectTo: 'page',
+  },
+  {
+    path: 'page',
+    canActivate: [AuthGuard],
+    loadChildren: () => import('./pages/pages.module').then(m => m.PagesModule)
+  },
+  {
+    path: 'login',
+    canActivate: [AuthGuard],
+    loadChildren: () => import('./login/login.module').then(m => m.LoginModule)
+  }
+];
+
+
+@NgModule({
+  imports: [
+    RouterModule.forRoot(
+      routes,
+      {
+        useHash: true,
+        preloadingStrategy:  SelectivePreloadingStrategyService
+      }
+    )],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }

frontend/angular-ts/src/app/app.component.html

@@ -0,0 +1 @@
+<router-outlet></router-outlet>

frontend/angular-ts/src/app/app.component.spec.ts

@@ -0,0 +1,35 @@
+import { TestBed } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        RouterTestingModule
+      ],
+      declarations: [
+        AppComponent
+      ],
+    }).compileComponents();
+  });
+
+  it('should create the app', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app).toBeTruthy();
+  });
+
+  it(`should have as title 'angular-ts'`, () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.componentInstance;
+    expect(app.title).toEqual('angular-ts');
+  });
+
+  it('should render title', () => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.nativeElement;
+    expect(compiled.querySelector('.content span').textContent).toContain('angular-ts app is running!');
+  });
+});

frontend/angular-ts/src/app/app.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { NgForage } from 'ngforage';
+
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+  title = 'angular-ts';
+  constructor(
+  ) {
+  }
+}

frontend/angular-ts/src/app/app.module.ts

@@ -0,0 +1,34 @@
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { RouteReuseStrategy } from '@angular/router';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { HttpClientJsonpModule, HttpClientModule } from '@angular/common/http';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { SimpleReuseStrategy } from '../CX/services/SimpleReuseStrategy';
+
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    HttpClientModule,
+    BrowserAnimationsModule,
+    HttpClientJsonpModule,
+    ReactiveFormsModule,
+    FormsModule,
+  ],
+  providers: [
+    {
+      provide: RouteReuseStrategy,
+      useClass: SimpleReuseStrategy
+    }
+  ],
+  bootstrap: [AppComponent]
+})
+export class AppModule { }

frontend/angular-ts/src/app/auth.guard.ts

@@ -0,0 +1,68 @@
+import { Injectable } from '@angular/core';
+import {
+  CanActivate,
+  CanActivateChild,
+  CanDeactivate,
+  CanLoad,
+  Route,
+  UrlSegment,
+  ActivatedRouteSnapshot,
+  RouterStateSnapshot,
+  UrlTree,
+  Router,
+  Resolve
+} from '@angular/router';
+
+import { Observable } from 'rxjs';
+import { NgForage } from 'ngforage';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class AuthGuard implements CanActivate, CanActivateChild, CanDeactivate<unknown>, CanLoad, Resolve<any> {
+  constructor(
+    private ngForage: NgForage,
+    private router: Router
+  ) {
+  }
+  canActivate(
+    route: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    this.ngForage.getItem('TOKEN').then(res => {
+      if (!!!res) {
+        this.router.navigate(['login']);
+        this.ngForage.setItem('TOKEN', 'aaaa74654sdf4as6d4');
+      }
+    });
+    console.log(route);
+    console.log(state);
+    return true;
+  }
+
+  canActivateChild(
+    childRoute: ActivatedRouteSnapshot,
+    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    console.log(childRoute);
+    console.log(state);
+    return true;
+  }
+
+  canDeactivate(
+    component: unknown,
+    currentRoute: ActivatedRouteSnapshot,
+    currentState: RouterStateSnapshot,
+    nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    return true;
+  }
+
+  canLoad(
+    route: Route,
+    segments: UrlSegment[]): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
+    return true;
+  }
+
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any {
+    console.log(route);
+    console.log(state);
+  }
+}

frontend/angular-ts/src/app/login/login-routing.module.ts

@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+
+const routes: Routes = [];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class LoginRoutingModule { }

frontend/angular-ts/src/app/login/login.component.html

@@ -0,0 +1 @@
+<p>login works!</p>

frontend/angular-ts/src/app/login/login.component.ts

@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-login',
+  templateUrl: './login.component.html',
+  styleUrls: ['./login.component.scss']
+})
+export class LoginComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+}

frontend/angular-ts/src/app/login/login.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { LoginRoutingModule } from './login-routing.module';
+import { LoginComponent } from './login.component';
+
+
+@NgModule({
+  declarations: [LoginComponent],
+  imports: [
+    CommonModule,
+    LoginRoutingModule
+  ]
+})
+export class LoginModule { }

frontend/angular-ts/src/app/pages/data-resolver.service.ts

@@ -0,0 +1,22 @@
+import { Injectable } from '@angular/core';
+import {
+  Router, Resolve, RouterStateSnapshot,
+  ActivatedRouteSnapshot,
+} from '@angular/router';
+import { Observable, Subject } from 'rxjs';
+import { map, take } from 'rxjs/operators';
+
+
+@Injectable({
+  providedIn: 'root',
+})
+export class DataResolverService implements Resolve<any>{
+
+  constructor() {
+  }
+
+  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> | Promise<any> | any {
+    console.log(1);
+    return 'aaa';
+  }
+}

frontend/angular-ts/src/app/pages/map/map-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { MapComponent } from './map.component';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: MapComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class MapRoutingModule { }

frontend/angular-ts/src/app/pages/map/map.component.html

@@ -0,0 +1 @@
+<div id='map' style='width: 100%; height: 100%'></div>

frontend/angular-ts/src/app/pages/map/map.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { MapComponent } from './map.component';
+
+describe('MapComponent', () => {
+  let component: MapComponent;
+  let fixture: ComponentFixture<MapComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ MapComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(MapComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

frontend/angular-ts/src/app/pages/map/map.component.ts

@@ -0,0 +1,42 @@
+import { Component, OnInit, AfterViewInit } from '@angular/core';
+
+import L from 'leaflet';
+import {tiandituTileLayer, tiledMapLayer} from '@supermap/iclient-leaflet';
+
+@Component({
+  selector: 'app-map',
+  templateUrl: './map.component.html',
+  styleUrls: ['./map.component.scss']
+})
+export class MapComponent implements OnInit, AfterViewInit {
+
+  index = 1;
+
+  constructor() { }
+
+  ngOnInit(): void {
+  }
+
+  ngAfterViewInit() {
+    console.log(L.CRS);
+    const url = 'https://iserver.supermap.io/iserver/services/map-world/rest/maps/World';
+    const map = L.map('map', {
+      center: [0, 0],
+      zoom: 2,
+      crs: L.CRS.TianDiTu_WGS84
+    });
+    tiledMapLayer(url).addTo(map);
+    tiandituTileLayer({
+      layerType: 'img',
+      key: '95304915c6b414cf00e4a65beca9c8da'
+    }).addTo(map);
+    tiandituTileLayer({
+      key: '95304915c6b414cf00e4a65beca9c8da'
+    }).addTo(map);
+    tiandituTileLayer({
+      isLabel: true,
+      key: '95304915c6b414cf00e4a65beca9c8da'
+    }).addTo(map);
+  }
+
+}

frontend/angular-ts/src/app/pages/map/map.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { MapRoutingModule } from './map-routing.module';
+import { MapComponent } from './map.component';
+
+
+@NgModule({
+  declarations: [MapComponent],
+  imports: [
+    CommonModule,
+    MapRoutingModule
+  ]
+})
+export class MapModule { }

frontend/angular-ts/src/app/pages/pages-routing.module.ts

@@ -0,0 +1,36 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { PagesComponent } from './pages.component';
+import { DataResolverService } from './data-resolver.service';
+
+const routes: Routes = [
+  {
+    path: '',
+    component: PagesComponent,
+    children: [
+      {
+        path: '',
+        pathMatch: 'full',
+        redirectTo: 'map',
+      },
+      {
+        path: 'superMapGis',
+        loadChildren: () => import('./super-map-gis/super-map-gis.module').then(m => m.SuperMapGisModule),
+        resolve: {
+          data: DataResolverService
+        }
+      },
+      {
+        path: 'map',
+        loadChildren: () => import('./map/map.module').then(m => m.MapModule)
+      }
+    ],
+  },
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule],
+})
+export class PagesRoutingModule {
+}

frontend/angular-ts/src/app/pages/pages.component.html

@@ -0,0 +1,3 @@
+<div style='width: 100%; height: 100%'>
+  <router-outlet></router-outlet>
+</div>

frontend/angular-ts/src/app/pages/pages.component.ts

@@ -0,0 +1,34 @@
+import { Component, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { ActivatedRouteSnapshot, ChildActivationEnd, NavigationEnd, Router } from '@angular/router';
+import { filter, map, last, first } from 'rxjs/operators';
+
+@Component({
+  selector: 'app-pages',
+  templateUrl: './pages.component.html',
+  styleUrls: ['./pages.component.scss']
+})
+export class PagesComponent implements OnInit, OnChanges {
+
+  constructor(
+    private router: Router
+  ) {
+    console.log(2);
+    // @ts-ignore
+    this.router.events
+      .pipe(
+        // filter(event => event instanceof NavigationEnd  ),
+        // first(),
+      )
+      .subscribe(event => {
+        console.log(event);
+      });
+  }
+
+  ngOnInit(): void {
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    console.log(1);
+  }
+
+}

frontend/angular-ts/src/app/pages/pages.module.ts

@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { PagesRoutingModule } from './pages-routing.module';
+import { PagesComponent } from './pages.component';
+
+
+@NgModule({
+  declarations: [PagesComponent],
+  imports: [
+    CommonModule,
+    PagesRoutingModule
+  ]
+})
+export class PagesModule { }

frontend/angular-ts/src/app/pages/super-map-gis/super-map-gis-routing.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { SuperMapGisComponent } from './super-map-gis.component'
+
+const routes: Routes = [
+  {
+    path: '',
+    component: SuperMapGisComponent
+  }
+];
+
+@NgModule({
+  imports: [RouterModule.forChild(routes)],
+  exports: [RouterModule]
+})
+export class SuperMapGisRoutingModule { }

frontend/angular-ts/src/app/pages/super-map-gis/super-map-gis.component.html

@@ -0,0 +1 @@
+<div style='width: 100%; height: 100%' id='cesiumContainer'></div>

frontend/angular-ts/src/app/pages/super-map-gis/super-map-gis.component.ts

@@ -0,0 +1,275 @@
+import { Component, OnInit, AfterViewInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+import * as _ from 'lodash';
+
+import { SuperMapGisService } from './super-map-gis.service';
+
+declare var Cesium;
+
+export interface UserPlace {
+  name: string;
+  companyName: string;
+  latitude: number;
+  longitude: number;
+  centralPoint?: boolean;
+}
+
+@Component({
+  selector: 'app-super-map-gis',
+  templateUrl: './super-map-gis.component.html',
+  styleUrls: ['./super-map-gis.component.scss'],
+})
+export class SuperMapGisComponent implements OnInit, AfterViewInit {
+
+  userPlaceList: UserPlace[];
+
+  viewer: any;
+  scene: any;
+
+  lineArr = [];
+
+  constructor(
+    private superMapGisService: SuperMapGisService,
+    private route: ActivatedRoute
+  ) {
+    this.userPlaceList = [
+      {
+        name: 'xx',
+        companyName: '前端（vue）',
+        latitude: 0.6073955666863973,
+        longitude: 1.9816311125865307,
+      },
+      {
+        name: '和尚',
+        companyName: '后端（node）',
+        latitude: 0.6079849247637235,
+        longitude: 1.9810105559145992,
+        centralPoint: true,
+      },
+      {
+        name: 'Only efforts',
+        companyName: '前端（vue）',
+        latitude: 0.6075121542802234,
+        longitude: 1.9819805572034528,
+      },
+    ];
+  }
+
+  // latitude: 0.6075121542802234
+  // longitude: 1.9819805572034528
+
+  ngOnInit(): void {
+    this.route.data.subscribe(res => console.log(res));
+    console.log(1);
+  }
+
+  ngAfterViewInit() {
+    this.initMap();
+  }
+
+  /*
+  * 初始化地图
+  * */
+  initMap(): void {
+    /*
+    * 创建地图图层
+    * */
+    this.viewer = new Cesium.Viewer('cesiumContainer', {
+      contextOptions: {
+        requestWebgl2: true,
+      },
+      terrainProvider: new Cesium.CesiumTerrainProvider({
+        url: 'https://www.supermapol.com/realspace/services/3D-stk_terrain/rest/realspace/datas/info/data/path',
+        requestWaterMask: true,
+        requestVertexNormals: true,
+        isSct: false,
+      }), // 使用地形服务
+      homeButton: true,
+      sceneModePicker: true,
+      selectionIndicator: false, // 去除选中Entity聚焦框
+      navigationHelpButton: false,
+      infoBox: false,
+      vrButton: false,
+      fullscreenButton: false,
+      geocoder: false,
+      showRenderLoopErrors: false,
+      center: {y: 34.826718, x: 114.375556, z: 58000.0, pitch: -30},
+      style: {atmosphere: true, lighting: false, fog: false, testTerrain: false},
+      contextmenu: false,
+      mouseZoom: false,
+      navigation: false,
+    });
+
+    this.viewer.scene.screenSpaceCameraController.minimumZoomDistance = 500; // 最小级别
+    this.viewer.scene.screenSpaceCameraController.maximumZoomDistance = 10000000; // 最大级别
+    this.viewer.cesiumWidget.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK); // 清除默认鼠标双击事件
+
+
+    this.scene = this.viewer.scene;
+
+    /*
+    * 解决标点显示不全问题
+    * 去除深度检测
+    * */
+    this.scene.globe.depthTestAgainstTerrain = false;
+    const imageryLayers = this.viewer.imageryLayers;
+    imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({
+      credit: new Cesium.Credit('天地图全球影像服务     数据来源：国家地理信息公共服务平台 & 四川省测绘地理信息局'),
+      token: '95304915c6b414cf00e4a65beca9c8da',
+    }));
+    // 初始化天地图全球中文注记服务，并添加至影像图层
+    const labelImagery = new Cesium.TiandituImageryProvider({
+      mapStyle: Cesium.TiandituMapsStyle.CIA_C, // 天地图全球中文注记服务（经纬度投影）
+      token: '95304915c6b414cf00e4a65beca9c8da',
+    });
+    imageryLayers.addImageryProvider(labelImagery);
+
+    /*
+    * 去除supermap等文字图标
+    * */
+    const credit = this.viewer.scene.frameState.creditDisplay;
+    credit.container.removeChild(credit._cesiumCreditContainer);
+    credit.container.removeChild(credit._expandLink);
+
+    this.setAreaBorderLine();
+
+    setTimeout(() => {
+      this.setCrewAddress();
+    }, 2000);
+    this.viewerEvent();
+  }
+
+  /*
+  * 地图事件
+  * */
+  viewerEvent(): void {
+    const handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas);
+    handler.setInputAction(e => {
+      // 获取点击位置笛卡尔坐标
+      // const position = this.scene.pickPosition(e.position);
+      // 将笛卡尔坐标转化为经纬度坐标
+      // const cartographic = Cesium.Cartographic.fromCartesian(position);
+
+      const pick = this.viewer.scene.pick(e.position); // 获取点击点位信息
+
+      console.log(pick);
+      console.log(pick);
+      if (pick && pick.id && pick.id.type === 'crewAddress') {
+        const longitude = Cesium.Math.toDegrees(pick.id.data.longitude);
+        const latitude = Cesium.Math.toDegrees(pick.id.data.latitude);
+        this.gotoAddress(longitude, latitude, 1000);
+      }
+    }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
+    handler.setInputAction(() => {
+      console.log(1);
+    }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);
+  }
+
+  /*
+  * 放置图标
+  * */
+  setCrewAddress(): void {
+    this.userPlaceList.forEach(item => {
+      const longitude = Cesium.Math.toDegrees(item.longitude);
+      const latitude = Cesium.Math.toDegrees(item.latitude);
+
+      if (item.centralPoint) {
+        this.gotoAddress(longitude, latitude, 20000);
+      }
+
+      this.viewer.entities.add({
+        position: Cesium.Cartesian3.fromDegrees(longitude, latitude, 2.61),
+        label: {
+          show: true,
+          text: item.name,
+          font: '12px Source Han Sans CN',    // 字体样式
+          fillColor: Cesium.Color.WHITE,        // 字体颜色
+          backgroundColor: Cesium.Color.RED,    // 背景颜色
+          showBackground: false,                // 是否显示背景颜色
+          style: Cesium.LabelStyle.FILL,        // label样式
+          verticalOrigin: Cesium.VerticalOrigin.CENTER, // 垂直位置
+          horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平位置
+          pixelOffset: new Cesium.Cartesian2(1, -25),            // 偏移
+          eyeOffset: new Cesium.Cartesian3(0, 0, -10),
+          heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
+          // disableDepthTestDistance: Number.POSITIVE_INFINITY,
+        },
+        billboard: {
+          image: '../../../assets/images/icon-air-city-level1.svg',
+          verticalOrigin: Cesium.VerticalOrigin.BOTTOM, // 垂直位置
+          horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平位置
+          height: 42,
+          width: 100,
+          scale: 1,
+          heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
+          // disableDepthTestDistance: Number.POSITIVE_INFINITY
+        },
+        type: 'crewAddress',
+        data: item
+      });
+
+      this.viewer.entities.add({
+        position: Cesium.Cartesian3.fromDegrees(longitude, latitude, 2.61),
+        label: {
+          show: true,
+          text: item.companyName,
+          font: '14px Source Han Sans CN',    // 字体样式
+          fillColor: Cesium.Color.RED,        // 字体颜色
+          backgroundColor: Cesium.Color.RED,    // 背景颜色
+          showBackground: false,                // 是否显示背景颜色
+          style: Cesium.LabelStyle.FILL,        // label样式
+          verticalOrigin: Cesium.VerticalOrigin.CENTER, // 垂直位置
+          horizontalOrigin: Cesium.HorizontalOrigin.CENTER, // 水平位置
+          pixelOffset: new Cesium.Cartesian2(1, -55),            // 偏移
+          eyeOffset: new Cesium.Cartesian3(0, 0, -10),
+          heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
+          // disableDepthTestDistance: Number.POSITIVE_INFINITY,
+        },
+      });
+    });
+
+  }
+
+  /*
+  * 绘制行政区划边界线
+  * */
+  setAreaBorderLine(): void {
+    this.superMapGisService.getZhengZhouData()
+      .subscribe(res => {
+        res.features.forEach(item => {
+          this.viewer.entities.add({
+            polygon: {
+              hierarchy: {
+                positions: Cesium.Cartesian3.fromDegreesArray(_.flattenDeep(item.geometry.coordinates)),
+              },
+              material: Cesium.Color.BLUE.withAlpha(0.1),
+            },
+            polyline: {
+              positions: Cesium.Cartesian3.fromDegreesArray(_.flattenDeep(item.geometry.coordinates)),
+              material: Cesium.Color.TAN,
+            },
+            type: 'poly',
+          });
+        });
+      });
+  }
+
+  /*
+  * 定位中心点
+  * */
+  gotoAddress(longitude, latitude, height, isOrientation?): void {
+    const orientation = {
+      // 指向
+      heading: Cesium.Math.toRadians(0, 0),
+      // 视角
+      pitch: Cesium.Math.toRadians(-35),
+      roll: 0.0,
+    };
+    this.viewer.camera.flyTo({
+      destination: Cesium.Cartesian3.fromDegrees(longitude, latitude, height),
+      duration: 3,
+      orientation: isOrientation ? orientation : {},
+    });
+  }
+}

frontend/angular-ts/src/app/pages/super-map-gis/super-map-gis.module.ts

@@ -0,0 +1,16 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { SuperMapGisRoutingModule } from './super-map-gis-routing.module';
+import { SuperMapGisComponent } from './super-map-gis.component';
+
+
+@NgModule({
+  declarations: [SuperMapGisComponent],
+  imports: [
+    CommonModule,
+    SuperMapGisRoutingModule
+  ],
+  exports: [SuperMapGisComponent]
+})
+export class SuperMapGisModule { }

frontend/angular-ts/src/app/pages/super-map-gis/super-map-gis.service.ts

@@ -0,0 +1,18 @@
+import { Injectable } from '@angular/core';
+
+import { HttpClient } from '@angular/common/http'
+import { Observable } from 'rxjs'
+
+@Injectable({
+  providedIn: 'root'
+})
+export class SuperMapGisService {
+
+  constructor(
+    private http: HttpClient
+  ) { }
+
+  getZhengZhouData(): Observable<any> {
+    return this.http.get('../../../assets/json/zhengzhou.json');
+  }
+}

frontend/angular-ts/src/assets/images/icon-air-city-level1.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="37px" viewBox="0 0 40 37" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 52.5 (67469) - http://www.bohemiancoding.com/sketch -->
+    <title>icon-微型</title>
+    <desc>Created with Sketch.</desc>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="icon-微型" transform="translate(-3.000000, -5.000000)" fill-rule="nonzero">
+            <g id="分组-27-copy-2" transform="translate(3.000000, 5.000000)">
+                <polygon id="矩形" fill="#23CF0A" points="0 0 40 0 40 26.1512346 25.9170016 26.1512346 20.3673956 37 14.4204378 26.1512346 0 26.1512346"></polygon>
+                <path d="M2.5,2.5 L2.5,23.5 L37.5,23.5 L37.5,2.5 L2.5,2.5 Z" id="矩形" stroke="#FFFFFF"></path>
+            </g>
+            <rect id="矩形-copy-26" x="0" y="0" width="47" height="46"></rect>
+        </g>
+    </g>
+</svg>