import React, { useEffect, useMemo, useRef, useState } from 'react';
import Header from '@/Components/Header';
import Bottom from '@/Components/Bottom';
import './index.less';
import MapBox from '@/Components/Mapbox';
import MapToools from '@/Components/MapToools';
import { mapToolsAtom } from '@/store/mapTools';
import { mapAtom, markerPositionAtom } from '@/store/map';
import FeatureLayer from '@arcgis/core/layers/FeatureLayer';
import { useGetWindow } from '@/Hooks/menu';
import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
import Editor from '@arcgis/core/widgets/Editor';
import { getFeatureSelector, getMapAtom } from '@/store';
import CustomLoadingMap from '@/Components/CustomLoadingMap';
import { Button, message, Space, Modal } from 'antd';
import GraphicsLayer from '@arcgis/core/layers/GraphicsLayer';
import SketchViewModel from '@arcgis/core/widgets/Sketch/SketchViewModel';
import SimpleFillSymbol from '@arcgis/core/symbols/SimpleFillSymbol';
import PopupTemplate from '@arcgis/core/PopupTemplate';
import { TableList } from '@/Components/MassifManger';
import SimpleRenderer from '@arcgis/core/renderers/SimpleRenderer';
import { replaceUrl } from '@/utils';
const polygonSymbol = new SimpleFillSymbol({
color: [255, 255, 255, 0.1],
outline: {
color: '#AEFB4F',
width: 2,
},
});
const simpleRenderer = new SimpleRenderer({
symbol: polygonSymbol,
});
export default function MassifManger() {
const mapTools = useRecoilValue(mapToolsAtom);
const view = useRecoilValue(mapAtom);
const getWindow = useGetWindow();
const [mapOptions, setMapOptions] = useRecoilState(getMapAtom);
const getFeature = useRecoilValue(getFeatureSelector);
const editorRef = useRef<Editor | null>(null);
const featureLayer = useRef<FeatureLayer | null>();
const [type, setType] = useState<'编辑' | '取消' | '添加' | '更新' | '删除' | ''>('');
const [createLayer] = useState(new GraphicsLayer({ id: 'createLayer' }));
const tableRef = useRef<any>();
useEffect(() => {
if (getWindow) {
setMapOptions(getWindow);
} else {
setMapOptions(null);
}
}, [getWindow]);
useEffect(() => {
if (getFeature && view) {
view.map.add(createLayer);
let url = replaceUrl(getFeature);
featureLayer.current = new FeatureLayer({
url,
id: 'MassifMangerLayer',
spatialReference: view.spatialReference,
renderer: simpleRenderer,
outFields: ['*'],
});
view.map.add(featureLayer.current);
//初始化编辑
const editor = new Editor({
view: view,
});
// view.ui.add(editor, 'top-right');
editorRef.current = editor;
}
}, [getFeature, view]);
useEffect(() => {
if (view) {
view.on('click', async e => {
const result = await view.hitTest(e);
const { results } = result;
if (results.length > 0) {
var graphic = results.filter(function (r: any) {
return r.graphic.layer === featureLayer.current;
})[0]?.graphic as any;
if (graphic) {
const { attributes } = graphic;
Object.keys(attributes).forEach(item => {
let key = item.toLocaleLowerCase();
attributes[key] = attributes[item];
});
tableRef.current.setModalVisible(true);
tableRef.current.setInitialValues(attributes);
}
}
});
}
}, [view]);
useEffect(() => {
if (type) {
if (type === '编辑') {
editorRef.current?.startUpdateWorkflowAtFeatureSelection();
}
if (type === '添加') {
if (featureLayer.current) {
editorRef.current?.startCreateFeaturesWorkflowAtFeatureCreation({
layer: featureLayer.current,
template: new FeatureTemplate({
drawingTool: 'polygon',
description: '添加图形',
name: 'addPolygin',
prototype: {},
}),
});
}
}
} else {
createLayer.removeAll();
editorRef.current && editorRef.current.cancelWorkflow();
}
}, [type]);
const edit = () => {
view?.graphics.removeAll();
setType('编辑');
};
const update = () => {
if (!editorRef.current) return;
if (!featureLayer.current) return;
const hide = message.loading('更新中,请稍后', 0);
if (type === '添加') {
let addFeatures = (editorRef.current as any).viewModel.sketchViewModel.updateGraphics.items as any;
let edits = {
addFeatures,
};
featureLayer.current.applyEdits(edits).then(res => {
hide();
setType('');
tableRef.current.setParams({
dkbm: '',
szz: '',
pageIndex: 1,
pageSize: 10,
});
});
} else {
let updateGraphic = (editorRef.current as any).viewModel.sketchViewModel.updateGraphics.items as any;
let edits = {
updateFeatures: updateGraphic,
};
featureLayer.current.applyEdits(edits).then(res => {
hide();
editorRef.current && editorRef.current.cancelWorkflow();
setType('');
tableRef.current.setParams({
dkbm: '',
szz: '',
pageIndex: 1,
pageSize: 10,
});
});
}
};
const add = () => {
setType('添加');
};
const cancel = () => {
setType('');
};
const deleteGeometry = () => {
if (!editorRef.current) return;
if (!featureLayer.current) return;
Modal.confirm({
title: '是否删除?',
className: 'sure-delete',
okText: '确认',
cancelText: '取消',
centered: true,
bodyStyle: {
height: 'auto',
},
onOk: () => {
const hide = message.loading('更新中,请稍后', 0);
let updateGraphic = (editorRef.current as any).viewModel.sketchViewModel.updateGraphics.items as any;
let edits = {
deleteFeatures: updateGraphic,
};
featureLayer.current &&
featureLayer.current.applyEdits(edits).then(res => {
hide();
setType('');
});
},
});
};
return (
<>
<Header />
<div className="MassifManger">
<div className="btn">
<Space>
{type === '' && (
<Button type="primary" onClick={add}>
添加
</Button>
)}
{type == '' && (
<Button type="primary" onClick={edit}>
编辑
</Button>
)}
{(type === '添加' || type === '编辑') && (
<Button type="primary" onClick={cancel}>
取消
</Button>
)}
{type === '编辑' && (
<Button type="primary" onClick={deleteGeometry}>
删除
</Button>
)}
{(type === '编辑' || type === '添加') && (
<Button type="primary" onClick={update}>
更新
</Button>
)}
</Space>
</div>
<CustomLoadingMap />
{/* <MapToools style={{ top: '105px' }} /> */}
<TableList setType={setType} type={type} tref={tableRef} />
</div>
<Bottom />
</>
);
}1.初始化Feature服务
const polygonSymbol = new SimpleFillSymbol({
color: [255, 255, 255, 0.1],
outline: {
color: '#AEFB4F',
width: 2,
},
});
const simpleRenderer = new SimpleRenderer({
symbol: polygonSymbol,
});
//renderer用来定义图形的颜色
featureLayer.current = new FeatureLayer({
url: getFeature,
id: 'MassifMangerLayer',
spatialReference: view.spatialReference,
//renderer: simpleRenderer,
// popupTemplate: new PopupTemplate({
// content: '1233211',
// actions: [],
// title: '',
// }),
});
view.map.add(featureLayer.current);Feature中的applyEdits用来编辑图层
方法 | 作用 |
addFeatures | Feature服务中添加图形 |
updateFeatures | Feature服务中编辑图形 |
deleteFeatures | 删除Featur服务中的图形 |
2.初始化编辑
Editor可以对图形进行缩放 旋转，平移等功能
//初始化编辑
const editor = new Editor({
view: view,
});
// view.ui.add(editor, 'top-right');
editorRef.current = editor;3.编辑和添加功能
const update = () => {
//Editor实例
if (!editorRef.current) return;
//编辑图层
if (!featureLayer.current) return;
const hide = message.loading('更新中,请稍后', 0);
if (type === '添加') {
//获取添加的图形
let addFeatures = (editorRef.current as any).viewModel.sketchViewModel.updateGraphics.items as any;
let edits = {
addFeatures,
};
//然后将新的图形进行添加
featureLayer.current.applyEdits(edits).then(res => {
hide();
//成功后取消事件
editorRef.current && editorRef.current.cancelWorkflow();
setType('');
});
} else {
//获取更新后的图形
let updateGraphic = (editorRef.current as any).viewModel.sketchViewModel.updateGraphics.items as any;
let edits = {
updateFeatures: updateGraphic,
};
featureLayer.current.applyEdits(edits).then(res => {
hide();
//成功后取消事件
editorRef.current && editorRef.current.cancelWorkflow();
setType('');
});
}
};如何拿到编辑的图形：（找了很久才找到）
因为我把editor保存了，所以里面的viewModel.sketchViewModel内有updateGraphics 即更新（移动或其他操作）所对应的图斑。如下图：
sketchTool.editor.viewModel.sketchViewModel.updateGraphics.items
3.删除功能
const deleteGeometry = () => {
if (!editorRef.current) return;
if (!featureLayer.current) return;
Modal.confirm({
title: '是否删除?',
className: 'sure-delete',
okText: '确认',
cancelText: '取消',
centered: true,
bodyStyle: {
height: 'auto',
},
onOk: () => {
const hide = message.loading('更新中,请稍后', 0);
let updateGraphic = (editorRef.current as any).viewModel.sketchViewModel.updateGraphics.items as any;
let edits = {
deleteFeatures: updateGraphic,
};
featureLayer.current &&
featureLayer.current.applyEdits(edits).then(res => {
hide();
setType('');
});
},
});
};
发表评论
侧栏公告
寄语
譬如朝露博客是一个分享前端知识的网站，联系方式11523518。
热评文章
标签列表
热门文章
友情链接