同步代码

README.md

@@ -85,7 +85,7 @@ git clone git@gitee.com:marsgis/mars3d-react-example.git
   建议从[http://mars3d.cn/download.html](http://mars3d.cn/download.html)下载最新 mars3d 类库后覆盖至`public/lib/`目录下，更新 mars3d 为最新版本。
 
 ### 运行命令
-请将机器Node版本升级到v14及以上版本
+请将机器Node版本升级到v16及以上版本
 
 #### 首次运行前安装依赖
 

package.json

@@ -62,7 +62,7 @@
     "typescript": "4.5.5",
     "vite": "^4.3.9", 
     "terser": "^5.16.1",
-    "vite-plugin-eslint": "^1.3.0",
+    "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-monaco-editor": "^1.1.0",
     "vite-plugin-style-import": "^2.0.0"
   },

public/lib/mars3d/mars3d.css

 /**
  * Mars3D三维可视化平台  mars3d
  *
- * 版本信息：v3.6.2
- * 编译日期：2023-08-22 10:37:49
+ * 版本信息：v3.6.3
+ * 编译日期：2023-08-28 19:38:39
  * 版权所有：Copyright by 火星科技  http://mars3d.cn
  * 使用单位：免费公开版 ，2023-03-17
  */

src/widgets/basic/GraphicEditor/MarsAvailability.tsx

+import { MarsCollapse, MarsCollapsePanel, MarsButton, MarsIcon, MarsDatePicker } from "@mars/components/MarsUI"
+import { Space } from "antd"
+import { Fragment, useCallback, useState, useEffect, useRef } from "react"
+import { cloneDeep } from "lodash"
+import dayjs, { Dayjs } from "dayjs"
+import moment from "moment"
+import type { Moment } from "moment"
+import * as mars3d from "mars3d"
+
+const Cesium = mars3d.Cesium
+
+interface MarsAttrProps {
+  availability: any
+  onChange?: (value?: any) => void
+}
+
+function PointPosition({ julianObj = { start: null, stop: null }, onChange }) {
+  const values = useRef(julianObj)
+
+  useEffect(() => {
+    console.log("julianObj", julianObj)
+    values.current = julianObj
+  }, [julianObj])
+
+  const itemChange = useCallback(
+    (v, i) => {
+      values.current[i] = v
+      console.log("itemChange values.current", values.current)
+      console.log("itemChange v", v)
+      onChange && onChange(values.current)
+    },
+    [values, onChange]
+  )
+
+  return (
+    <table className="mars-primary-table">
+      <tbody>
+        <tr>
+          <td width="80">开始时间</td>
+          <td>
+            <MarsDatePicker
+              defaultValue={julianObj.start ? moment(julianObj.start, "YYYY-MM-DD HH:mm:ss") : null}
+              onChange={(date: Moment, dateString: string) => {
+                itemChange(date, "start")
+              }}
+              format="YYYY-MM-DD HH:mm:ss"
+              showTime={{ format: "YYYY-MM-DD HH:mm:ss" }}
+            ></MarsDatePicker>
+          </td>
+        </tr>
+        <tr>
+          <td>结束时间</td>
+          <td>
+            <MarsDatePicker
+              defaultValue={julianObj.stop ? moment(julianObj.stop, "YYYY-MM-DD HH:mm:ss") : null}
+              onChange={(date: Moment, dateString: string) => {
+                console.log("value", date)
+                itemChange(date, "stop")
+              }}
+              format="YYYY-MM-DD HH:mm:ss"
+              showTime={{ format: "YYYY-MM-DD HH:mm:ss" }}
+            ></MarsDatePicker>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  )
+}
+
+let timeList = []
+
+export default function MarsAvailability({ availability, onChange = () => {} }: MarsAttrProps) {
+  const [avaiData, setAvaiData] = useState([])
+
+  useEffect(() => {
+    if (!availability) {
+      return
+    }
+    if (!Array.isArray(availability)) {
+      availability = availability._intervals
+    }
+
+    const data = availability?.map((julianObj) => {
+      const timeObj = { start: null, stop: null }
+
+      for (const key in julianObj) {
+        const isJulianDate = typeof julianObj[key] !== "string"
+
+        let value = null
+        if (Object.keys(timeObj).includes(key)) {
+          if (julianObj[key]) {
+            value = isJulianDate ? moment(Cesium.JulianDate.toDate(julianObj[key])) : moment(julianObj[key])
+          }
+          timeObj[key] = value
+        }
+      }
+
+      return timeObj
+    })
+
+    setAvaiData([...data])
+    timeList = data
+
+    console.log("timeList", data)
+  }, [availability])
+
+  const availabilityChange = (noData: boolean = false) => {
+    let time =
+      timeList?.map((dayjsDate) => {
+        const timeObj = {}
+        for (const key in dayjsDate) {
+          timeObj[key] = dayjsDate[key] ? dayjs(dayjsDate[key]).format("YYYY-MM-DD HH:mm:ss") : null
+        }
+
+        return timeObj
+      }) || []
+
+    if (noData) {
+      timeList = []
+      setAvaiData(timeList)
+      time = []
+    }
+
+    onChange(time)
+  }
+
+  const addAvailability = () => {
+    timeList.push({ start: null, stop: null })
+
+    setAvaiData([...timeList])
+    availabilityChange()
+  }
+  const addItem = (item: any, index: number) => {
+    timeList.splice(index, 0, cloneDeep(item))
+
+    setAvaiData([...timeList])
+    availabilityChange()
+  }
+
+  const removeAvailability = () => {
+    availabilityChange(true)
+  }
+  const removeItem = (item: any, index: number) => {
+    timeList.splice(index, 1)
+
+    setAvaiData([...timeList])
+    availabilityChange()
+  }
+
+  return (
+    <MarsCollapse activeKey={["1"]}>
+      <MarsCollapsePanel key="1" showArrow={false} header="时序列表">
+        <Space className="f-mb">
+          <MarsButton title="添加显示矢量对象的时间段" onClick={() => addAvailability()}>
+            添加
+          </MarsButton>
+          <MarsButton title="矢量对象一直显示" onClick={() => removeAvailability()}>
+            清除
+          </MarsButton>
+        </Space>
+        {avaiData?.map((item, i) => (
+          <Fragment key={i}>
+            <div className="position-title">
+              <span>第 {i + 1} 个时间段</span>
+              <Space className="position-title__subfix">
+                <MarsIcon icon="add-one" width="16" onClick={() => addItem(item, i)}></MarsIcon>
+                <MarsIcon icon="delete" width="16" onClick={() => removeItem(item, i)}></MarsIcon>
+              </Space>
+            </div>
+            {/* {JSON.stringify(avaiData)} */}
+            <PointPosition julianObj={item} onChange={(value) => availabilityChange()}></PointPosition>
+          </Fragment>
+        ))}
+      </MarsCollapsePanel>
+    </MarsCollapse>
+  )
+}

src/widgets/basic/GraphicEditor/index.tsx

-import { MarsDialog, MarsIcon } from "@mars/components/MarsUI"
+import { MarsDialog, MarsIcon, MarsTabs, MarsTabPane } from "@mars/components/MarsUI"
 import { Space } from "antd"
 import * as mars3d from "mars3d"
-import { useEffect, useState } from "react"
+import { useEffect, useState, useCallback } from "react"
 import MarsStyle from "./MarsStyle"
+import MarsAvailability from "./MarsAvailability"
 import _ from "lodash"
 import "./index.less"
 
 function GraphicEditor({ currentWidget, ...props }) {
   const [graphic, setGraphic] = useState(null)
   const [style, setStyle] = useState(null)
+  const [availability, setAvailability] = useState(null)
+
   const [layerName, setLayerName] = useState("")
   const [customType, setCustomType] = useState("")
   const [graphicType, setGraphicType] = useState("")
 
+  const [acTab, setAcTab] = useState("style")
+
+  const tabChange = useCallback((key: string) => {
+    setAcTab(key)
+  }, [])
+
   useEffect(() => {
     console.log("编辑面板接收到了graphic对象更新:", currentWidget)
     const gp = currentWidget?.data?.graphic
@@ -22,15 +31,30 @@ function GraphicEditor({ currentWidget, ...props }) {
 
     setLayerName(gp._layer.name)
     setCustomType(currentWidget.data?.styleType || gp.options.styleType)
-    setGraphicType(gp.type) 
+    setGraphicType(gp.type)
     setStyle(_.cloneDeep(gp?.style))
+    // console.log("availability", gp?.availability)
+    setAvailability(_.cloneDeep(gp?.availability))
 
     setGraphic(gp)
-
   }, [currentWidget])
 
   return (
-    <MarsDialog title="属性编辑" width="260" top="60" bottom="40" left="10" minWidth={200} {...props}>
+    <MarsDialog
+      title="属性编辑"
+      width="260"
+      top="60"
+      bottom="40"
+      left="10"
+      minWidth={200}
+      {...props}
+      footer={
+        <MarsTabs tabPosition="bottom" activeKey={acTab} type="card" onTabClick={tabChange}>
+          <MarsTabPane key="style" tab="样式"></MarsTabPane>
+          <MarsTabPane key="availability" tab="时序"></MarsTabPane>
+        </MarsTabs>
+      }
+    >
       {graphic && (
         <>
           <div className="top-handle-bar">
@@ -52,18 +76,32 @@ function GraphicEditor({ currentWidget, ...props }) {
             </Space>
           </div>
           <div className="attr-editor-main">
-            <MarsStyle
-              style={style}
-              graphic={graphic}
-              layerName={layerName}
-              customType={customType}
-              graphicType={graphicType}
-              onChange={(data) => {
-                console.log("修改了style样式", data)
-                graphic.setStyle(_.cloneDeep(data))
-                // setStyle(_.cloneDeep(data))
-              }}
-            ></MarsStyle>
+            {acTab === "style" && (
+              <MarsStyle
+                style={style}
+                graphic={graphic}
+                layerName={layerName}
+                customType={customType}
+                graphicType={graphicType}
+                onChange={(data) => {
+                  console.log("修改了style样式", data)
+                  graphic.setStyle(_.cloneDeep(data))
+                  // setStyle(_.cloneDeep(data))
+                }}
+              ></MarsStyle>
+            )}
+            {acTab === "availability" && (
+              <MarsAvailability
+                availability={availability}
+                onChange={(data) => {
+                  if (data && data.length) {
+                    graphic.availability = data
+                  } else {
+                    graphic.availability = null
+                  }
+                }}
+              ></MarsAvailability>
+            )}
           </div>
         </>
       )}