Skip to content

C
CivManage
Commit 0e4623e3 authored by 皮倩雯's avatar 皮倩雯
Browse files
Options

fix: '底图组件显示bug修复'

parent 59daec4d
Pipeline #82108 passed with stages
          Hide whitespace changes
          Inline Side-by-side
          Showing with 230 additions and 218 deletions
          src/pages/platformCenter/gis/schemeConfig/ScopeMap/index.jsx
          View file @ 0e4623e3
          ...@@ -198,98 +198,108 @@ const Map = props => { ...@@ -198,98 +198,108 @@ const Map = props => {
          const [keepNameCustomPointExtent, setKeepNameCustomPointExtent] = useState(''); // 保存方案初始自定义区域 const [keepNameCustomPointExtent, setKeepNameCustomPointExtent] = useState(''); // 保存方案初始自定义区域
          useEffect(() => { useEffect(() => {
          GetWebSiteConfig({ client: 'sandbox' }).then(res => { GetWebSiteConfig({ client: 'sandbox' })
          let setttings = {}; .then(res => {
          if (res.data.length === 0) { let setttings = {};
          res.data.layers = [defaultMap]; if (res.data.length === 0) {
          setttings = defaultMap; 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';
          } }
          }); setSchemeList(res.data);
          let list = {}; setMapsettings(res.data);
          list.layers = dalist; setSetttingsSave(res.data);
          console.log(list); res.data.forEach(item => {
          debugger; if (item.layerType === 'PipenetLayer') {
          setFirstList({ ...list }); setttings = item;
          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); 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;
          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); setKeepBorderArea(setttings.customPointExtent);
          console.log(setttings.customPointExtent); if (setttings.customPointExtent) {
          if (setttings.customPointExtent) { let aa = JSON.parse(setttings.customPointExtent);
          let aa = JSON.parse(setttings.customPointExtent); let data = {};
          let data = {}; if (aa && aa.type) {
          console.log(aa); setKeepDraw(aa.geometry);
          if (aa && aa.type) { setKeepNameCustomPointExtent(aa.geometry);
          setKeepDraw(aa.geometry); setKeepType(aa.type);
          setKeepNameCustomPointExtent(aa.geometry); data.type = aa.type;
          setKeepType(aa.type); let rings = [];
          data.type = aa.type; aa.geometry.map(i => {
          let rings = []; rings.push([i.x, i.y]);
          aa.geometry.map(i => { });
          rings.push([i.x, i.y]); let hh = {};
          }); hh.rings = rings;
          let hh = {}; data.geometry = geomUtils.toGeometry(hh);
          hh.rings = rings; setResultData({ ...data });
          console.log(hh); }
          data.geometry = geomUtils.toGeometry(hh); } else {
          console.log(data); setKeepNameCustomPointExtent(setttings.customPointExtent);
          setResultData({ ...data }); setKeepDraw(setttings.customPointExtent);
          } }
          } else {
          setKeepNameCustomPointExtent(setttings.customPointExtent);
          setKeepDraw(setttings.customPointExtent);
          }
          if (setttings.customPointExtent) { if (setttings.customPointExtent) {
          setDraw(1); setDraw(1);
          } else { } else {
          setDraw(0); setDraw(0);
          } }
          setFlag(setttings.customFlag); setFlag(setttings.customFlag);
          setColorList(setttings.boundColor || '#86C8F8'); setColorList(setttings.boundColor || '#86C8F8');
          setKeepColor(setttings.boundColor || '#86C8F8'); setKeepColor(setttings.boundColor || '#86C8F8');
          setColor(setttings.backgroundColor || '#000000'); setColor(setttings.backgroundColor || '#000000');
          setRadio(setttings.exportScheme || 'pandagis'); setRadio(setttings.exportScheme || 'pandagis');
          if (setttings.id) { if (setttings.id) {
          setKeep(setttings); setKeep(setttings);
          setName(setttings.id); setName(setttings.id);
          setSchemename(setttings); setSchemename(setttings);
          } else {
          setName('');
          }
          setCanLoadMap(true);
          }, 0);
          })
          .catch(err => {
          if (err.message.indexOf('timeout') !== -1) {
          notification.error({
          message: '提示',
          duration: 3,
          description: '请求超时',
          });
          } else { } else {
          setName(''); notification.error({
          message: '提示',
          duration: 3,
          description: err.message,
          });
          } }
          });
          setCanLoadMap(true);
          }, 0);
          });
          // 获取城市选择器列表 // 获取城市选择器列表
          window.AMap.plugin('AMap.DistrictSearch', () => { window.AMap.plugin('AMap.DistrictSearch', () => {
          let districtSearch = new AMap.DistrictSearch({ let districtSearch = new AMap.DistrictSearch({
          ...@@ -310,96 +320,108 @@ const Map = props => { ...@@ -310,96 +320,108 @@ const Map = props => {
          }, []); }, []);
          const getData = () => { const getData = () => {
          GetWebSiteConfig({ client: 'sandbox' }).then(res => { GetWebSiteConfig({ client: 'sandbox' })
          let setttings = {}; .then(res => {
          if (res.data.length === 0) { let setttings = {};
          res.data.layers = [defaultMap]; if (res.data.length === 0) {
          setttings = defaultMap; 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';
          } }
          }); setSchemeList(res.data);
          let list = {}; let dalist = res.data;
          list.layers = dalist; dalist.forEach(item => {
          console.log(dalist); if (item.areaName == null) {
          // setFirstList({ ...list }); item.areaName = '上海市';
          setMapsettings(res.data); item.backgroundColor = '#000000';
          setSetttingsSave(res.data); item.boundColor = '#86C8F8';
          res.data.forEach(item => { item.boundWidth = '5px';
          if (item.schemename === form.getFieldsValue().schemename) { item.backgroundOpacity = '0.6';
          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); let list = {};
          list.layers = dalist;
          // setFirstList({ ...list });
          setMapsettings(res.data);
          setSetttingsSave(res.data);
          res.data.forEach(item => {
          if (item.schemename === form.getFieldsValue().schemename) {
          setttings = item;
          }
          });
          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); setKeepBorderArea(setttings.customPointExtent);
          if (setttings.customPointExtent) { if (setttings.customPointExtent) {
          let aa = JSON.parse(setttings.customPointExtent); let aa = JSON.parse(setttings.customPointExtent);
          let data = {}; let data = {};
          console.log(aa); if (aa && aa.type) {
          if (aa && aa.type) { setKeepDraw(aa.geometry);
          setKeepDraw(aa.geometry); setKeepNameCustomPointExtent(aa.geometry);
          setKeepNameCustomPointExtent(aa.geometry); setKeepType(aa.type);
          setKeepType(aa.type); data.type = aa.type;
          data.type = aa.type; let rings = [];
          let rings = []; aa.geometry.map(i => {
          aa.geometry.map(i => { rings.push([i.x, i.y]);
          rings.push([i.x, i.y]); });
          }); let hh = {};
          let hh = {}; hh.rings = rings;
          hh.rings = rings; data.geometry = geomUtils.toGeometry(hh);
          console.log(hh); setResultData({ ...data });
          data.geometry = geomUtils.toGeometry(hh); }
          setResultData({ ...data }); } else {
          setKeepDraw(setttings.customPointExtent);
          setKeepNameCustomPointExtent(setttings.customPointExtent);
          } }
          } else {
          setKeepDraw(setttings.customPointExtent);
          setKeepNameCustomPointExtent(setttings.customPointExtent);
          }
          if (setttings.customPointExtent) { if (setttings.customPointExtent) {
          setDraw(1); setDraw(1);
          } else { } else {
          setDraw(0); setDraw(0);
          } }
          setFlag(setttings.customFlag); setFlag(setttings.customFlag);
          setColorList(setttings.boundColor || '#86C8F8'); setColorList(setttings.boundColor || '#86C8F8');
          setKeepColor(setttings.boundColor || '#86C8F8'); setKeepColor(setttings.boundColor || '#86C8F8');
          setColor(setttings.backgroundColor || '#000000'); setColor(setttings.backgroundColor || '#000000');
          setRadio(setttings.exportScheme || 'pandagis'); setRadio(setttings.exportScheme || 'pandagis');
          if (setttings.id) { if (setttings.id) {
          setKeep(setttings); setKeep(setttings);
          setName(setttings.id); setName(setttings.id);
          setSchemename(setttings); setSchemename(setttings);
          } else {
          setName('');
          }
          setCanLoadMap(true);
          }, 0);
          })
          .catch(err => {
          if (err.message.indexOf('timeout') !== -1) {
          notification.error({
          message: '提示',
          duration: 3,
          description: '请求超时',
          });
          } else { } else {
          setName(''); notification.error({
          message: '提示',
          duration: 3,
          description: err.message,
          });
          } }
          });
          setCanLoadMap(true);
          }, 0);
          });
          // 获取城市选择器列表 // 获取城市选择器列表
          window.AMap.plugin('AMap.DistrictSearch', () => { window.AMap.plugin('AMap.DistrictSearch', () => {
          let districtSearch = new AMap.DistrictSearch({ let districtSearch = new AMap.DistrictSearch({
          ...@@ -421,7 +443,6 @@ const Map = props => { ...@@ -421,7 +443,6 @@ const Map = props => {
          // 获取地图实例 // 获取地图实例
          const getMapInfo = viewObject => { const getMapInfo = viewObject => {
          console.log(areaFlag);
          // 切换方案清除自定义绘制管网; // 切换方案清除自定义绘制管网;
          // const pipenetLayers = viewObject.map.layers.filter(item => { // const pipenetLayers = viewObject.map.layers.filter(item => {
          // item.layerType && item.layerType == 'PipenetLayertest'; // item.layerType && item.layerType == 'PipenetLayertest';
          ...@@ -434,11 +455,7 @@ const Map = props => { ...@@ -434,11 +455,7 @@ const Map = props => {
          viewObject.map.remove(item); viewObject.map.remove(item);
          } }
          }); });
          console.log(123);
          setMap(viewObject); setMap(viewObject);
          console.log(viewObject);
          debugger;
          watchUtils.watch(viewObject, ['zoom'], newzoom => { watchUtils.watch(viewObject, ['zoom'], newzoom => {
          // 鼠标滚动隐藏管网图 // 鼠标滚动隐藏管网图
          viewObject.map.layers.find(layer => { viewObject.map.layers.find(layer => {
          ...@@ -449,11 +466,9 @@ const Map = props => { ...@@ -449,11 +466,9 @@ const Map = props => {
          }); });
          mapInfo.current = viewObject; mapInfo.current = viewObject;
          if (form.getFieldsValue().exportScheme == 'pandagis') { if (form.getFieldsValue().exportScheme == 'pandagis') {
          console.log(mapInfo.current.map.layers);
          let data = mapInfo.current.map.layers.find( let data = mapInfo.current.map.layers.find(
          item => item.layerType && item.layerType == 'PipenetLayertest', item => item.layerType && item.layerType == 'PipenetLayertest',
          ); );
          console.log(data);
          if (!data) { if (!data) {
          // 用户自定义创建的管网图 // 用户自定义创建的管网图
          let aa = ''; let aa = '';
          ...@@ -479,13 +494,11 @@ const Map = props => { ...@@ -479,13 +494,11 @@ const Map = props => {
          const checkColor = color => { const checkColor = color => {
          form.setFieldsValue({ backgroundColor: color }); form.setFieldsValue({ backgroundColor: color });
          setColor(color); setColor(color);
          console.log(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;
          } }
          ...@@ -542,42 +555,55 @@ const Map = props => { ...@@ -542,42 +555,55 @@ const Map = props => {
          i.layerType = 'PipenetLayer'; i.layerType = 'PipenetLayer';
          } }
          }); });
          console.log(aa);
          // setFirstList({ ...aa }); // setFirstList({ ...aa });
          break; break;
          case 'schemename': case 'schemename':
          setKeepDataDraw([]); setKeepDataDraw([]);
          setRadio1(''); setRadio1('');
          GetWebSiteConfig({ client: 'sandbox' }).then(res => { GetWebSiteConfig({ client: 'sandbox' })
          setSchemeList(res.data); .then(res => {
          setMapsettings(res.data); setSchemeList(res.data);
          setSetttingsSave(res.data); setMapsettings(res.data);
          setSetttingsSave(res.data);
          let dalist = res.data; let dalist = res.data;
          dalist.forEach(item => { dalist.forEach(item => {
          if (item.layerType == 'PipenetLayer') { if (item.layerType == 'PipenetLayer') {
          item.layerType = 'dynamic'; item.layerType = 'dynamic';
          } }
          if (item.areaName == null) { if (item.areaName == null) {
          item.areaName = '上海市'; item.areaName = '上海市';
          item.backgroundColor = '#000000'; item.backgroundColor = '#000000';
          item.boundColor = '#86C8F8'; item.boundColor = '#86C8F8';
          item.boundWidth = '5px'; item.boundWidth = '5px';
          item.backgroundOpacity = '0.6'; item.backgroundOpacity = '0.6';
          console.log(changedFields[0].value); console.log(changedFields[0].value);
          } }
          if (item.schemename == changedFields[0].value) { if (item.schemename == changedFields[0].value) {
          item.layerType = 'PipenetLayer'; item.layerType = 'PipenetLayer';
          }
          });
          let list = {};
          list.layers = dalist;
          mapRef.current.mapchange(dalist);
          // setFirstList({ ...list });
          })
          .catch(err => {
          if (err.message.indexOf('timeout') !== -1) {
          notification.error({
          message: '提示',
          duration: 3,
          description: '请求超时',
          });
          } else {
          notification.error({
          message: '提示',
          duration: 3,
          description: err.message,
          });
          } }
          }); });
          console.log(dalist);
          let list = {};
          list.layers = dalist;
          console.log(list);
          debugger;
          setFirstList({ ...list });
          });
          setArea(''); setArea('');
          Drawtool.deactivate(false); Drawtool.deactivate(false);
          ...@@ -589,7 +615,6 @@ const Map = props => { ...@@ -589,7 +615,6 @@ const Map = props => {
          if (item.schemename === changedFields[0].value) { if (item.schemename === changedFields[0].value) {
          item.layerType = 'PipenetLayer'; item.layerType = 'PipenetLayer';
          setttings = item; setttings = item;
          console.log(item);
          setSchemename(item); setSchemename(item);
          setName(item.id); setName(item.id);
          setKeep(item); setKeep(item);
          ...@@ -666,7 +691,6 @@ const Map = props => { ...@@ -666,7 +691,6 @@ const Map = props => {
          aa = 1; aa = 1;
          setLoad(false); setLoad(false);
          setArea(data); setArea(data);
          console.log(data);
          const geom1 = geomUtils.toGeometry({ const geom1 = geomUtils.toGeometry({
          type: 'extent', type: 'extent',
          xmin: data.rings[0][0][0], xmin: data.rings[0][0][0],
          ...@@ -689,7 +713,6 @@ const Map = props => { ...@@ -689,7 +713,6 @@ const Map = props => {
          const saveCallBack = e => { const saveCallBack = e => {
          setSaveFlag(1); setSaveFlag(1);
          console.log(e);
          if (e.geometry && e.geometry.rings) { if (e.geometry && e.geometry.rings) {
          let geom1 = []; let geom1 = [];
          e.geometry.rings[0].forEach(i => { e.geometry.rings[0].forEach(i => {
          ...@@ -740,7 +763,6 @@ const Map = props => { ...@@ -740,7 +763,6 @@ const Map = props => {
          if (radio == 'arcgis') { if (radio == 'arcgis') {
          let style = styleRef.current.stylesCompare(); let style = styleRef.current.stylesCompare();
          if (JSON.stringify(style.originalStyle) == JSON.stringify(style.newStyle)) { if (JSON.stringify(style.originalStyle) == JSON.stringify(style.newStyle)) {
          console.log(123);
          } else { } else {
          message.error('请先保存管网前端绘制方案'); message.error('请先保存管网前端绘制方案');
          return; return;
          ...@@ -779,24 +801,20 @@ const Map = props => { ...@@ -779,24 +801,20 @@ const Map = props => {
          data.geometry = obj.customPointExtent; data.geometry = obj.customPointExtent;
          } else { } else {
          data = obj.customPointExtent; data = obj.customPointExtent;
          console.log(obj.customPointExtent);
          } }
          } else if (keepDataDraw.length > 0) { } else if (keepDataDraw.length > 0) {
          data.type = keepType; data.type = keepType;
          data.geometry = keepDataDraw; data.geometry = keepDataDraw;
          } else if (keepBorderArea) { } else if (keepBorderArea) {
          console.log(keepBorderArea.constructor);
          if (keepBorderArea.constructor === Array) { if (keepBorderArea.constructor === Array) {
          data.type = keepType; data.type = keepType;
          data.geometry = keepBorderArea; data.geometry = keepBorderArea;
          } else if (keepBorderArea.constructor === Object) { } else if (keepBorderArea.constructor === Object) {
          data = keepBorderArea; data = keepBorderArea;
          } }
          console.log(keepBorderArea);
          } else { } else {
          data = ''; data = '';
          } }
          console.log(data);
          if (JSON.stringify(data) === '{}') { if (JSON.stringify(data) === '{}') {
          data = null; data = null;
          } }
          ...@@ -900,12 +918,10 @@ const Map = props => { ...@@ -900,12 +918,10 @@ const Map = props => {
          Drawtool.deactivate(); Drawtool.deactivate();
          setRadio1(e.target.value); setRadio1(e.target.value);
          } else { } else {
          console.log(keepDraw);
          if (keepDraw) { if (keepDraw) {
          let area1 = form.getFieldsValue().areaName; let area1 = form.getFieldsValue().areaName;
          mapRef.current.changeAreaName(area1[area1.length - 1], keepDraw); mapRef.current.changeAreaName(area1[area1.length - 1], keepDraw);
          let data = {}; let data = {};
          console.log(keepType);
          data.type = keepType; data.type = keepType;
          let rings = []; let rings = [];
          keepDraw.map(i => { keepDraw.map(i => {
          ...@@ -913,7 +929,6 @@ const Map = props => { ...@@ -913,7 +929,6 @@ const Map = props => {
          }); });
          let hh = {}; let hh = {};
          hh.rings = rings; hh.rings = rings;
          console.log(hh);
          data.geometry = geomUtils.toGeometry(hh); data.geometry = geomUtils.toGeometry(hh);
          setResultData({ ...data }); setResultData({ ...data });
          } }
          ...@@ -935,7 +950,6 @@ const Map = props => { ...@@ -935,7 +950,6 @@ const Map = props => {
          i.layerType = 'PipenetLayer'; i.layerType = 'PipenetLayer';
          } }
          }); });
          console.log(aa);
          // setFirstList({ ...aa }); // setFirstList({ ...aa });
          }; };
          ...@@ -946,7 +960,6 @@ const Map = props => { ...@@ -946,7 +960,6 @@ const Map = props => {
          // 颜色选择 // 颜色选择
          const colorChange = value => { const colorChange = value => {
          form.setFieldsValue({ boundColor: value.hex }); form.setFieldsValue({ boundColor: value.hex });
          console.log(value.hex);
          mapRef.current.changeBoundColor(value.hex); mapRef.current.changeBoundColor(value.hex);
          setColorList(value.hex); setColorList(value.hex);
          }; };
          ...@@ -1259,7 +1272,6 @@ const Map = props => { ...@@ -1259,7 +1272,6 @@ const Map = props => {
          )} )}
          {radio1 == 1 && butState ? ( {radio1 == 1 && butState ? (
          <> <>
          <span>{console.log(form.getFieldsValue().areaName)}</span>
          <EditAndDrawPanel <EditAndDrawPanel
          view={mapInfo.current} view={mapInfo.current}
          editType={['POLYGON', 'EXTENT', 'CIRCLE']} editType={['POLYGON', 'EXTENT', 'CIRCLE']}
          ......
          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