chore: update to last version

lvisei · lvisei · commit 58ea0fb48155 · 2020-09-24T19:04:05.000+08:00
diff --git a/.eslintignore b/.eslintignore
@@ -11,4 +11,5 @@ package.json
 .*.js
 *.config.js
 
-/src/utils/registerServiceWorker.js
+/src/utils/registerServiceWorker.js
+/src/libs/
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -8,7 +8,7 @@ module.exports = {
     'no-console': 'off',
     'no-debugger': 'off',
     'no-unused-vars': 'off',
-    'prettier/prettier': 'error'
+    'prettier/prettier': process.env.NODE_ENV === 'development' ? 'warn' : 'error',
     // '@typescript-eslint/no-unused-vars': 'off'
-  }
+  },
 };
diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+public/3D Tiles/Test_mode
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,8 +18,9 @@
     "@hot-loader/react-dom": "^16.13.0",
     "antd": "^3.26.18",
     "cesium": "^1.73.0",
+    "cesium-tdt": "^1.1.0",
     "memoize-one": "^5.1.1",
-    "mobx": "^5.15.6",
+    "mobx": "^5.15.7",
     "mobx-react": "^6.3.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
@@ -55,7 +56,7 @@
     "@craco/craco": "^5.6.4",
     "@types/jest": "^26.0.14",
     "@types/memoize-one": "^5.1.2",
-    "@types/node": "^14.11.1",
+    "@types/node": "^14.11.2",
     "@types/react": "^16.9.49",
     "@types/react-dom": "^16.9.8",
     "babel-plugin-import": "^1.13.0",
@@ -67,7 +68,7 @@
     "lint-staged": "^10.4.0",
     "patch-package": "^6.2.2",
     "prettier": "^2.1.2",
-    "react-hot-loader": "^4.12.21",
+    "react-hot-loader": "^4.13.0",
     "react-scripts": "^3.4.3",
     "typescript": "^3.9.7"
   }
diff --git a/src/config/index.ts b/src/config/index.ts
@@ -0,0 +1,7 @@
+const cesiumAccessToken =
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyMWQ3MWM4Yy01ZGZjLTRkZGEtYjJhMi1hMDdkYWZhN2I2YWYiLCJpZCI6NTc3Nywic2NvcGVzIjpbImFzbCIsImFzciIsImdjIl0sImlhdCI6MTU2MTUzNDQwMX0.h8scGb5fMjG2UFsqvXpQL7YvCheiI-YWUQUyBcQym5s';
+
+export const cesiumDefalutConfig = {
+  cesiumAccessToken,
+  defaultView: [80, 22, 130, 50],
+};
diff --git a/src/containers/AppViewer/Czml.tsx b/src/containers/AppViewer/Czml.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
-import Cesium from 'cesium';
+import { Viewer, Resource } from 'cesium';
 import { CzmlDataSource, withCesium } from 'resium';
-import { Resource } from '@/stores/modules/appViewer';
 
 interface Iprops {
-  cesium?: { viewer: Cesium.Viewer };
-  czmlData: Resource;
+  cesium?: { viewer: Viewer };
+  czmlData: string | object | Resource | undefined;
 }
 
 const Czml: React.FunctionComponent<Iprops> = ({ cesium, czmlData }) => {
diff --git a/src/containers/AppViewer/Entitys.tsx b/src/containers/AppViewer/Entitys.tsx
@@ -3,14 +3,14 @@ import { Color, Cartesian3 } from 'cesium';
 import { Entity, PointGraphics, EntityDescription } from 'resium';
 
 const Entitys = () => {
-  const entityPosition = Cartesian3.fromDegrees(105.0707383, 30.7117244, 100);
+  const entityPosition = Cartesian3.fromDegrees(104.0707383, 30.7117244, 100);
   console.log('Entitys render');
   return (
-    <Entity name="Sokyo" position={entityPosition}>
-      <PointGraphics pixelSize={25} color={Color.CRIMSON} outlineWidth={5} outlineColor={Color.LIGHTCORAL} />
+    <Entity name="成都" position={entityPosition}>
+      <PointGraphics pixelSize={3} color={Color.CRIMSON} outlineWidth={1} outlineColor={Color.LIGHTCORAL} />
       <EntityDescription>
         <h1>Hello, world.</h1>
-        <p>JSX is available here!</p>
+        <p>成都!</p>
       </EntityDescription>
     </Entity>
   );
diff --git a/src/containers/AppViewer/GeoJson.tsx b/src/containers/AppViewer/GeoJson.tsx
@@ -1,10 +1,9 @@
 import React from 'react';
-import { Viewer as CesiumViewer } from 'cesium';
+import { Viewer as CesiumViewer, Resource } from 'cesium';
 import { GeoJsonDataSource, Context, useCesium } from 'resium';
-import { Resource } from '@/stores/modules/appViewer';
 
 interface Iprops {
-  geoJsonData: Resource;
+  geoJsonData: string | object | Resource | undefined;
 }
 
 interface ICesiumContext {
diff --git a/src/containers/AppViewer/ImageryLayers.tsx b/src/containers/AppViewer/ImageryLayers.tsx
@@ -2,12 +2,11 @@ import React from 'react';
 import { WebMapTileServiceImageryProvider } from 'cesium';
 import { ImageryLayer } from 'resium';
 import memoize from 'memoize-one';
-import { WebMapTileServiceImagery } from '@/stores/modules/appViewer';
 
 const imageryProvider = memoize((imageryProvider) => new WebMapTileServiceImageryProvider(imageryProvider));
 
 const ImageryLayers = React.memo(
-  ({ imageryProviders }: { imageryProviders: WebMapTileServiceImagery[] }) => {
+  ({ imageryProviders }: { imageryProviders: WebMapTileServiceImageryProvider.ConstructorOptions[] }) => {
     console.log('ImageryLayers render');
     return (
       <>
diff --git a/src/containers/AppViewer/index.tsx b/src/containers/AppViewer/index.tsx
@@ -1,18 +1,28 @@
 import React, { PureComponent } from 'react';
 import { observer, inject } from 'mobx-react';
-import * as Cesium from 'cesium';
-import { CesiumTerrainProvider } from 'cesium';
-import { Viewer, CameraFlyTo } from 'resium';
-import appViewerStore from '@/stores/modules/appViewer';
+import {
+  Viewer as cesiumViewer,
+  Camera,
+  Ion,
+  IonResource,
+  CesiumTerrainProvider,
+  Cartographic,
+  Rectangle,
+  Cartesian3,
+  Matrix4,
+  Cesium3DTileset as cesium3DTileset,
+} from 'cesium';
+import { Viewer, CameraFlyTo, Cesium3DTileset } from 'resium';
+import { cesiumDefalutConfig } from '@/config';
 import ImageryLayers from './ImageryLayers';
 import GeoJson from './GeoJson';
 import Czml from './Czml';
 import EventHandler from './EventHandler';
 import Entitys from './Entitys';
 import { IStores } from '@/stores';
 
-Cesium.Ion.defaultAccessToken = appViewerStore.cesiumAccessToken;
-// (Cesium as any).Ion.defaultAccessToken = appViewerStore.cesiumAccessToken;
+Camera.DEFAULT_VIEW_RECTANGLE = Rectangle.fromDegrees(...cesiumDefalutConfig.defaultView);
+Ion.defaultAccessToken = cesiumDefalutConfig.cesiumAccessToken;
 
 interface IProps {
   appViewer?: IStores['appViewer'];
@@ -22,31 +32,40 @@ interface IProps {
 @observer
 class AppViewer extends PureComponent<IProps, {}> {
   ref: { current: any | HTMLDivElement };
-  viewer: Cesium.Viewer | undefined | any;
+  viewer: cesiumViewer | undefined;
   terrainProvider: CesiumTerrainProvider;
 
   constructor(props: IProps) {
     super(props);
     this.ref = React.createRef();
     this.terrainProvider = new CesiumTerrainProvider({
-      url: Cesium.IonResource.fromAssetId(3956),
+      url: IonResource.fromAssetId(3956),
     });
     this.state = {};
   }
 
   componentDidMount() {
     if (this.ref.current) {
       this.viewer = this.ref.current.cesiumElement;
-      this.viewer.scene.debugShowFramesPerSecond = true;
-      this.viewer.cesiumWidget.creditContainer.style.display = 'none';
+      this.viewer!.scene.debugShowFramesPerSecond = true;
+      this.viewer!.cesiumWidget.creditContainer.setAttribute('style', 'display:none;');
     }
   }
 
-  _handleReady = (tileset: any) => {
-    console.log(tileset);
-
+  _handleReady3DTileset = (tileset: cesium3DTileset) => {
+    // console.log('tileset: ', tileset);
     if (this.viewer) {
-      this.viewer.zoomTo(tileset);
+      const boundingSphere = tileset.boundingSphere;
+      const cartographic = Cartographic.fromCartesian(boundingSphere.center);
+      const surface = Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
+      const offset = Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, -100);
+      const translation = Cartesian3.subtract(offset, surface, new Cartesian3());
+      tileset.modelMatrix = Matrix4.fromTranslation(translation);
+      const that = this.viewer;
+      setTimeout(() => {
+        that.flyTo(tileset);
+      }, 1500);
+      // this.viewer.flyTo(tileset);
     }
   };
 
@@ -55,7 +74,7 @@ class AppViewer extends PureComponent<IProps, {}> {
   }
 
   render() {
-    const { geoJsonData, czmlData, destination, imageryProviders } = this.props.appViewer!;
+    const { geoJsonData, czmlData, destination, imageryProviders, threeDTileset } = this.props.appViewer!;
 
     console.log('AppViewer render');
 
@@ -64,6 +83,7 @@ class AppViewer extends PureComponent<IProps, {}> {
         full
         animation={false}
         shouldAnimate={true}
+        selectionIndicator={true}
         baseLayerPicker={false}
         timeline={false}
         geocoder={false}
@@ -76,7 +96,7 @@ class AppViewer extends PureComponent<IProps, {}> {
         {destination ? <CameraFlyTo destination={destination} /> : null}
         <GeoJson geoJsonData={geoJsonData} />
         <Czml czmlData={czmlData} />
-        {/* <Cesium3DTileset url={IonResource.fromAssetId(5714)} onReady={this._handleReady} /> */}
+        <Cesium3DTileset url={threeDTileset} onReady={this._handleReady3DTileset} />
       </Viewer>
     );
   }
diff --git a/src/helpers/index.ts b/src/helpers/index.ts
@@ -0,0 +1 @@
+export {};
diff --git a/src/helpers/tdt-service.ts b/src/helpers/tdt-service.ts
@@ -0,0 +1,60 @@
+// import 'cesium-tdt/dist/cesiumTdt.js';
+import { UrlTemplateImageryProvider, WebMercatorTilingScheme } from 'cesium';
+
+// 三维服务 http://lbs.tianditu.gov.cn/docs/#/sanwei/
+
+const token = 'e60679f6e9718d3426f745fd8cd94cbd';
+// 服务域名
+const tdtUrl = 'https://t{s}.tianditu.gov.cn/';
+// 服务负载子域
+const subdomains = ['0', '1', '2', '3', '4', '5', '6', '7'];
+
+export const td_img_imageryProvider = {
+  url: `https://t0.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=${token}`,
+  layer: 'tdtBasicLayer',
+  style: 'default',
+  format: 'image/jpeg',
+  tileMatrixSetID: 'GoogleMapsCompatible',
+  maximumLevel: 18,
+};
+export const td_cia_imageryProvider = {
+  url: `https://t0.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=${token}`,
+  layer: 'tdtAnnoLayer',
+  style: 'default',
+  format: 'image/jpeg',
+  tileMatrixSetID: 'GoogleMapsCompatible',
+  maximumLevel: 18,
+};
+
+// 影像服务
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const imgMap = new UrlTemplateImageryProvider({
+  url: tdtUrl + 'DataServer?T=img_w&x={x}&y={y}&l={z}&tk=' + token,
+  subdomains: subdomains,
+  tilingScheme: new WebMercatorTilingScheme(),
+  maximumLevel: 18,
+});
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const imgAnnoMap = new UrlTemplateImageryProvider({
+  url: tdtUrl + 'DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=' + token,
+  subdomains: subdomains,
+  tilingScheme: new WebMercatorTilingScheme(),
+  maximumLevel: 18,
+});
+
+// 国界服务
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const iboMap = new UrlTemplateImageryProvider({
+  url: tdtUrl + 'DataServer?T=ibo_w&x={x}&y={y}&l={z}&tk=' + token,
+  subdomains: subdomains,
+  tilingScheme: new WebMercatorTilingScheme(),
+  maximumLevel: 10,
+});
+
+// 地形服务
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const terrainUrls = subdomains.map((item) => tdtUrl.replace('{s}', item) + 'mapservice/swdx?tk=' + token);
+
+// const provider = new Cesium!.GeoTerrainProvider({
+//   urls: terrainUrls,
+// });
diff --git a/src/stores/modules/appViewer.ts b/src/stores/modules/appViewer.ts
@@ -1,52 +1,9 @@
 import { observable, action } from 'mobx';
-import Cesium from 'cesium';
-
-const cesiumAccessToken =
-  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyMWQ3MWM4Yy01ZGZjLTRkZGEtYjJhMi1hMDdkYWZhN2I2YWYiLCJpZCI6NTc3Nywic2NvcGVzIjpbImFzbCIsImFzciIsImdjIl0sImlhdCI6MTU2MTUzNDQwMX0.h8scGb5fMjG2UFsqvXpQL7YvCheiI-YWUQUyBcQym5s';
-const td_img_imageryProvider = {
-  url:
-    'https://t0.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=e60679f6e9718d3426f745fd8cd94cbd',
-  layer: 'tdtBasicLayer',
-  style: 'default',
-  format: 'image/jpeg',
-  tileMatrixSetID: 'GoogleMapsCompatible',
-  maximumLevel: 18,
-};
-const td_cia_imageryProvider = {
-  url:
-    'https://t0.tianditu.gov.cn/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=e60679f6e9718d3426f745fd8cd94cbd',
-  layer: 'tdtAnnoLayer',
-  style: 'default',
-  format: 'image/jpeg',
-  tileMatrixSetID: 'GoogleMapsCompatible',
-  maximumLevel: 18,
-};
-
-export type Resource = string | object | Cesium.Resource | undefined;
-
-export type WebMapTileServiceImagery = {
-  url: string;
-  format?: string;
-  layer: string;
-  style: string;
-  tileMatrixSetID: string;
-  tileMatrixLabels?: any[];
-  clock?: Cesium.Clock;
-  times?: Cesium.TimeIntervalCollection;
-  dimensions?: any;
-  tileWidth?: number;
-  tileHeight?: number;
-  tilingScheme?: Cesium.TilingScheme;
-  rectangle?: Cesium.Rectangle;
-  minimumLevel?: number;
-  maximumLevel?: number;
-  ellipsoid?: Cesium.Ellipsoid;
-  credit?: Cesium.Credit | string;
-  subdomains?: string | string[];
-};
-
-type Destination = Cesium.Cartesian3 | Cesium.Rectangle | undefined;
+import { Cartesian3, Rectangle, Resource, WebMapTileServiceImageryProvider } from 'cesium';
+import { td_img_imageryProvider, td_cia_imageryProvider } from '@/helpers/tdt-service';
 
+type CesiumResource = string | object | Resource | undefined;
+type Destination = Cartesian3 | Rectangle | undefined;
 interface IPosition {
   long: number | string;
   lat: number | string;
@@ -55,25 +12,20 @@ interface IPosition {
 }
 
 export interface IAppViewerState {
-  cesiumAccessToken: string;
-  td_img_imageryProvider: WebMapTileServiceImagery;
-  td_cia_imageryProvider: WebMapTileServiceImagery;
-  imageryProviders: WebMapTileServiceImagery[];
-  czmlData: Resource;
-  geoJsonData: Resource;
+  imageryProviders: WebMapTileServiceImageryProvider.ConstructorOptions[];
+  czmlData: CesiumResource;
+  geoJsonData: CesiumResource;
   destination: Destination;
   positionData: IPosition;
 }
 
 export class AppViewer implements IAppViewerState {
-  public cesiumAccessToken = cesiumAccessToken;
-  public td_img_imageryProvider = td_img_imageryProvider;
-  public td_cia_imageryProvider = td_cia_imageryProvider;
   public imageryProviders = [td_img_imageryProvider, td_cia_imageryProvider];
+  public threeDTileset = '/3D Tiles/Test_mode/tileset.json';
 
-  @observable.ref public czmlData: Resource;
-  @observable.ref public geoJsonData: Resource;
-  @observable.shallow public destination: Destination;
+  @observable.ref public czmlData: CesiumResource;
+  @observable.ref public geoJsonData: CesiumResource;
+  @observable.deep public destination: Destination;
   @observable public positionData: IPosition;
 
   constructor() {
@@ -91,12 +43,12 @@ export class AppViewer implements IAppViewerState {
   };
 
   @action
-  setCzmlData = (czmlData: Resource): void => {
+  setCzmlData = (czmlData: CesiumResource): void => {
     this.czmlData = czmlData;
   };
 
   @action
-  setGeoJsonData = (geoJsonData: Resource): void => {
+  setGeoJsonData = (geoJsonData: CesiumResource): void => {
     this.geoJsonData = geoJsonData;
   };
 
