Browse Source

feat: 标记点覆盖物属性设置

master
Cmen 3 years ago
parent
commit
1a90c69c80
  1. 46
      src/editor/Property/index.tsx
  2. 6
      src/store/reducers/map/index.ts

46
src/editor/Property/index.tsx

@ -1,5 +1,5 @@
import { useSelector } from "react-redux"; import { useSelector } from "react-redux";
import { Form, Select } from "antd"; import { Form, Select, Input } from "antd";
import { selectedIdsSelector, mapOptionsSelector, editorAction } from "@store"; import { selectedIdsSelector, mapOptionsSelector, editorAction } from "@store";
import { OverlayCategory, IOverlay, OverlayTypes } from "@map"; import { OverlayCategory, IOverlay, OverlayTypes } from "@map";
@ -21,6 +21,7 @@ const Property = () => {
if (!selectedIds?.length) return <></>; if (!selectedIds?.length) return <></>;
const [id] = selectedIds; const [id] = selectedIds;
const overlay = overlays.find((overlay) => overlay.id === id)!; const overlay = overlays.find((overlay) => overlay.id === id)!;
const { lngLat = [0, 0] } = overlay;
const updateOverlayProps = (props: Partial<IOverlay>) => const updateOverlayProps = (props: Partial<IOverlay>) =>
editorAction.updateOverlay(props); editorAction.updateOverlay(props);
@ -36,20 +37,7 @@ const Property = () => {
); );
} }
return ( const categoryPane = (
<div className="property-area">
<Form size="small">
<Form.Item label="名称">
<FineInput
value={overlay.name}
onChange={(value) =>
updateOverlayProps({
id: overlay.id,
name: value,
})
}
/>
</Form.Item>
<Form.Item label="类型"> <Form.Item label="类型">
<Select <Select
value={overlay.category} value={overlay.category}
@ -67,6 +55,34 @@ const Property = () => {
))} ))}
</Select> </Select>
</Form.Item> </Form.Item>
);
const positionPane = (
<>
<Form.Item label="经度">
<Input value={lngLat[0]} />
</Form.Item>
<Form.Item label="纬度">
<Input value={lngLat[1]} />
</Form.Item>
</>
);
return (
<div className="property-area">
<Form size="small">
<Form.Item label="名称">
<FineInput
value={overlay.name}
onChange={(value) =>
updateOverlayProps({
id: overlay.id,
name: value,
})
}
/>
</Form.Item>
{overlay.type === OverlayTypes.Point ? positionPane : categoryPane}
{overlay.category === OverlayCategory.Building ? ( {overlay.category === OverlayCategory.Building ? (
<Form.Item label="高度"> <Form.Item label="高度">
<FineInput <FineInput

6
src/store/reducers/map/index.ts

@ -34,16 +34,16 @@ export function finishEditOverlay(state = initState, payload: any) {
const { overlays } = draft.map; const { overlays } = draft.map;
const existed = overlays.find((overlay) => overlay.id === id); const existed = overlays.find((overlay) => overlay.id === id);
if (existed) { if (existed) {
console.log(overlay);
overlays[overlays.indexOf(existed)] = { overlays[overlays.indexOf(existed)] = {
...existed, ...existed,
...overlay, ...overlay,
}; };
} else { } else {
overlay.name = OverlayNamePrefixs[type] + overlay.id; overlay.name = OverlayNamePrefixs[type] + overlay.id;
const isRoad = type === OverlayTypes.Polyline; if (type === OverlayTypes.Polyline) {
if (isRoad) {
overlay.category = OverlayCategory.Road; overlay.category = OverlayCategory.Road;
} else { } else if (type !== OverlayTypes.Point) {
overlay.category = OverlayCategory.Building; overlay.category = OverlayCategory.Building;
overlay.height = 100; overlay.height = 100;
} }

Loading…
Cancel
Save