初始化工程

3 years ago · b37e821345
12 changed files with 1843 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,7 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
+.vscode/
+package-lock.json
--- a/index.html
+++ b/index.html
@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script src="https://webapi.amap.com/loader.js"></script>
+  <script type="module" src="./src/index.tsx"></script>
+</body>
+</html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,26 @@
+{
+  "name": "fine-geojson-editor",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "antd": "^4.16.13",
+    "less": "^4.1.2",
+    "lodash": "^4.17.21",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@amap/amap-jsapi-types": "^0.0.8",
+    "@types/react": "^17.0.33",
+    "@types/react-dom": "^17.0.10",
+    "@vitejs/plugin-react": "^1.0.7",
+    "ncp": "^2.0.0",
+    "typescript": "^4.4.4",
+    "vite": "^2.6.4",
+    "vitepress": "^0.20.0"
+  }
+}
--- a/src/editor/index.less
+++ b/src/editor/index.less
@ -0,0 +1,4 @@
+
+#mapStage{
+  height: 100%;
+}
--- a/src/editor/index.tsx
+++ b/src/editor/index.tsx
@ -0,0 +1,15 @@
+import { useEffect, useRef } from "react";
+import { MapStage } from "../mapStage";
+
+import "./index.less";
+
+export const Editor = () => {
+  const mapStageRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const mapStage = new MapStage(mapStageRef.current!);
+    mapStage.init();
+  });
+
+  return <div id="mapStage" ref={mapStageRef}></div>
+}
--- a/src/index.less
+++ b/src/index.less
@ -0,0 +1,8 @@
+html, body{
+  margin: 0;
+  padding: 0;
+  height: 100%;
+}
+#app{
+  height: 100%;
+}
--- a/src/index.tsx
+++ b/src/index.tsx
@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import { Editor } from './editor';
+
+import './index.less';
+
+ReactDOM.render(
+  <Editor />,
+  document.getElementById('app')
+)
--- a/src/mapStage/index.ts
+++ b/src/mapStage/index.ts
@ -0,0 +1,29 @@
+import "@amap/amap-jsapi-types";
+import "../types/index.d";
+
+export class MapStage {
+  dom: HTMLDivElement;
+  private _map: AMap.Map | undefined;
+  constructor(dom: HTMLDivElement) {
+    this.dom = dom;
+  }
+
+  get map() {
+    return this._map;
+  }
+
+  async init() {
+    await AMapLoader.load({
+      key: "a4171ad2d7df42823b4de7d25c8c35ee",
+      version: "2.0",
+      plugins: [
+        "AMap.RectangleEditor",
+        "AMap.PolylineEditor",
+        "AMap.PolygonEditor",
+        "AMap.PlaceSearch",
+        "AMap.AutoComplete",
+      ],
+    });
+    this._map = new AMap.Map(this.dom);
+  }
+}
--- a/src/types/index.d.ts
+++ b/src/types/index.d.ts
@ -0,0 +1,7 @@
+
+declare global{
+  namespace AMapLoader {
+    const load: (config: any)=> Promise<AMap.Map>;
+  }
+}
+export {};
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["./src"]
+}
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,10 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 8080
+  },
+})
--- a/yarn.lock
+++ b/yarn.lock