[add] openglobus code.

wewindy · May 20, 2021 · 10e4717 · 10e4717
1 parent 557a744
commit 10e4717
Show file tree

Hide file tree

Showing 20 changed files with 2,380 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@
 - [email protected]
 - [email protected]
 - [email protected]
-- openglobus（todo）
+- openglobus@0.8.10
 
 
 
@@ -35,9 +35,14 @@ window['CESIUM_BASE_URL'] = `path/to/cesium/Source/`
 
 
 
-# 2 TODO
+## ③ openglobus 注意
+
+因为 openglobus 在我初次写时还没有类型定义库，所以用的是 JavaScript 来写。初始视角用的是官方默认的。
+
+
+
+# 2 Future
 
-- 添加 openglobus 示例
 - 使用 svelte 试写一次
 
 
@@ -46,4 +51,4 @@ window['CESIUM_BASE_URL'] = `path/to/cesium/Source/`
 
 例如，openlayers 可以使用 [rlayers](https://www.npmjs.com/package/rlayers)，leaflet 可以使用 [react-leaflet](https://www.npmjs.com/package/react-leaflet) 或 [vue2-leaflet](https://www.npmjs.com/package/vue2-leaflet)
 
-是因为我希望原汁原味，无它
+是因为我希望原汁原味，无它。
diff --git a/react-js-openglobus/.gitignore b/react-js-openglobus/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/react-js-openglobus/index.html b/react-js-openglobus/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="zh-cn">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title> OpenGlobus App in React Js </title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>
diff --git a/react-js-openglobus/package.json b/react-js-openglobus/package.json
@@ -0,0 +1,18 @@
+{
+  "name": "react-js-openglobus",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@openglobus/og": "^0.8.10",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react-refresh": "^1.3.1",
+    "vite": "^2.3.3"
+  }
+}
diff --git a/react-js-openglobus/src/App.css b/react-js-openglobus/src/App.css
@@ -0,0 +1,4 @@
+#globus-container {
+  width: 100vw;
+  height: 100vh;
+}
diff --git a/react-js-openglobus/src/App.jsx b/react-js-openglobus/src/App.jsx
@@ -0,0 +1,30 @@
+import React, { useEffect } from 'react'
+import './App.css'
+import { layer, terrain, Globe } from '@openglobus/og'
+
+import '../node_modules/@openglobus/og/css/og.css'
+
+function App() {
+
+  let globus
+  useEffect(() => {
+    globus = new Globe({
+      target: 'globus-container',
+      name: 'earth',
+      terrain: new terrain.GlobusTerrain(),
+      layers: [
+        new layer.XYZ("OpenStreetMap", {
+          isBaseLayer: true,
+          url: '//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
+          visibility: true
+        })
+      ],
+      autoActivated: true,
+      viewExtent: [5.56707, 45.15679, 5.88834, 45.22260]
+    })
+  }, []);
+
+  return <div id="globus-container"></div>
+}
+
+export default App
diff --git a/react-js-openglobus/src/favicon.svg b/react-js-openglobus/src/favicon.svg
diff --git a/react-js-openglobus/src/index.css b/react-js-openglobus/src/index.css
@@ -0,0 +1,9 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
diff --git a/react-js-openglobus/src/main.jsx b/react-js-openglobus/src/main.jsx
@@ -0,0 +1,9 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('root')
+)
diff --git a/react-js-openglobus/vite.config.js b/react-js-openglobus/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import reactRefresh from '@vitejs/plugin-react-refresh'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [reactRefresh()]
+})