/* eslint-disable react/jsx-boolean-value */ /* eslint-disable no-unused-expressions */ /* eslint-disable no-case-declarations */ /* eslint-disable import/no-duplicates */ /* eslint-disable no-new */ import React, { useEffect, useState, useRef } from 'react'; import { SketchPicker } from 'react-color'; import { ArcGISMap, ArcGISSceneMap, Drawtool, EditTool, geomUtils, PipenetStylesCenter, MapImageLayer, GraphicsLayer, watchUtils, SimpleFillSymbol, Graphic, EditAndDrawPanel, } from '@wisdom-map/arcgismap'; import { getPipenetLayer } from '@wisdom-map/basemap'; import { Form, Input, Slider, InputNumber, Select, Button, Cascader, notification, Tooltip, Radio, message, Popconfirm, Dropdown, Menu, Space, Tag, Divider, } from 'antd'; import { EnvironmentOutlined, FormOutlined, DoubleLeftOutlined, DoubleRightOutlined, BorderOutlined, CheckCircleOutlined, ExclamationCircleOutlined, } from '@ant-design/icons'; import classnames from 'classnames'; import { GetWebSiteConfig } from '@/services/gis/gis'; import { SetServiceConfig, GetSpriteSheet } from '@/services/webConfig/api'; import { formatTimeStr } from 'antd/lib/statistic/utils'; import styles from './index.less'; const { Option } = Select; const defaultMap = { basemaps: [ { id: '高德地形', title: '高德地形', thumbnailUrl: 'assets/images/thumbnail_2.jpg', baseLayers: [ { title: '高德地形', icon: '', layerType: 'amap-v', url: '', opacity: 1, visible: false, useProxy: false, proxyUrl: '', style: '', extent: '', baseLayer: '', levelStart: '', levelEnd: '', levelEndEnlarge: false, resolution: '', origin: '', tileMatrix: '', }, ], }, ], id: '', title: '', icon: '', layerType: 'PipenetLayer', url: '', opacity: 1, showLegend: true, visible: true, useProxy: true, proxyUrl: '', extent: '', baseLayer: '', levelStart: '', levelEnd: null, resolution: '', origin: '', tileMatrix: '', wmtsUrl: '', schemename: '', roles: '', areaName: '上海市', boundColor: '#86c8f8', backgroundColor: '#000000', boundWidth: '10px', backgroundOpacity: '0.6', exportScheme: 'pandagis', customFlag: 0, }; const widgets = [ { label: '缩放', right: 20, bottom: 130, config: {}, }, { label: '坐标', left: 20, bottom: 20, config: {}, }, { label: '比例尺', left: 60, bottom: 70, config: {}, }, { label: '复位', right: 20, bottom: 90, config: {}, }, { label: '图层', right: 20, bottom: 50, config: {}, }, { label: '底图切换', right: 60, bottom: 45, config: {}, }, ]; const Map = props => { const { visible, onCancel, schemename } = props; const [form] = Form.useForm(); const [canLoadMap, setCanLoadMap] = useState(false); // 是否加载地图 const [colorArr, setColorArr] = useState([ { color: '#ffffff', isCheck: false }, { color: '#000000', isCheck: false }, { color: '#9E9E9E', isCheck: false }, { color: '#009688', isCheck: false }, { color: '#2196f3', isCheck: false }, { color: '#19233c', isCheck: false }, ]); const [schemeList, setSchemeList] = useState([]); const [options, setOptions] = useState([]); const [mapsettings, setMapsettings] = useState({}); const [firstList, setFirstList] = useState({}); const [setttingsSave, setSetttingsSave] = useState({}); const [name, setName] = useState(''); const [Schemename, setSchemename] = useState({}); const [radio, setRadio] = useState(); const mapRef = useRef(); const styleRef = useRef(); const mapInfo = useRef(null); const [keep, setKeep] = useState(''); const [keepSave, setKeepSave] = useState(''); const [map, setMap] = useState(null); const [color, setColor] = useState(''); const [colorList, setColorList] = useState(''); const [keepColor, setKeepColor] = useState(''); const [radio1, setRadio1] = useState(); const [area, setArea] = useState(''); const keep1 = useRef(null); const [flag, setFlag] = useState(0); const [toolVisible, setToolVisible] = useState(true); const [saveFlag, setSaveFlag] = useState(0); const [draw, setDraw] = useState(0); // 原方案是否已绘制了自定义行政区 const [newDraw, setNewDraw] = useState(0); const [keepBorderArea, setKeepBorderArea] = useState(); const [keepType, setKeepType] = useState(''); const [resultData, setResultData] = useState(null); const [keepDraw, setKeepDraw] = useState([]); const [butState, setButState] = useState(false); // 绘制按钮状态 const [load, setLoad] = useState(false); const [keepDataDraw, setKeepDataDraw] = useState([]); const [areaFlag, setAreaFlag] = useState(0); // 地区改变标识 const [keepNameArea, setKeepNameArea] = useState(''); // 保存方案初始地区 const [keepNameCustomPointExtent, setKeepNameCustomPointExtent] = useState(''); // 保存方案初始自定义区域 useEffect(() => { GetWebSiteConfig({ client: 'sandbox' }).then(res => { let setttings = {}; if (res.data.length === 0) { res.data.layers = [defaultMap]; setttings = defaultMap; } setSchemeList(res.data); setMapsettings(res.data); setSetttingsSave(res.data); res.data.forEach(item => { if (item.layerType === 'PipenetLayer') { setttings = item; } }); let dalist = res.data; dalist.forEach(item => { if (item.areaName == null) { item.areaName = '上海市'; item.backgroundColor = '#000000'; item.boundColor = '#86C8F8'; item.boundWidth = '5px'; item.backgroundOpacity = '0.6'; } }); let list = {}; list.layers = dalist; console.log(list); debugger; setFirstList({ ...list }); setTimeout(() => { form.setFieldsValue({ areaName: setttings.areaName ? [setttings.areaName] : ['上海市'], backgroundColor: setttings.backgroundColor || '#000000', backgroundOpacity: setttings.backgroundOpacity * 100 || '60', boundColor: setttings.boundColor || '#86C8F8', boundWidth: parseInt(setttings.boundWidth) || '5', extent: setttings.extent, customPointExtent: setttings.customPointExtent, schemename: setttings.schemename, exportScheme: setttings.exportScheme || 'pandagis', customFlag: setttings.customFlag, }); setKeepNameArea(setttings.areaName); setKeepBorderArea(setttings.customPointExtent); console.log(setttings.customPointExtent); if (setttings.customPointExtent) { let aa = JSON.parse(setttings.customPointExtent); let data = {}; console.log(aa); if (aa && aa.type) { setKeepDraw(aa.geometry); setKeepNameCustomPointExtent(aa.geometry); setKeepType(aa.type); data.type = aa.type; let rings = []; aa.geometry.map(i => { rings.push([i.x, i.y]); }); let hh = {}; hh.rings = rings; console.log(hh); data.geometry = geomUtils.toGeometry(hh); console.log(data); setResultData({ ...data }); } } else { setKeepNameCustomPointExtent(setttings.customPointExtent); setKeepDraw(setttings.customPointExtent); } if (setttings.customPointExtent) { setDraw(1); } else { setDraw(0); } setFlag(setttings.customFlag); setColorList(setttings.boundColor || '#86C8F8'); setKeepColor(setttings.boundColor || '#86C8F8'); setColor(setttings.backgroundColor || '#000000'); setRadio(setttings.exportScheme || 'pandagis'); if (setttings.id) { setKeep(setttings); setName(setttings.id); setSchemename(setttings); } else { setName(''); } setCanLoadMap(true); }, 0); }); // 获取城市选择器列表 window.AMap.plugin('AMap.DistrictSearch', () => { let districtSearch = new AMap.DistrictSearch({ // 关键字对应的行政区级别,country表示国家 level: 'country', // 显示下级行政区级数,1表示返回下一级行政区 subdistrict: 3, }); // 搜索所有省/直辖市信息 districtSearch.search('中国', (status, result) => { // 查询成功时,result即为对应的行政区信息 console.log(result, '行政区划信息'); result.districtList[0].districtList.push({ adcode: '100000', name: '中华人民共和国' }); setOptions(result.districtList[0].districtList); }); }); }, []); const getData = () => { GetWebSiteConfig({ client: 'sandbox' }).then(res => { let setttings = {}; if (res.data.length === 0) { res.data.layers = [defaultMap]; setttings = defaultMap; } setSchemeList(res.data); let dalist = res.data; dalist.forEach(item => { if (item.areaName == null) { item.areaName = '上海市'; item.backgroundColor = '#000000'; item.boundColor = '#86C8F8'; item.boundWidth = '5px'; item.backgroundOpacity = '0.6'; } }); let list = {}; list.layers = dalist; console.log(dalist); // setFirstList({ ...list }); setMapsettings(res.data); setSetttingsSave(res.data); res.data.forEach(item => { if (item.schemename === form.getFieldsValue().schemename) { setttings = item; } }); console.log(setttings); setTimeout(() => { form.setFieldsValue({ areaName: setttings.areaName ? [setttings.areaName] : ['上海市'], backgroundColor: setttings.backgroundColor || '#000000', backgroundOpacity: setttings.backgroundOpacity * 100 || '60', boundColor: setttings.boundColor || '#86C8F8', boundWidth: parseInt(setttings.boundWidth) || '5', extent: setttings.extent, customPointExtent: setttings.customPointExtent, schemename: setttings.schemename, exportScheme: setttings.exportScheme || 'pandagis', customFlag: setttings.customFlag, }); setKeepNameArea(setttings.areaName); setKeepBorderArea(setttings.customPointExtent); if (setttings.customPointExtent) { let aa = JSON.parse(setttings.customPointExtent); let data = {}; console.log(aa); if (aa && aa.type) { setKeepDraw(aa.geometry); setKeepNameCustomPointExtent(aa.geometry); setKeepType(aa.type); data.type = aa.type; let rings = []; aa.geometry.map(i => { rings.push([i.x, i.y]); }); let hh = {}; hh.rings = rings; console.log(hh); data.geometry = geomUtils.toGeometry(hh); setResultData({ ...data }); } } else { setKeepDraw(setttings.customPointExtent); setKeepNameCustomPointExtent(setttings.customPointExtent); } if (setttings.customPointExtent) { setDraw(1); } else { setDraw(0); } setFlag(setttings.customFlag); setColorList(setttings.boundColor || '#86C8F8'); setKeepColor(setttings.boundColor || '#86C8F8'); setColor(setttings.backgroundColor || '#000000'); setRadio(setttings.exportScheme || 'pandagis'); if (setttings.id) { setKeep(setttings); setName(setttings.id); setSchemename(setttings); } else { setName(''); } setCanLoadMap(true); }, 0); }); // 获取城市选择器列表 window.AMap.plugin('AMap.DistrictSearch', () => { let districtSearch = new AMap.DistrictSearch({ // 关键字对应的行政区级别,country表示国家 level: 'country', // 显示下级行政区级数,1表示返回下一级行政区 subdistrict: 3, }); // 搜索所有省/直辖市信息 districtSearch.search('中国', (status, result) => { // 查询成功时,result即为对应的行政区信息 console.log(result, '行政区划信息'); result.districtList[0].districtList.push({ adcode: '100000', name: '中华人民共和国' }); setOptions(result.districtList[0].districtList); }); }); }; // 获取地图实例 const getMapInfo = viewObject => { console.log(areaFlag); // 切换方案清除自定义绘制管网; // const pipenetLayers = viewObject.map.layers.filter(item => { // item.layerType && item.layerType == 'PipenetLayertest'; // }); // viewObject.map.removeMany(pipenetLayers); // 切换范围类型清除自定义绘制管网 viewObject.map.layers.forEach(item => { if (item.layerType && item.layerType == 'PipenetLayertest') { viewObject.map.remove(item); } }); console.log(123); setMap(viewObject); console.log(viewObject); debugger; watchUtils.watch(viewObject, ['zoom'], newzoom => { // 鼠标滚动隐藏管网图 viewObject.map.layers.find(layer => { if (layer.layerType == 'PipenetLayer') { layer.visible = false; } }); }); mapInfo.current = viewObject; if (form.getFieldsValue().exportScheme == 'pandagis') { console.log(mapInfo.current.map.layers); let data = mapInfo.current.map.layers.find( item => item.layerType && item.layerType == 'PipenetLayertest', ); console.log(data); if (!data) { // 用户自定义创建的管网图 let aa = ''; mapsettings.map(i => { if (i.schemename == form.getFieldsValue().schemename) { aa = i.id; } }); const pandagis1 = new MapImageLayer({ id: aa, url: `/PandaGIS/MapServer/${aa}`, layerType: 'PipenetLayertest', title: aa, }); viewObject.map.add(pandagis1); } } setRadio1(form.getFieldsValue().customFlag); setAreaFlag(0); }; // 选择颜色 const checkColor = color => { form.setFieldsValue({ backgroundColor: color }); setColor(color); console.log(color); mapRef.current.updateAreaColor(color); }; // 表单修改后对地图进行配置 const changeValue = changedFields => { console.log(changedFields); if (changedFields.length === 0) { return; } let obj = JSON.parse(JSON.stringify(setttingsSave)); const index = obj.findIndex(item => item.schemename === form.getFieldValue('schemename')); switch (changedFields[0].name[0]) { case 'backgroundOpacity': obj[index].backgroundOpacity = changedFields[0].value / 100; mapRef.current.changeBackgroundOpacity(obj[index].backgroundOpacity); break; case 'boundWidth': obj[index].boundWidth = changedFields[0].value; mapRef.current.changeBoundWidthValue(obj[index].boundWidth); break; case 'areaName': obj[index].areaName = changedFields[0].value[changedFields[0].value.length - 1]; setButState(false); // 如果地区与范围初始值相等则范围已绘制 if (radio == 1) { if (keepNameArea === changedFields[0].value[changedFields[0].value.length - 1]) { if (keepNameArea !== '') { mapRef.current.changeAreaName(keepNameArea, keepDraw); setDraw(1); } else { setDraw(0); mapRef.current.changeAreaName(obj[index].areaName); } } else { setDraw(0); mapRef.current.changeAreaName(obj[index].areaName); } setAreaFlag(1); setFlag(0); Drawtool.deactivate(false); setArea(''); } else { mapRef.current.changeAreaName(obj[index].areaName); } setNewDraw(0); setResultData(null); let aa = { ...firstList }; aa.layers.map(i => { if (i.layerType == 'PipenetLayer') { i.layerType = 'dynamic'; i.areaName = obj[index].areaName; } if (i.schemename == form.getFieldsValue().schemename) { i.backgroundColor = color; i.boundColor = colorList; i.boundWidth = form.getFieldsValue().boundWidth; i.backgroundOpacity = form.getFieldsValue().backgroundOpacity / 100; i.layerType = 'PipenetLayer'; } }); console.log(aa); // setFirstList({ ...aa }); break; case 'schemename': setKeepDataDraw([]); setRadio1(''); GetWebSiteConfig({ client: 'sandbox' }).then(res => { setSchemeList(res.data); setMapsettings(res.data); setSetttingsSave(res.data); let dalist = res.data; dalist.forEach(item => { if (item.layerType == 'PipenetLayer') { item.layerType = 'dynamic'; } if (item.areaName == null) { item.areaName = '上海市'; item.backgroundColor = '#000000'; item.boundColor = '#86C8F8'; item.boundWidth = '5px'; item.backgroundOpacity = '0.6'; console.log(changedFields[0].value); } if (item.schemename == changedFields[0].value) { item.layerType = 'PipenetLayer'; } }); console.log(dalist); let list = {}; list.layers = dalist; console.log(list); debugger; setFirstList({ ...list }); }); setArea(''); Drawtool.deactivate(false); let setttings; obj.forEach(item => { if (item.schemename.schemename) { item.schemename = item.schemename.schemename; } if (item.schemename === changedFields[0].value) { item.layerType = 'PipenetLayer'; setttings = item; console.log(item); setSchemename(item); setName(item.id); setKeep(item); } else { item.layerType = 'dynamic'; } }); form.setFieldsValue({ areaName: setttings.areaName ? [setttings.areaName] : ['上海市'], backgroundColor: setttings.backgroundColor || '#000000', backgroundOpacity: setttings.backgroundOpacity * 100 || '60', boundColor: setttings.boundColor || '#86C8F8', boundWidth: parseInt(setttings.boundWidth) || '5', extent: setttings.extent, customPointExtent: setttings.customPointExtent, exportScheme: setttings.exportScheme || 'pandagis', customFlag: setttings.customFlag, }); setKeepNameArea(setttings.areaName); if (setttings.customPointExtent) { let aa = JSON.parse(setttings.customPointExtent); if (aa && aa.type) { setKeepDraw(aa.geometry); setKeepNameCustomPointExtent(aa.geometry); setKeepType(aa.type); let data = {}; data.type = aa.type; let rings = []; aa.geometry.map(i => { rings.push([i.x, i.y]); }); let hh = {}; hh.rings = rings; data.geometry = geomUtils.toGeometry(hh); setResultData({ ...data }); } } else { setKeepDraw(setttings.customPointExtent); setKeepNameCustomPointExtent(setttings.customPointExtent); } setKeepBorderArea(setttings.customPointExtent); setButState(false); setNewDraw(0); if (setttings.customPointExtent) { setDraw(1); } else { setDraw(0); } setFlag(setttings.customFlag); setColorList(setttings.boundColor || '#86C8F8'); setKeepColor(setttings.boundColor || '#86C8F8'); setColor(setttings.backgroundColor || '#000000'); setRadio(setttings.exportScheme || 'pandagis'); setRadio1(setttings.customFlag); mapRef.current.mapchange(obj); break; default: break; } }; // 选择范围 const onTangleClick = e => { let aa = 0; Drawtool.activate({ view: mapInfo.current, action: 'extent', drawEnd: data => { aa = 1; setLoad(false); setArea(data); console.log(data); const geom1 = geomUtils.toGeometry({ type: 'extent', xmin: data.rings[0][0][0], xmax: data.rings[0][2][0], ymin: data.rings[0][1][1], ymax: data.rings[0][0][1], }); form.setFieldsValue({ extent: `${data.rings[0][0][0]},${data.rings[0][1][1]},${data.rings[0][2][0]},${ data.rings[0][0][1] }`, }); mapRef.current.gotoGeometry(geom1); }, }); setTimeout(() => { console.log(aa); }, 0); }; const saveCallBack = e => { setSaveFlag(1); console.log(e); if (e.geometry && e.geometry.rings) { let geom1 = []; e.geometry.rings[0].forEach(i => { geom1.push({ x: i[0], y: i[1] }); }); let area1 = form.getFieldsValue().areaName; mapRef.current.changeAreaName(area1[area1.length - 1], geom1); form.setFieldsValue({ customPointExtent: geom1, }); setKeepNameArea(area1[area1.length - 1]); setKeepDraw(geom1); setKeepDataDraw(geom1); setButState(false); setDraw(1); let data = { geometry: e.geometry, type: e.type, }; setKeepType(e.type); setResultData({ ...data }); } else if (e.geometry == null && draw == 0) { notification.error({ message: '提示', duration: 3, description: '请先绘制范围再保存', }); } else { setButState(false); let aa = JSON.parse(form.getFieldsValue().customPointExtent); form.setFieldsValue({ customPointExtent: aa.geometry }); console.log(form.getFieldsValue().customPointExtent.geometry); } Drawtool.deactivate(false); }; // 提交 const onFinish = () => { if (form.getFieldsValue().customFlag == 1 && draw == 0) { notification.error({ message: '提示', duration: 3, description: '自定义行政区范围未绘制完成', }); return; } if (radio == 'arcgis') { let style = styleRef.current.stylesCompare(); if (JSON.stringify(style.originalStyle) == JSON.stringify(style.newStyle)) { console.log(123); } else { message.error('请先保存管网前端绘制方案'); return; } } if (!area) { notification.error({ message: '提示', duration: 3, description: '请选择复位范围再保存', }); return; } const obj = form.getFieldsValue(); let aa = ''; if (Array.isArray(obj.areaName)) { aa = obj.areaName[obj.areaName.length - 1]; } else { aa = obj.areaName; } let list; if (obj.boundColor.hex) { list = obj.boundColor.hex; } else { list = obj.boundColor; } let data = {}; if (obj.customPointExtent) { if (keepBorderArea && obj.customPointExtent.constructor === Array) { data.type = keepType; data.geometry = obj.customPointExtent; } else if (!keepBorderArea && obj.customPointExtent.constructor === Array) { data.type = keepType; data.geometry = obj.customPointExtent; } else { data = obj.customPointExtent; console.log(obj.customPointExtent); } } else if (keepDataDraw.length > 0) { data.type = keepType; data.geometry = keepDataDraw; } else if (keepBorderArea) { console.log(keepBorderArea.constructor); if (keepBorderArea.constructor === Array) { data.type = keepType; data.geometry = keepBorderArea; } else if (keepBorderArea.constructor === Object) { data = keepBorderArea; } console.log(keepBorderArea); } else { data = ''; } console.log(data); if (JSON.stringify(data) === '{}') { data = null; } const jsConfig = { extent: form.getFieldValue('extent'), customPointExtent: data, areaName: aa, boundColor: list, boundWidth: `${obj.boundWidth}px`, backgroundColor: obj.backgroundColor, backgroundOpacity: obj.backgroundOpacity / 100, exportScheme: obj.exportScheme == '' ? 'pandagis' : obj.exportScheme, customFlag: obj.customFlag, }; SetServiceConfig({ schemename: obj.schemename, terminalType: 'web', isBaseMap: false, jsonCfg: JSON.stringify(jsConfig), }).then(res => { if (res.code == '0') { SetServiceConfig({ schemename: obj.schemename, terminalType: 'phone', isBaseMap: false, jsonCfg: JSON.stringify({ extent: form.getFieldValue('extent'), customPointExtent: obj.customPointExtent ? data : keepBorderArea, }), }).then(); notification.success({ message: '提示', duration: 3, description: '保存成功', }); let mapObj = JSON.parse(JSON.stringify(mapsettings)); const index = mapObj.findIndex( item => item.schemename === form.getFieldValue('schemename'), ); mapObj[index].backgroundOpacity = obj.backgroundOpacity / 100; mapObj[index].boundWidth = `${obj.boundWidth}px`; mapObj[index].areaName = obj.areaName[obj.areaName.length - 1]; mapObj[index].backgroundColor = obj.backgroundColor; mapObj[index].extent = form.getFieldValue('extent'); mapObj[index].customPointExtent = obj.customPointExtent; mapObj[index].exportScheme = obj.exportScheme; mapObj[index].customFlag = obj.customFlag; if (obj.customPointExtent) { setDraw(1); } else { setDraw(0); } setSetttingsSave(mapObj); Drawtool.deactivate(false); // setArea(''); setKeepSave(''); getData(); } else { notification.error({ message: '提示', duration: 3, description: res.msg, }); } }); }; const pandagis = new MapImageLayer({ id: keep.id, url: `/PandaGIS/MapServer/${keep.id}`, layerType: 'PipenetLayertest', title: keep.id, }); const onChange = e => { const { layer } = getPipenetLayer(mapInfo.current?.map); if (layer) { layer.visible = false; } if (e.target.value == 'arcgis') { // 选择前端绘制时,如果界面有自定义的管网图就隐藏,打开组件自动生成前端管网图 mapInfo.current.map.layers.forEach(item => { if (item.layerType && item.layerType == 'PipenetLayertest') { mapInfo.current.map.remove(item); } }); } else { // 选择后端绘制时创建自定义的管网图,前端管网被组件关闭自动销毁 mapInfo.current.map.add(pandagis); } setRadio(e.target.value); }; const onChange1 = e => { setResultData(null); if (e.target.value == 0) { let data = form.getFieldsValue().areaName; mapRef.current.changeAreaName(data[data.length - 1]); setButState(false); Drawtool.deactivate(); setRadio1(e.target.value); } else { console.log(keepDraw); if (keepDraw) { let area1 = form.getFieldsValue().areaName; mapRef.current.changeAreaName(area1[area1.length - 1], keepDraw); let data = {}; console.log(keepType); data.type = keepType; let rings = []; keepDraw.map(i => { rings.push([i.x, i.y]); }); let hh = {}; hh.rings = rings; console.log(hh); data.geometry = geomUtils.toGeometry(hh); setResultData({ ...data }); } if (draw == 0) { setButState(false); } setRadio1(e.target.value); } let aa = { ...firstList }; aa.layers.map(i => { if (i.layerType == 'PipenetLayer') { i.layerType = 'dynamic'; } if (i.schemename == form.getFieldsValue().schemename) { i.backgroundColor = color; i.boundColor = colorList; i.boundWidth = form.getFieldsValue().boundWidth; i.backgroundOpacity = form.getFieldsValue().backgroundOpacity / 100; i.layerType = 'PipenetLayer'; } }); console.log(aa); // setFirstList({ ...aa }); }; const onSave = e => { setKeepSave(e); }; // 颜色选择 const colorChange = value => { form.setFieldsValue({ boundColor: value.hex }); console.log(value.hex); mapRef.current.changeBoundColor(value.hex); setColorList(value.hex); }; return ( <div className={styles.mapContent}> <div className={classnames({ [styles.mapTool]: true, [styles.mapToolHide]: !toolVisible, })} > {toolVisible && ( <Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} labelWrap onFieldsChange={changeValue} onFinish={onFinish} > <Form.Item label="切换方案" name="schemename" style={{ marginBottom: '19px' }}> <Select placeholder="请选择方案" showSearch> {schemeList.map((item, index) => ( <Option value={item.schemename} key={index}> {item.schemename} </Option> ))} </Select> </Form.Item> <Divider orientation="left" style={{ borderTopColor: '#99bbe8', color: '#0079c1' }}> <strong>范围编辑</strong> </Divider> <Form.Item label="地区选择" name="areaName" style={{ marginBottom: '19px' }}> <Cascader fieldNames={{ label: 'name', value: 'name', children: 'districtList', }} showSearch options={options} placeholder="请选择行政区" changeOnSelect allowClear={false} /> </Form.Item> <Form.Item label="范围类型" name="customFlag" style={{ marginBottom: '19px' }}> <Radio.Group onChange={onChange1} value={radio1}> <Radio value={0}>地区选择</Radio> <Radio value={1}>手绘区域</Radio> </Radio.Group> </Form.Item> {radio1 === 1 && ( <> <Form.Item label="手绘区域" name="customPointExtent"> {butState && ( <Tag style={{ width: '100px', height: '27px', paddingLeft: '28px', paddingTop: '0px', marginTop: '4px', display: 'flex', alignItems: 'center', }} color="warning" > 绘制中 </Tag> )} {!butState && draw == 0 && ( <Tag style={{ width: '100px', height: '27px', paddingLeft: '25px', paddingTop: '0px', marginTop: '4px', display: 'flex', alignItems: 'center', }} color="processing" onClick={() => { setButState(true); }} > 开始绘制 </Tag> )} {!butState && draw == 1 && ( <Tooltip title="点击按钮开始绘制"> <Tag icon={<CheckCircleOutlined style={{ marginTop: '3px' }} />} color="success" style={{ width: '100px', height: '27px', paddingLeft: '21px', paddingTop: '0px', marginTop: '4px', display: 'flex', alignItems: 'center', }} onClick={() => { setNewDraw(0); setButState(true); }} > 已绘制 </Tag> </Tooltip> )} </Form.Item> </> )} <Form.Item label="遮罩颜色" name="backgroundColor" style={{ marginBottom: '19px' }}> <div className={styles.colorContent}> {colorArr.map(item => ( <div className={classnames(styles.colorBox, { [styles.currentColor]: item.color === color, })} key={item.color} style={{ background: item.color }} onClick={() => checkColor(item.color)} /> ))} </div> </Form.Item> <Form.Item label="透明度(%)" name="backgroundOpacity" style={{ marginBottom: '19px' }}> <Slider min={0} max={100} /> </Form.Item> <Form.Item label="边界颜色" name="boundColor" style={{ marginBottom: '19px' }}> <Popconfirm overlayClassName={styles.Popconfirmtitle} placement="topLeft" icon={false} title={ <SketchPicker width="217px" color={colorList} onChange={e => colorChange(e)} /> } okText="确认" cancelText="取消" onConfirm={() => { setKeepColor(colorList); }} onCancel={() => { form.setFieldsValue({ boundColor: keepColor }); mapRef.current.changeBoundColor(keepColor); setColorList(keepColor); }} > <div className={styles.borderColor}> <div style={{ background: colorList, width: '18px', height: '10px', marginLeft: '1px', marginTop: '4px', }} /> </div> </Popconfirm> </Form.Item> <Form.Item label="边界宽度" name="boundWidth" style={{ marginBottom: '19px' }}> <InputNumber min={1} max={10} /> </Form.Item> <Divider orientation="left" style={{ borderTopColor: '#99bbe8', color: '#0079c1' }}> <strong>高级设置</strong> </Divider> {name ? ( <Form.Item label="管网方案" name="exportScheme" style={{ marginBottom: '19px' }}> <Radio.Group onChange={onChange} value={radio}> <Radio value="pandagis">整图绘制</Radio> <Radio value="arcgis">实时绘制</Radio> </Radio.Group> </Form.Item> ) : ( <></> )} <Form.Item label="复位视野" style={{ marginBottom: '19px' }}> <div style={{ display: 'flex' }}> <Form.Item name="extent" style={{ marginBottom: '0', width: '100%' }}> {!load && !area && ( <Tooltip title="点击按钮开始绘制"> <Tag color="processing" icon={<EnvironmentOutlined style={{ marginTop: '2px' }} />} style={{ width: '100px', height: '27px', paddingLeft: '13px', paddingTop: '0px', marginTop: '4px', display: 'flex', alignItems: 'center', }} onClick={() => { onTangleClick(); setLoad(true); }} > 开始绘制 </Tag> </Tooltip> )} {load && ( <Tooltip title="点击按钮开始绘制"> <Tag icon={<EnvironmentOutlined style={{ marginTop: '2px' }} />} color="warning" style={{ width: '100px', height: '27px', paddingLeft: '20px', paddingTop: '0px', marginTop: '4px', display: 'flex', alignItems: 'center', }} onClick={() => { onTangleClick(); }} > 绘制中 </Tag> </Tooltip> )} {area && !load && ( <Tooltip title="点击按钮开始绘制"> <Tag icon={<EnvironmentOutlined style={{ marginTop: '2px' }} />} color="success" style={{ width: '100px', height: '27px', paddingLeft: '20px', paddingTop: '0px', marginTop: '4px', display: 'flex', alignItems: 'center', }} onClick={() => { onTangleClick(); setLoad(true); }} > 已绘制 </Tag> </Tooltip> )} </Form.Item> {/* <Tooltip title="复位视野框选"> <Button style={{ height: '76px', borderLeft: 'none' }} icon={<EnvironmentOutlined style={{ marginTop: '5px' }} />} onClick={e => onTangleClick(e)} /> </Tooltip> */} </div> </Form.Item> <Form.Item wrapperCol={{ offset: 6, span: 18 }}> <Button type="primary" htmlType="submit"> 提交 </Button> </Form.Item> </Form> )} <div className={styles.switcher}> {toolVisible && ( <Tooltip title="隐藏配置栏"> <DoubleLeftOutlined onClick={() => setToolVisible(false)} /> </Tooltip> )} {!toolVisible && ( <Tooltip title="显示配置栏"> <DoubleRightOutlined onClick={() => setToolVisible(true)} /> </Tooltip> )} </div> </div> <div className={styles.mapBox}> {canLoadMap && ( <ArcGISSceneMap ref={mapRef} filterMap={true} getMapInfo={e => getMapInfo(e)} widgets={widgets} config={firstList} client="sandbox" /> )} {radio == 'arcgis' ? ( <PipenetStylesCenter schemeName={Schemename.schemename} mapServerName={name} view={map} savaCallback={onSave} ref={styleRef} pipenetLayer={Schemename} /> ) : ( <></> )} {radio1 == 1 && butState ? ( <> <span>{console.log(form.getFieldsValue().areaName)}</span> <EditAndDrawPanel view={mapInfo.current} editType={['POLYGON', 'EXTENT', 'CIRCLE']} defaultGraphic={resultData} areaName={ form.getFieldsValue().areaName && form.getFieldsValue().areaName[form.getFieldsValue().areaName.length - 1] } useActivePanel colorConfigBtnShow handleBtnShow callback={saveCallBack} /> </> ) : ( <></> )} </div> </div> ); }; export default Map;