/* eslint-disable no-new */ import React, { useEffect, useState, useRef } from 'react'; import { ArcGISMap, Drawtool, geomUtils } from '@wisdom-map/arcgismap'; // import { AMapScene, PointLayer } from '@wisdom-map/Amap'; import { Modal, Form, Input, Slider, InputNumber, Select, Button, Cascader, notification, } from 'antd'; import classnames from 'classnames'; import { GetWebSiteConfig } from '@/services/gis/gis'; import { SetServiceConfig } from '@/services/webConfig/api'; import styles from './index.less'; const { Option } = Select; 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 [flag, setFlag] = useState(0); const mapRef = useRef(); const mapInfo = useRef(null); useEffect(() => { if (visible) { GetWebSiteConfig({ client: 'sandbox' }).then(res => { console.log(res.data[0].mapsettings, 'res.data[0].mapsettings'); setSchemeList(res.data[0].mapsettings.layers); res.data[0].mapsettings.layers.forEach(item => { if (item.schemename === schemename) { item.layerType = 'PipenetLayer'; } else { item.layerType = 'dynamic'; } }); setMapsettings(res.data[0].mapsettings); let setttings = {}; res.data[0].mapsettings.layers.forEach(item => { if (item.schemename === schemename) { setttings = item; } }); // res.data[0].mapsettings.areasettings = setttings; // console.log(form); setTimeout(() => { form.setFieldsValue({ areaName: [setttings.areaName], backgroundColor: setttings.backgroundColor, backgroundOpacity: setttings.backgroundOpacity * 100, boundColor: setttings.boundColor, boundWidth: parseInt(setttings.boundWidth), extent: setttings.extent, schemename, }); console.log(form.getFieldsValue()); 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, '行政区划信息'); setOptions(result.districtList[0].districtList); }); }); console.log('加载地图', props.schemename); } }, [visible]); const getMapInfo = viewObject => { mapInfo.current = viewObject; }; // 选择颜色 const checkColor = color => { form.setFieldsValue({ backgroundColor: color }); mapRef.current.updateAreaColor(color); setFlag(flag + 1); }; const changeValue = (changedFields, allFields) => { console.log(changedFields, allFields); let obj = JSON.parse(JSON.stringify(mapsettings)); const index = obj.layers.findIndex(item => item.schemename === schemename); switch (changedFields[0].name[0]) { case 'backgroundOpacity': obj.layers[index].backgroundOpacity = changedFields[0].value / 100; mapRef.current.changeBackgroundOpacity(obj.layers[index].backgroundOpacity); break; case 'boundWidth': obj.layers[index].boundWidth = changedFields[0].value; mapRef.current.changeBoundWidthValue(obj.layers[index].boundWidth); break; case 'areaName': Drawtool.deactivate(false); obj.layers[index].areaName = changedFields[0].value[changedFields[0].value.length - 1]; mapRef.current.changeAreaName(obj.layers[index].areaName); break; case 'schemename': Drawtool.deactivate(false); let setttings; obj.layers.forEach(item => { if (item.schemename === changedFields[0].value) { item.layerType = 'PipenetLayer'; setttings = item; } else { item.layerType = 'dynamic'; } }); form.setFieldsValue({ areaName: [setttings.areaName], backgroundColor: setttings.backgroundColor, backgroundOpacity: setttings.backgroundOpacity * 100, boundColor: setttings.boundColor, boundWidth: parseInt(setttings.boundWidth), extent: setttings.extent, }); setMapsettings(obj); break; default: break; } }; // 选择范围 const onTangleClick = e => { console.log(mapInfo.current); Drawtool.activate({ view: mapInfo.current, action: 'extent', drawEnd: data => { console.log(data); const geom = geomUtils.toGeometry({ type: 'extent', xmin: data.rings[0][0][0], xmax: data.rings[0][2][0], ymin: data.rings[0][0][1], ymax: data.rings[0][1][1], }); form.setFieldsValue({ extent: `${data.rings[0][0][0]},${data.rings[0][0][1]},${data.rings[0][2][0]},${ data.rings[0][1][1] }`, }); mapRef.current.gotoGeometry(geom); }, }); }; const onFinish = () => { console.log(form.getFieldValue('extent')); console.log(Drawtool.graphic, 'Drawtool'); if (!Drawtool.graphic) { notification.error({ message: '提示', duration: 3, description: '请选择复位范围再保存', }); return; } const obj = form.getFieldsValue(); const jsConfig = { extent: form.getFieldValue('extent'), areaName: obj.areaName[obj.areaName.length - 1], boundColor: '#86c8f8', boundWidth: obj.boundWidth, backgroundColor: obj.backgroundColor, backgroundOpacity: obj.backgroundOpacity / 100, }; SetServiceConfig({ schemename: obj.schemename, terminalType: 'web', isBaseMap: false, jsonCfg: JSON.stringify(jsConfig), }).then(res => { notification.success({ message: '提示', duration: 3, description: '保存成功', }); console.log(res, 'res'); }); }; return ( <div> <Modal title={schemename} visible={visible} width={1300} onCancel={onCancel} maskClosable={false} onOk={onFinish} destroyOnClose > <div className={styles.mapContent}> <div className={styles.mapTool}> <Form form={form} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }} onFieldsChange={changeValue} > <Form.Item label="背景颜色" name="backgroundColor"> <div className={styles.colorContent}> {colorArr.map(item => ( <div className={classnames(styles.colorBox, { [styles.currentColor]: item.color === form.getFieldValue('backgroundColor'), })} key={item.color} style={{ background: item.color }} onClick={() => checkColor(item.color)} /> ))} </div> </Form.Item> <Form.Item label="透明度修改" name="backgroundOpacity"> <Slider min={0} max={100} /> </Form.Item> <Form.Item label="边界宽度修改" name="boundWidth"> <InputNumber min={1} max={10} /> </Form.Item> <Form.Item label="切换方案" name="schemename"> <Select placeholder="请选择方案"> {schemeList.map((item, index) => ( <Option value={item.schemename} key={index}> {item.schemename} </Option> ))} </Select> </Form.Item> <Form.Item label="地区" name="areaName"> <Cascader fieldNames={{ label: 'name', value: 'name', children: 'districtList', }} showSearch options={options} placeholder="请选择行政区" changeOnSelect allowClear={false} /> </Form.Item> <Form.Item wrapperCol={{ offset: 8, span: 16 }}> <Button type="primary" onClick={e => onTangleClick(e)}> 复位范围修改 </Button> </Form.Item> </Form> </div> <div className={styles.mapBox}> {canLoadMap && ( <ArcGISMap ref={mapRef} getMapInfo={e => getMapInfo(e)} config={mapsettings} /> )} </div> </div> </Modal> </div> ); }; export default Map;