初始化地图区域结构

src/editor/Plot/index.less

@@ -0,0 +1,14 @@
+.map-stage{
+  position: absolute;
+  width: 100%;
+  height: calc(100% - 40px);
+  top: 40px;
+  left: 0;
+}
+.tools-properties{
+  position: absolute;
+  width: 100%;
+  height: 40px;
+  background-color: #fff;
+  border-bottom: 1px solid #ccc;
+}

src/editor/Plot/index.tsx

@@ -1,7 +1,28 @@
+import { Layout } from "antd";
+import { useEffect, useRef } from "react";
+import { MapStage } from "../../mapStage";
 
 
+import "./index.less";
+
+const { Header, Footer, Sider, Content } = Layout;
+
 const Plot = () => {
-  return <h1>属性区域</h1>;
+
-}
+  const mapStageRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    const map = new MapStage(mapStageRef.current!);
+    map.init();
+  });
+
+  return (
+    <>
+      <div className="map-stage" ref={mapStageRef}></div>
+      <div className="tools-properties"></div>
+      <div className="tools-area"></div>
+    </>
+  );
+};
 
 export default Plot;

src/editor/index.less

@@ -2,6 +2,15 @@
 .editor-main{
   height: 100%;
 }
+.editor-header{
+  height: 40px;
+  line-height: 40px;
+  padding: 0 10px;
+  border-bottom: 1px solid #ccc;
+}
+.editor-body-center{
+  position: relative;
+}
 .editor-header, .editor-body-left, .editor-body-right{
   background-color: #fff;
 }

src/editor/index.tsx

@@ -1,8 +1,8 @@
 import { useEffect, useRef } from "react";
 import { Layout } from "antd";
-import { MapStage } from "../mapStage";
 
 import "./index.less";
+import Plot from "./Plot";
 
 const { Header, Footer, Sider, Content } = Layout;
 
@@ -12,7 +12,9 @@ export const Editor = () => {
       <Header className="editor-header">header</Header>
       <Layout className="editor-body">
         <Sider className="editor-body-left">Sider</Sider>
-        <Content className="editor-body-center">Content</Content>
+        <Content className="editor-body-center">
+          <Plot />
+        </Content>
         <Sider className="editor-body-right">Sider</Sider>
       </Layout>
     </Layout>