Commit c3c11d49 authored by 皮倩雯's avatar 皮倩雯

地图配置新曾边界颜色修改

parent 6e237d73
Pipeline #59751 passed with stages
# PUBLIC_PATH = reactOMS, 默认转发 /cityinterface # PUBLIC_PATH = reactOMS, 默认转发 /cityinterface
PROXY=/PandaGIS:http://192.168.12.140:8081;/Cityinterface:http://192.168.12.140:8081;/PandaOMS:http://192.168.12.140:8081;/Publish:http://192.168.12.140:8081;/Web4:http://192.168.12.140:8081;/CityTemp:http://192.168.12.140:8081 PROXY=/PandaGIS:http://192.168.12.78:8018;/Cityinterface:http://192.168.12.78:8018;/PandaOMS:http://192.168.12.78:8018;/Publish:http://192.168.12.78:8018;/Web4:http://192.168.12.78:8018;/CityTemp:http://192.168.12.78:8018
# PROXY=/Cityinterface:http://192.168.12.121:8082;/PandaOMS:http://192.168.12.121:8082;/Web4:http://192.168.12.121:8082;/CityTemp:http://192.168.12.121:8082 # PROXY=/Cityinterface:http://192.168.12.121:8082;/PandaOMS:http://192.168.12.121:8082;/Web4:http://192.168.12.121:8082;/CityTemp:http://192.168.12.121:8082
# 可设置第二个代理,test为转发前缀,后面为代理转发的地址 # 可设置第二个代理,test为转发前缀,后面为代理转发的地址
# PROXY2 = test : http://localhost:8006/ # PROXY2 = test : http://localhost:8006/
# 本地应用启动的host域名 # 本地应用启动的host域名
HOST = 127.0.0.1 HOST = 192.168.12.78
# 本地应用启动的端口 # 本地应用启动的端口
PORT = 3002 PORT = 3001
...@@ -92,7 +92,7 @@ ...@@ -92,7 +92,7 @@
"@esri/calcite-colors": "6.0.3", "@esri/calcite-colors": "6.0.3",
"@wisdom-cesium/cesium": "^1.0.78", "@wisdom-cesium/cesium": "^1.0.78",
"@wisdom-map/amap": "1.1.0-beta.38", "@wisdom-map/amap": "1.1.0-beta.38",
"@wisdom-map/arcgismap": "1.4.0-44", "@wisdom-map/arcgismap": "1.4.0-46",
"@wisdom-map/basemap": "1.1.0-10", "@wisdom-map/basemap": "1.1.0-10",
"ace-builds": "^1.4.12", "ace-builds": "^1.4.12",
"antd-img-crop": "^3.13.2", "antd-img-crop": "^3.13.2",
......
...@@ -7,10 +7,10 @@ const argv = require('./argv'); ...@@ -7,10 +7,10 @@ const argv = require('./argv');
const port = require('./port'); const port = require('./port');
const setup = require('./middlewares/frontendMiddleware'); const setup = require('./middlewares/frontendMiddleware');
const isDev = process.env.NODE_ENV !== 'production'; const isDev = process.env.NODE_ENV !== 'production';
const ngrok = // const ngrok =
(isDev && process.env.ENABLE_TUNNEL) || argv.tunnel // (isDev && process.env.ENABLE_TUNNEL) || argv.tunnel
? require('ngrok') // ? require('ngrok')
: false; // : false;
const { resolve } = require('path'); const { resolve } = require('path');
const app = express(); const app = express();
...@@ -42,15 +42,16 @@ app.listen(port, host, async err => { ...@@ -42,15 +42,16 @@ app.listen(port, host, async err => {
} }
// Connect to ngrok in dev mode // Connect to ngrok in dev mode
if (ngrok) { // if (ngrok) {
let url; // let url;
try { // try {
url = await ngrok.connect(port); // url = await ngrok.connect(port);
} catch (e) { // } catch (e) {
return logger.error(e); // return logger.error(e);
} // }
logger.appStarted(port, prettyHost, url); // logger.appStarted(port, prettyHost, url);
} else { // } else {
logger.appStarted(port, prettyHost); // logger.appStarted(port, prettyHost);
} // }
logger.appStarted(port, prettyHost);
}); });
...@@ -2,6 +2,7 @@ ...@@ -2,6 +2,7 @@
/* eslint-disable import/no-duplicates */ /* eslint-disable import/no-duplicates */
/* eslint-disable no-new */ /* eslint-disable no-new */
import React, { useEffect, useState, useRef } from 'react'; import React, { useEffect, useState, useRef } from 'react';
import { SketchPicker } from 'react-color';
import { import {
ArcGISMap, ArcGISMap,
ArcGISSceneMap, ArcGISSceneMap,
...@@ -151,6 +152,7 @@ const Map = props => { ...@@ -151,6 +152,7 @@ const Map = props => {
const [keepSave, setKeepSave] = useState(''); const [keepSave, setKeepSave] = useState('');
const [map, setMap] = useState(null); const [map, setMap] = useState(null);
const [color, setColor] = useState(''); const [color, setColor] = useState('');
const [colorList, setColorList] = useState('');
useEffect(() => { useEffect(() => {
// GetSpriteSheet().then(res => { // GetSpriteSheet().then(res => {
...@@ -165,23 +167,24 @@ const Map = props => { ...@@ -165,23 +167,24 @@ const Map = props => {
setSchemeList(res.data); setSchemeList(res.data);
setMapsettings(res.data); setMapsettings(res.data);
setSetttingsSave(res.data); setSetttingsSave(res.data);
res.data.forEach(item => { res.data.forEach(item => {
if (item.layerType === 'PipenetLayer') { if (item.layerType === 'PipenetLayer') {
setttings = item; setttings = item;
} }
}); });
console.log(setttings);
setTimeout(() => { setTimeout(() => {
form.setFieldsValue({ form.setFieldsValue({
areaName: [setttings.areaName], areaName: [setttings.areaName],
backgroundColor: setttings.backgroundColor, backgroundColor: setttings.backgroundColor,
backgroundOpacity: setttings.backgroundOpacity * 100, backgroundOpacity: setttings.backgroundOpacity * 100,
boundColor: setttings.boundColor, boundColor: setttings.boundColor || '#86C8F8',
boundWidth: parseInt(setttings.boundWidth), boundWidth: parseInt(setttings.boundWidth),
extent: setttings.extent, extent: setttings.extent,
schemename: setttings.schemename, schemename: setttings.schemename,
exportScheme: setttings.exportScheme || 'pandagis', exportScheme: setttings.exportScheme || 'pandagis',
}); });
setColorList(setttings.boundColor || '#86C8F8');
setColor(setttings.backgroundColor); setColor(setttings.backgroundColor);
setRadio(setttings.exportScheme || 'pandagis'); setRadio(setttings.exportScheme || 'pandagis');
if (setttings.id) { if (setttings.id) {
...@@ -212,35 +215,69 @@ const Map = props => { ...@@ -212,35 +215,69 @@ const Map = props => {
}); });
}); });
}, []); }, []);
// 获取地图实例 // 获取地图实例
const getMapInfo = viewObject => { const getMapInfo = viewObject => {
setMap(viewObject); setMap(viewObject);
const { layer } = getPipenetLayer(viewObject?.map); const { layer } = getPipenetLayer(viewObject?.map);
if (layer) { if (layer) {
console.log(232324234);
layer.visible = false; layer.visible = false;
} }
watchUtils.watch(viewObject, ['zoom'], newzoom => { watchUtils.watch(viewObject, ['zoom'], newzoom => {
// 鼠标滚动隐藏前端绘制的管网图 // 鼠标滚动隐藏前端绘制的管网图
viewObject.map.layers.find(layer => { viewObject.map.layers.find(layer => {
if (layer.layerType == 'PipenetLayer') { if (layer.layerType == 'PipenetLayer') {
console.log(11111111);
layer.visible = false; layer.visible = false;
} }
}); });
}); });
if (radio == 'pandagis') { console.log(88888);
// 用户自定义创建的管网图
viewObject.map.add(pandagis);
}
mapInfo.current = viewObject; mapInfo.current = viewObject;
// if (radio == 'pandagis') {
// console.log(999999);
// // 用户自定义创建的管网图
// viewObject.map.add(pandagis);
// }
// gate();
};
const gate = () => {
console.log(form.getFieldsValue().schemename);
console.log(setttingsSave);
let aa = form.getFieldsValue().schemename;
setttingsSave.forEach(item => {
if (item.schemename === aa) {
if (!item.areaName) {
console.log(123);
mapRef.current.changeAreaName('上海市');
}
// if (!item.backgroundColor) {
// mapRef.current.updateAreaColor('#000000');
// }
if (!item.backgroundOpacity) {
mapRef.current.changeBackgroundOpacity('0.6');
}
// if (!item.boundWidth) {
// mapRef.current.changeBoundWidthValue('10');
// }
}
});
}; };
// 选择颜色 // 选择颜色
const checkColor = color => { const checkColor = color => {
form.setFieldsValue({ backgroundColor: color }); form.setFieldsValue({ backgroundColor: color });
setColor(color); setColor(color);
mapRef.current.updateAreaColor(color); mapRef.current.updateAreaColor(color);
}; };
// 表单修改后对地图进行配置 // 表单修改后对地图进行配置
const changeValue = changedFields => { const changeValue = changedFields => {
console.log(changedFields);
if (changedFields.length === 0) { if (changedFields.length === 0) {
return; return;
} }
...@@ -255,6 +292,10 @@ const Map = props => { ...@@ -255,6 +292,10 @@ const Map = props => {
obj[index].boundWidth = changedFields[0].value; obj[index].boundWidth = changedFields[0].value;
mapRef.current.changeBoundWidthValue(obj[index].boundWidth); mapRef.current.changeBoundWidthValue(obj[index].boundWidth);
break; break;
case 'boundColor':
obj[index].boundColor = changedFields[0].value.hex;
mapRef.current.changeBoundColor(obj[index].boundColor);
break;
case 'areaName': case 'areaName':
Drawtool.deactivate(false); Drawtool.deactivate(false);
obj[index].areaName = changedFields[0].value[changedFields[0].value.length - 1]; obj[index].areaName = changedFields[0].value[changedFields[0].value.length - 1];
...@@ -284,24 +325,27 @@ const Map = props => { ...@@ -284,24 +325,27 @@ const Map = props => {
} }
}); });
form.setFieldsValue({ form.setFieldsValue({
areaName: setttings.areaName, areaName: [setttings.areaName],
backgroundColor: setttings.backgroundColor, backgroundColor: setttings.backgroundColor,
backgroundOpacity: setttings.backgroundOpacity * 100, backgroundOpacity: setttings.backgroundOpacity * 100,
boundColor: setttings.boundColor, boundColor: setttings.boundColor || '#86C8F8',
boundWidth: parseInt(setttings.boundWidth), boundWidth: parseInt(setttings.boundWidth),
extent: setttings.extent, extent: setttings.extent,
exportScheme: setttings.exportScheme || 'pandagis', exportScheme: setttings.exportScheme || 'pandagis',
}); });
setColorList(setttings.boundColor || '#86C8F8');
setColor(setttings.backgroundColor); setColor(setttings.backgroundColor);
setRadio(setttings.exportScheme || 'pandagis'); setRadio(setttings.exportScheme || 'pandagis');
mapRef.current.mapchange(obj); mapRef.current.mapchange(obj);
// 清除原有接口返回后端绘制的管网图 // 清除原有接口返回后端绘制的管网图
const { layer } = getPipenetLayer(mapRef.current?.map); const { layer } = getPipenetLayer(mapRef.current?.map);
if (layer) { if (layer) {
console.log(6666666);
layer.visible = false; layer.visible = false;
} }
// 若方案是后端绘制每次切换首先创建用户自定义的后端绘制管网 // 若方案有管网且是后端绘制每次切换首先创建用户自定义的后端绘制管网
if (setttings.exportScheme != 'arcgis') { if (setttings.exportScheme == 'pandagis') {
console.log(222222);
const pandagisaa = new MapImageLayer({ const pandagisaa = new MapImageLayer({
id: setttings.id, id: setttings.id,
url: `/PandaGIS/MapServer/${setttings.id}`, url: `/PandaGIS/MapServer/${setttings.id}`,
...@@ -361,10 +405,17 @@ const Map = props => { ...@@ -361,10 +405,17 @@ const Map = props => {
} else { } else {
aa = obj.areaName; aa = obj.areaName;
} }
let list;
if (obj.boundColor.hex) {
list = obj.boundColor.hex;
} else {
list = obj.boundColor;
}
console.log(obj);
const jsConfig = { const jsConfig = {
extent: form.getFieldValue('extent'), extent: form.getFieldValue('extent'),
areaName: aa, areaName: aa,
boundColor: '#86c8f8', boundColor: list,
boundWidth: `${obj.boundWidth}px`, boundWidth: `${obj.boundWidth}px`,
backgroundColor: obj.backgroundColor, backgroundColor: obj.backgroundColor,
backgroundOpacity: obj.backgroundOpacity / 100, backgroundOpacity: obj.backgroundOpacity / 100,
...@@ -423,6 +474,7 @@ const Map = props => { ...@@ -423,6 +474,7 @@ const Map = props => {
// 选择前端绘制时,如果界面有自定义的管网图就隐藏 // 选择前端绘制时,如果界面有自定义的管网图就隐藏
mapInfo.current.map.layers.forEach(item => { mapInfo.current.map.layers.forEach(item => {
if (item.layerType && item.layerType == 'PipenetLayertest') { if (item.layerType && item.layerType == 'PipenetLayertest') {
console.log(444444444);
mapInfo.current.map.remove(item); mapInfo.current.map.remove(item);
} }
}); });
...@@ -437,6 +489,12 @@ const Map = props => { ...@@ -437,6 +489,12 @@ const Map = props => {
setKeepSave(e); setKeepSave(e);
}; };
// 颜色选择
const colorChange = value => {
console.log(value);
setColorList(value.hex);
};
return ( return (
<div> <div>
<div className={styles.mapContent}> <div className={styles.mapContent}>
...@@ -448,7 +506,7 @@ const Map = props => { ...@@ -448,7 +506,7 @@ const Map = props => {
onFieldsChange={changeValue} onFieldsChange={changeValue}
onFinish={onFinish} onFinish={onFinish}
> >
<Form.Item label="切换方案" name="schemename"> <Form.Item label="切换方案" name="schemename" style={{ marginBottom: '19px' }}>
<Select placeholder="请选择方案"> <Select placeholder="请选择方案">
{schemeList.map((item, index) => ( {schemeList.map((item, index) => (
<Option value={item.schemename} key={index}> <Option value={item.schemename} key={index}>
...@@ -457,7 +515,7 @@ const Map = props => { ...@@ -457,7 +515,7 @@ const Map = props => {
))} ))}
</Select> </Select>
</Form.Item> </Form.Item>
<Form.Item label="地区选择" name="areaName"> <Form.Item label="地区选择" name="areaName" style={{ marginBottom: '19px' }}>
<Cascader <Cascader
fieldNames={{ fieldNames={{
label: 'name', label: 'name',
...@@ -472,7 +530,7 @@ const Map = props => { ...@@ -472,7 +530,7 @@ const Map = props => {
/> />
</Form.Item> </Form.Item>
<Form.Item label="遮罩颜色" name="backgroundColor"> <Form.Item label="遮罩颜色" name="backgroundColor" style={{ marginBottom: '19px' }}>
<div className={styles.colorContent}> <div className={styles.colorContent}>
{colorArr.map(item => ( {colorArr.map(item => (
<div <div
...@@ -486,14 +544,17 @@ const Map = props => { ...@@ -486,14 +544,17 @@ const Map = props => {
))} ))}
</div> </div>
</Form.Item> </Form.Item>
<Form.Item label="透明度(%)" name="backgroundOpacity"> <Form.Item label="透明度(%)" name="backgroundOpacity" style={{ marginBottom: '19px' }}>
<Slider min={0} max={100} /> <Slider min={0} max={100} />
</Form.Item> </Form.Item>
<Form.Item label="边界宽度" name="boundWidth"> <Form.Item label="边界颜色" name="boundColor" style={{ marginBottom: '19px' }}>
<SketchPicker width="217px" color={colorList} onChange={e => colorChange(e)} />
</Form.Item>
<Form.Item label="边界宽度" name="boundWidth" style={{ marginBottom: '19px' }}>
<InputNumber min={1} max={10} /> <InputNumber min={1} max={10} />
</Form.Item> </Form.Item>
{name ? ( {name ? (
<Form.Item label="管网方案" name="exportScheme"> <Form.Item label="管网方案" name="exportScheme" style={{ marginBottom: '19px' }}>
<Radio.Group onChange={onChange} value={radio}> <Radio.Group onChange={onChange} value={radio}>
<Radio value="pandagis">后端绘制</Radio> <Radio value="pandagis">后端绘制</Radio>
<Radio value="arcgis">前端绘制</Radio> <Radio value="arcgis">前端绘制</Radio>
...@@ -503,7 +564,7 @@ const Map = props => { ...@@ -503,7 +564,7 @@ const Map = props => {
<></> <></>
)} )}
<Form.Item label="复位范围"> <Form.Item label="复位范围" style={{ marginBottom: '19px' }}>
<div style={{ display: 'flex' }}> <div style={{ display: 'flex' }}>
<Form.Item name="extent" style={{ marginBottom: '0', width: '100%' }}> <Form.Item name="extent" style={{ marginBottom: '0', width: '100%' }}>
<Input.TextArea style={{ resize: 'none', height: '76px' }} disabled /> <Input.TextArea style={{ resize: 'none', height: '76px' }} disabled />
......
...@@ -53,6 +53,7 @@ const AddModal = props => { ...@@ -53,6 +53,7 @@ const AddModal = props => {
const [current, setCurrent] = useState(false); const [current, setCurrent] = useState(false);
const [type1, setType] = useState(0); const [type1, setType] = useState(0);
const [form] = Form.useForm(); const [form] = Form.useForm();
const [radio1, setRadio1] = useState();
const arr = [ const arr = [
'assets/images/thumbnail/thumbnail_1.jpg', 'assets/images/thumbnail/thumbnail_1.jpg',
'assets/images/thumbnail/thumbnail_2.jpg', 'assets/images/thumbnail/thumbnail_2.jpg',
...@@ -122,6 +123,7 @@ const AddModal = props => { ...@@ -122,6 +123,7 @@ const AddModal = props => {
taggingUrl: obj.taggingUrl, taggingUrl: obj.taggingUrl,
icon: obj.icon, icon: obj.icon,
type: obj.type, type: obj.type,
isTainDiTu: obj.isTainDiTu,
}), }),
}; };
} }
...@@ -167,6 +169,7 @@ const AddModal = props => { ...@@ -167,6 +169,7 @@ const AddModal = props => {
console.log(baseMap); console.log(baseMap);
switch (type) { switch (type) {
case 'add': case 'add':
setRadio1(0);
setRadio(''); setRadio('');
form.resetFields(); form.resetFields();
form.setFieldsValue({ form.setFieldsValue({
...@@ -179,12 +182,14 @@ const AddModal = props => { ...@@ -179,12 +182,14 @@ const AddModal = props => {
Port: '8080', Port: '8080',
User: 'admin', User: 'admin',
Pwd: 'geoserver', Pwd: 'geoserver',
isTainDiTu: 0,
levelEndEnlarge: false, levelEndEnlarge: false,
}); });
break; break;
case 'edit': case 'edit':
console.log(formObj); console.log(formObj);
setRadio1(formObj.isTainDiTu || 0);
form.setFieldsValue({ ...formObj }); form.setFieldsValue({ ...formObj });
let index = formObj.icon.lastIndexOf('/'); let index = formObj.icon.lastIndexOf('/');
let str = formObj.icon.substring(index + 1, formObj.icon.length); let str = formObj.icon.substring(index + 1, formObj.icon.length);
...@@ -517,6 +522,10 @@ const AddModal = props => { ...@@ -517,6 +522,10 @@ const AddModal = props => {
0: '0%', 0: '0%',
100: '100%', 100: '100%',
}; };
const onChange1 = e => {
setRadio1(e.target.value);
};
return ( return (
<Modal <Modal
title="添加基础底图" title="添加基础底图"
...@@ -627,6 +636,12 @@ const AddModal = props => { ...@@ -627,6 +636,12 @@ const AddModal = props => {
<Item label="注记URL" name="taggingUrl"> <Item label="注记URL" name="taggingUrl">
<Input placeholder="请输入url" allowClear /> <Input placeholder="请输入url" allowClear />
</Item> </Item>
<Item label="天地图坐标系" name="isTainDiTu">
<Radio.Group onChange={onChange1} value={radio1}>
<Radio value={0}></Radio>
<Radio value={1}></Radio>
</Radio.Group>
</Item>
</> </>
)} )}
{/* <Item label="缩略图" name="icon" rules={[{ required: true, message: '请选择缩略图' }]}> {/* <Item label="缩略图" name="icon" rules={[{ required: true, message: '请选择缩略图' }]}>
......
...@@ -51,6 +51,7 @@ const NewEditModal = props => { ...@@ -51,6 +51,7 @@ const NewEditModal = props => {
const [current, setCurrent] = useState(false); const [current, setCurrent] = useState(false);
const [type1, setType] = useState(0); const [type1, setType] = useState(0);
const [form] = Form.useForm(); const [form] = Form.useForm();
const [radio1, setRadio1] = useState();
const arr = [ const arr = [
'assets/images/thumbnail/thumbnail_1.jpg', 'assets/images/thumbnail/thumbnail_1.jpg',
'assets/images/thumbnail/thumbnail_2.jpg', 'assets/images/thumbnail/thumbnail_2.jpg',
...@@ -118,6 +119,7 @@ const NewEditModal = props => { ...@@ -118,6 +119,7 @@ const NewEditModal = props => {
taggingUrl: obj.taggingUrl, taggingUrl: obj.taggingUrl,
icon: obj.icon, icon: obj.icon,
type: obj.type, type: obj.type,
isTainDiTu: obj.isTainDiTu,
extent: null, extent: null,
baseLayer: null, baseLayer: null,
proxyUrl: null, proxyUrl: null,
...@@ -197,12 +199,15 @@ const NewEditModal = props => { ...@@ -197,12 +199,15 @@ const NewEditModal = props => {
setAdvanced(0); setAdvanced(0);
setCurrent(false); setCurrent(false);
} }
console.log(formObj.isTainDiTu);
setRadio1(formObj.isTainDiTu);
switch (type) { switch (type) {
case 'edit': case 'edit':
console.log(formObj); console.log(formObj);
form.setFieldsValue({ form.setFieldsValue({
...formObj, ...formObj,
isTainDiTu: formObj.isTainDiTu,
IP: formObj.m_Ip, IP: formObj.m_Ip,
gis: formObj.gsAppName, gis: formObj.gsAppName,
layer: formObj.baseLayer, layer: formObj.baseLayer,
...@@ -480,6 +485,11 @@ const NewEditModal = props => { ...@@ -480,6 +485,11 @@ const NewEditModal = props => {
0: '0%', 0: '0%',
100: '100%', 100: '100%',
}; };
const onChange1 = e => {
setRadio1(e.target.value);
};
return ( return (
<Modal <Modal
title="编辑基础底图" title="编辑基础底图"
...@@ -582,6 +592,12 @@ const NewEditModal = props => { ...@@ -582,6 +592,12 @@ const NewEditModal = props => {
<Item label="注记URL" name="taggingUrl"> <Item label="注记URL" name="taggingUrl">
<Input placeholder="请输入url" allowClear /> <Input placeholder="请输入url" allowClear />
</Item> </Item>
<Item label="天地图坐标系" name="isTainDiTu">
<Radio.Group onChange={onChange1} value={radio1}>
<Radio value={0}></Radio>
<Radio value={1}></Radio>
</Radio.Group>
</Item>
</> </>
)} )}
{/* <Item label="缩略图" name="icon" rules={[{ required: true, message: '请选择缩略图' }]}> {/* <Item label="缩略图" name="icon" rules={[{ required: true, message: '请选择缩略图' }]}>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment