/* eslint-disable no-new */ import React, { useEffect, useState, useRef } from 'react'; import { ArcGISMap, Drawtool, geomUtils } from '@wisdom-map/arcgismap'; import { Form, Input, Slider, InputNumber, Select, Button, Cascader, notification, Tooltip, } from 'antd'; import { EnvironmentOutlined } from '@ant-design/icons'; 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 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', }; 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 [setttingsSave, setSetttingsSave] = useState({}); const [flag, setFlag] = useState(0); const mapRef = useRef(); const mapInfo = useRef(null); useEffect(() => { GetWebSiteConfig({ client: 'sandbox' }).then(res => { console.log(res.data[0].mapsettings, 'res.data[0].mapsettings'); let setttings = {}; if (res.data[0].mapsettings.layers.length === 0) { res.data[0].mapsettings.layers = [defaultMap]; setttings = defaultMap; } setSchemeList(res.data[0].mapsettings.layers); setMapsettings(res.data[0].mapsettings); setSetttingsSave(res.data[0].mapsettings); res.data[0].mapsettings.layers.forEach(item => { if (item.layerType === 'PipenetLayer') { setttings = item; } }); setTimeout(() => { form.setFieldsValue({ areaName: [setttings.areaName], backgroundColor: setttings.backgroundColor, backgroundOpacity: setttings.backgroundOpacity * 100, boundColor: setttings.boundColor, boundWidth: parseInt(setttings.boundWidth), extent: setttings.extent, schemename: setttings.schemename, }); 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 => { mapInfo.current = viewObject; }; // 选择颜色 const checkColor = color => { form.setFieldsValue({ backgroundColor: color }); mapRef.current.updateAreaColor(color); setFlag(flag + 1); }; // 表单修改后对地图进行配置 const changeValue = changedFields => { if (changedFields.length === 0) { return; } console.log(changedFields, 'changedFields[0].name[0]'); let obj = JSON.parse(JSON.stringify(setttingsSave)); const index = obj.layers.findIndex( item => item.schemename === form.getFieldValue('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 => { Drawtool.activate({ view: mapInfo.current, action: 'extent', drawEnd: 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 = () => { 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}px`, backgroundColor: obj.backgroundColor, backgroundOpacity: obj.backgroundOpacity / 100, }; SetServiceConfig({ schemename: obj.schemename, terminalType: 'web', isBaseMap: false, jsonCfg: JSON.stringify(jsConfig), }).then(res => { if (res.code === 0) { notification.success({ message: '提示', duration: 3, description: '保存成功', }); let mapObj = JSON.parse(JSON.stringify(mapsettings)); const index = mapObj.layers.findIndex( item => item.schemename === form.getFieldValue('schemename'), ); mapObj.layers[index].backgroundOpacity = obj.backgroundOpacity / 100; mapObj.layers[index].boundWidth = `${obj.boundWidth}px`; mapObj.layers[index].areaName = obj.areaName[obj.areaName.length - 1]; mapObj.layers[index].backgroundColor = obj.backgroundColor; mapObj.layers[index].extent = form.getFieldValue('extent'); console.log(mapObj); setSetttingsSave(mapObj); Drawtool.deactivate(false); } else { notification.error({ message: '提示', duration: 3, description: res.msg, }); } }); SetServiceConfig({ schemename: obj.schemename, terminalType: 'phone', isBaseMap: false, jsonCfg: JSON.stringify({ extent: form.getFieldValue('extent') }), }).then(); }; console.log(mapsettings); return ( <div> <div className={styles.mapContent}> <div className={styles.mapTool}> <Form form={form} labelCol={{ span: 6 }} wrapperCol={{ span: 18 }} onFieldsChange={changeValue} onFinish={onFinish} > <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 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="复位范围"> <div style={{ display: 'flex' }}> <Form.Item name="extent" style={{ marginBottom: '0', width: '100%' }}> <Input.TextArea style={{ resize: 'none', height: '76px' }} disabled /> </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> <div className={styles.mapBox}> {canLoadMap && ( <ArcGISMap ref={mapRef} getMapInfo={e => getMapInfo(e)} config={mapsettings} widgets={widgets} /> )} </div> </div> </div> ); }; export default Map;