[add] arcgis core 4.19 react js demo.

wewindy · May 27, 2021 · 33b2917 · 33b2917
1 parent 6a67726
commit 33b2917
Show file tree

Hide file tree

Showing 10 changed files with 980 additions and 1 deletion.
diff --git a/react-js-@arcgiscore/.gitignore b/react-js-@arcgiscore/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/react-js-@arcgiscore/index.html b/react-js-@arcgiscore/index.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title> ArcGIS JsAPI 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-@arcgiscore/package.json b/react-js-@arcgiscore/package.json
@@ -0,0 +1,19 @@
+{
+  "name": "react-js-arcgiscore4",
+  "version": "0.0.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview"
+  },
+  "dependencies": {
+    "@arcgis/core": "^4.19.3",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-react-refresh": "^1.3.1",
+    "rollup-plugin-copy": "^3.4.0",
+    "vite": "^2.3.4"
+  }
+}
diff --git a/react-js-@arcgiscore/src/App.css b/react-js-@arcgiscore/src/App.css
@@ -0,0 +1,4 @@
+#viewDiv {
+  width: 100vw;
+  height: 100vh;
+}
diff --git a/react-js-@arcgiscore/src/App.jsx b/react-js-@arcgiscore/src/App.jsx
@@ -0,0 +1,29 @@
+import React, { useEffect, useRef } from 'react'
+
+import Map from "@arcgis/core/Map"
+import MapView from "@arcgis/core/views/MapView"
+
+import './App.css'
+import '@arcgis/core/assets/esri/themes/dark/main.css'
+
+function App() {
+  const mapDivRef = useRef(null)
+  let map
+  let view
+  useEffect(() => {
+    map = new Map({
+      basemap: "topo-vector"
+    })
+
+    view = new MapView({
+      container: mapDivRef.current,
+      map: map,
+      center: [112.5, 22.3],
+      zoom: 7
+    })
+  }, [])
+
+  return <div id="viewDiv" ref={mapDivRef}></div>
+}
+
+export default App
diff --git a/react-js-@arcgiscore/src/index.css b/react-js-@arcgiscore/src/index.css
@@ -0,0 +1,9 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+#root {
+  height: 100vh;
+  width: 100vw;
+}
diff --git a/react-js-@arcgiscore/src/main.jsx b/react-js-@arcgiscore/src/main.jsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import './index.css'
+import App from './App'
+
+/* 配置 arcgisjsapi 的静态资源 */
+import esriConfig from "@arcgis/core/config.js"
+esriConfig.assetsPath = "./assets"
+
+ReactDOM.render(
+  <App />,
+  document.getElementById('root')
+)
diff --git a/react-js-@arcgiscore/vite.config.js b/react-js-@arcgiscore/vite.config.js
@@ -0,0 +1,16 @@
+import { defineConfig } from 'vite'
+import reactRefresh from '@vitejs/plugin-react-refresh'
+import copy from 'rollup-plugin-copy'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    reactRefresh(),
+    copy({
+      targets: [
+        { src: "node_modules/@arcgis/core/assets", dest: "public" }
+      ],
+      hook: 'writeBundle'
+    })
+  ]
+})
diff --git a/react-js-@arcgiscore/yarn.lock b/react-js-@arcgiscore/yarn.lock
diff --git a/vue3-js-@arcgiscore/vite.config.js b/vue3-js-@arcgiscore/vite.config.js
@@ -8,7 +8,7 @@ export default defineConfig({
     vue(),
     copy({
       targets: [
-        { src: "node_modules/@arcgis/core/assets", dest: "public/assets" }
+        { src: "node_modules/@arcgis/core/assets", dest: "public" }
       ],
       hook: 'writeBundle'
     })