[add] mapboxgl demo.

wewindy · May 19, 2021 · 557a744 · 557a744
1 parent d053d15
commit 557a744
Show file tree

Hide file tree

Showing 24 changed files with 1,865 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -7,12 +7,12 @@
 - [email protected]
 - [email protected]
 - [email protected]
-- mapboxgl（todo）
+- mapboxgl@1.13.1
 - openglobus（todo）
 
 
 
-## *Cesium 项目额外注意
+## ① Cesium 项目额外注意
 
 要配置 `window` 下的全局属性 `CESIUM_BASE_URL`，你可以看到我在 `index.html` 中写多了一个 `<script>` 标签。
 
@@ -28,8 +28,22 @@ window['CESIUM_BASE_URL'] = `path/to/cesium/Source/`
 
 
 
+## ② mapboxgl 注意
+
+- 替换你的访问令牌方可使用
+- 推荐使用社区分支 [maplibre-gl](https://github.com/maplibre/maplibre-gl-js)，是 mapbox-gl 在 2.0 版本开始修改开源协议之后的一个不错的分支
+
+
+
 # 2 TODO
 
-- 添加 mapboxgl 示例
 - 添加 openglobus 示例
+- 使用 svelte 试写一次
+
+
+
+# 3 为什么不用封装好的组件库
+
+例如，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-ts-mapboxgl/.gitignore b/react-ts-mapboxgl/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/react-ts-mapboxgl/README.md b/react-ts-mapboxgl/README.md
@@ -0,0 +1,3 @@
+# accessToken
+
+在 `App.tsx` 中替换 token 即可正常访问底图。
diff --git a/react-ts-mapboxgl/index.html b/react-ts-mapboxgl/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh-cn">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title> MapboxGL App in React Ts </title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/react-ts-mapboxgl/package.json b/react-ts-mapboxgl/package.json
@@ -0,0 +1,22 @@
+{
+  "name": "react-ts-mapboxgl",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@types/mapbox-gl": "1.13.0",
+    "mapbox-gl": "1.13.1",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@vitejs/plugin-react-refresh": "^1.3.1",
+    "typescript": "^4.1.2",
+    "vite": "^2.3.3"
+  }
+}
diff --git a/react-ts-mapboxgl/src/App.css b/react-ts-mapboxgl/src/App.css
@@ -0,0 +1,4 @@
+#mapbox-container {
+  width: 100vw;
+  height: 100vh;
+}
diff --git a/react-ts-mapboxgl/src/App.tsx b/react-ts-mapboxgl/src/App.tsx
@@ -0,0 +1,24 @@
+import React, { useEffect, useRef } from 'react'
+import mapboxgl, { Map } from 'mapbox-gl'
+import '../node_modules/mapbox-gl/dist/mapbox-gl.css'
+import './App.css'
+
+function App() {
+  const mapDivRef = useRef<HTMLDivElement>(null)
+  let map: Map
+
+  mapboxgl.accessToken = `your token here`
+
+  useEffect(() => {
+    map = new Map({
+      container: mapDivRef.current as HTMLElement,
+      style: 'mapbox://styles/mapbox/streets-v11',
+      center: [112.5, 22.3],
+      zoom: 7
+    })
+  }, [])
+
+  return <div id="mapbox-container" ref={mapDivRef}></div>
+}
+
+export default App
diff --git a/react-ts-mapboxgl/src/index.css b/react-ts-mapboxgl/src/index.css
@@ -0,0 +1,9 @@
+html, body {
+  padding: 0;
+  margin: 0;
+}
+
+#root {
+  width: 100vw;
+  height: 100vh;
+}
diff --git a/react-ts-mapboxgl/src/main.tsx b/react-ts-mapboxgl/src/main.tsx
@@ -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-ts-mapboxgl/tsconfig.json b/react-ts-mapboxgl/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "types": ["vite/client"],
+    "allowJs": false,
+    "skipLibCheck": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react"
+  },
+  "include": ["./src"]
+}
diff --git a/react-ts-mapboxgl/vite.config.ts b/react-ts-mapboxgl/vite.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import reactRefresh from '@vitejs/plugin-react-refresh'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [reactRefresh()]
+})