diff --git a/src/views/gisMapPage/gisMapBox1.vue b/src/views/gisMapPage/gisMapBox1.vue index 1d0da9b..9210bb6 100644 --- a/src/views/gisMapPage/gisMapBox1.vue +++ b/src/views/gisMapPage/gisMapBox1.vue @@ -92,12 +92,12 @@ // getLayerIdByClick(); (config.orders || []).forEach(item => setLayerOrder(...item)); newfiberMapbox.getLayers().filter(i => highlightLayers[i.newfiberId] && (highlightLayers[i.newfiberId] = i)); - let timeout = setTimeout(() => { - let { pitch, center } = config.params.init; - pitch && newfiberMapbox.map.setPitch(pitch); - center && newfiberMapbox.map.setCenter(center); - clearTimeout(timeout); - }, 1000); + // let timeout = setTimeout(() => { + let { pitch, center } = config.params.init; + pitch && newfiberMapbox.map.setPitch(pitch); + center && newfiberMapbox.map.setCenter(center); + //clearTimeout(timeout); + //}, 1000); newfiberMapbox.map.load = true; }); }, 200); diff --git a/src/views/gisMapPage/gisMapBox1.vue b/src/views/gisMapPage/gisMapBox1.vue index 1d0da9b..9210bb6 100644 --- a/src/views/gisMapPage/gisMapBox1.vue +++ b/src/views/gisMapPage/gisMapBox1.vue @@ -92,12 +92,12 @@ // getLayerIdByClick(); (config.orders || []).forEach(item => setLayerOrder(...item)); newfiberMapbox.getLayers().filter(i => highlightLayers[i.newfiberId] && (highlightLayers[i.newfiberId] = i)); - let timeout = setTimeout(() => { - let { pitch, center } = config.params.init; - pitch && newfiberMapbox.map.setPitch(pitch); - center && newfiberMapbox.map.setCenter(center); - clearTimeout(timeout); - }, 1000); + // let timeout = setTimeout(() => { + let { pitch, center } = config.params.init; + pitch && newfiberMapbox.map.setPitch(pitch); + center && newfiberMapbox.map.setCenter(center); + //clearTimeout(timeout); + //}, 1000); newfiberMapbox.map.load = true; }); }, 200); diff --git a/src/views/project/projectInformation/index.vue b/src/views/project/projectInformation/index.vue index 493d73c..793398e 100644 --- a/src/views/project/projectInformation/index.vue +++ b/src/views/project/projectInformation/index.vue @@ -210,7 +210,7 @@ projectInfoNewDetail, updateProjectBuildStatus, } from '@/api/project/projectInformationNew'; - +import bus from '@/bus'; const { proxy } = getCurrentInstance(); const { build_category, project_library_type, project_content_type, build_status, findText } = useDicts(proxy); const { project_data_sources } = proxy.useDict('project_data_sources'); @@ -288,6 +288,7 @@ opts.text = optTextMap.get(type); curRow.value = data; curRow.value.analysisUsers1 = data.drainagePartition ? data.drainagePartition.split(',') : []; + bus.emit('getProjectRowData', data); }; const close = type => { diff --git a/src/views/gisMapPage/gisMapBox1.vue b/src/views/gisMapPage/gisMapBox1.vue index 1d0da9b..9210bb6 100644 --- a/src/views/gisMapPage/gisMapBox1.vue +++ b/src/views/gisMapPage/gisMapBox1.vue @@ -92,12 +92,12 @@ // getLayerIdByClick(); (config.orders || []).forEach(item => setLayerOrder(...item)); newfiberMapbox.getLayers().filter(i => highlightLayers[i.newfiberId] && (highlightLayers[i.newfiberId] = i)); - let timeout = setTimeout(() => { - let { pitch, center } = config.params.init; - pitch && newfiberMapbox.map.setPitch(pitch); - center && newfiberMapbox.map.setCenter(center); - clearTimeout(timeout); - }, 1000); + // let timeout = setTimeout(() => { + let { pitch, center } = config.params.init; + pitch && newfiberMapbox.map.setPitch(pitch); + center && newfiberMapbox.map.setCenter(center); + //clearTimeout(timeout); + //}, 1000); newfiberMapbox.map.load = true; }); }, 200); diff --git a/src/views/project/projectInformation/index.vue b/src/views/project/projectInformation/index.vue index 493d73c..793398e 100644 --- a/src/views/project/projectInformation/index.vue +++ b/src/views/project/projectInformation/index.vue @@ -210,7 +210,7 @@ projectInfoNewDetail, updateProjectBuildStatus, } from '@/api/project/projectInformationNew'; - +import bus from '@/bus'; const { proxy } = getCurrentInstance(); const { build_category, project_library_type, project_content_type, build_status, findText } = useDicts(proxy); const { project_data_sources } = proxy.useDict('project_data_sources'); @@ -288,6 +288,7 @@ opts.text = optTextMap.get(type); curRow.value = data; curRow.value.analysisUsers1 = data.drainagePartition ? data.drainagePartition.split(',') : []; + bus.emit('getProjectRowData', data); }; const close = type => { diff --git a/src/views/project/projectInformation/operate.vue b/src/views/project/projectInformation/operate.vue index 2beb7a9..5c6a5d9 100644 --- a/src/views/project/projectInformation/operate.vue +++ b/src/views/project/projectInformation/operate.vue @@ -108,7 +108,7 @@ @@ -327,7 +327,7 @@ - +
@@ -381,7 +381,7 @@ import ImageFileUpload from '@/components/ImageFileUpload'; import { getImageUrl } from '@/utils/ruoyi'; import mapBoxSelectPositionVue from '../../../components/mapBoxSelectPosition/mapBoxSelectPosition.vue'; -import { onBeforeUnmount } from 'vue'; +import { nextTick, onBeforeUnmount } from 'vue'; import bus from '@/bus'; const { proxy } = getCurrentInstance(); @@ -617,7 +617,6 @@ const res = await getProjectItemDescriptionConfigList({ projectTypeId: form.projectTypeId }); if (res?.code !== 200) return; projectItemDescriptionConfigList.value = res?.data || []; - console.log(projectItemDescriptionConfigList); projectContentList.value = props.projectContentType.slice(0, 3).map((item, i) => { const list = projectItemDescriptionConfigList.value.filter(it => it.projectContentType === item.value); const obj = {}; @@ -710,7 +709,6 @@ }; //绘制工具切换事件 const changeTool = toolId => { - console.log('toolId---', toolId); newfiberMapbox.map.off('click', drawPointEvent); if (toolId == '1') { //画点 @@ -721,6 +719,10 @@ if (!!newfiberMapbox.measure) { newfiberMapbox.measure.clearMeasureAll(); } + if (newfiberMapbox.map.getLayer('projectrange')) { + newfiberMapbox.map.removeLayer('projectrange'); + newfiberMapbox.map.removeSource('projectrange'); + } window.drawPointFun = newfiberMapbox.map.on('click', drawPointEvent); } else if (toolId == '2') { //画线 @@ -730,12 +732,15 @@ newfiberMapbox.map.removeLayer('drawPoint'); newfiberMapbox.map.removeSource('drawPoint'); } + if (newfiberMapbox.map.getLayer('projectrange')) { + newfiberMapbox.map.removeLayer('projectrange'); + newfiberMapbox.map.removeSource('projectrange'); + } let layerId = String(new Date().getTime()); if (!newfiberMapbox.measure) newfiberMapbox.measure = new mapboxgl1.MeatureTool(newfiberMapbox.map); newfiberMapbox.measure.measureDistance('drawLine' + layerId, true, geojson => { multiPolyLineList.value.push(geojson.geometry.coordinates); projectGeometry.value = Terraformer.WKT.convert(turf.multiLineString(multiPolyLineList.value).geometry); - console.log('projectGeometry.value---', projectGeometry.value); }); newfiberMapbox.measure.setDistance(); } else if (toolId == '3') { @@ -746,12 +751,15 @@ newfiberMapbox.map.removeLayer('drawPoint'); newfiberMapbox.map.removeSource('drawPoint'); } + if (newfiberMapbox.map.getLayer('projectrange')) { + newfiberMapbox.map.removeLayer('projectrange'); + newfiberMapbox.map.removeSource('projectrange'); + } let layerId = String(new Date().getTime()); if (!newfiberMapbox.measure) newfiberMapbox.measure = new mapboxgl1.MeatureTool(newfiberMapbox.map); newfiberMapbox.measure.measureArea(layerId, true, geojson => { multiPolyPolygonList.value.push(geojson.geometry.coordinates); projectGeometry.value = Terraformer.WKT.convert(turf.multiPolygon(multiPolyPolygonList.value).geometry); - console.log('projectGeometry.value---', projectGeometry.value); }); newfiberMapbox.measure.setArea(); } else { @@ -764,6 +772,10 @@ newfiberMapbox.map.removeLayer('drawPoint'); newfiberMapbox.map.removeSource('drawPoint'); } + if (newfiberMapbox.map.getLayer('projectrange')) { + newfiberMapbox.map.removeLayer('projectrange'); + newfiberMapbox.map.removeSource('projectrange'); + } if (!newfiberMapbox.measure) return; newfiberMapbox.measure.clearMeasureAll(); } @@ -774,7 +786,6 @@ drawPointList.value.push(pointFeature); multiPointList.value.push(pointFeature.geometry.coordinates); projectGeometry.value = Terraformer.WKT.convert(turf.multiPoint(multiPointList.value).geometry); - console.log('projectGeometry.value---', projectGeometry.value); let drawPointGeojson = turf.featureCollection(drawPointList.value); if (!newfiberMapbox.map.getLayer('drawPoint')) { newfiberMapbox.map.addSource('drawPoint', { type: 'geojson', data: drawPointGeojson }); @@ -796,6 +807,52 @@ form.projectLocation = getPointPosition.value; form.projectLocationName = getPointAddress.value; }; +//打开项目边界绘制工具 +const openProjectDrawingTool = () => { + mapBoxDrawingTool.value = true; + nextTick(() => { + if (form.projectrange) { + let type, paint; + let projectionGeojson = turf.featureCollection([{ type: 'Feature', geometry: Terraformer.WKT.parse(form.projectrange) }]); + if (form.projectrange.includes('POINT')) { + type = 'circle'; + paint = { + 'circle-radius': 8, + 'circle-color': 'rgba(15, 203, 116,1)', + 'circle-blur': 3, + }; + } else if (form.projectrange.includes('POLYGON')) { + type = 'fill'; + paint = { + 'fill-color': 'rgba(15, 203, 116,0.5)', + 'fill-outline-color': 'rgba(15, 203, 116,1)', + }; + } else { + type = 'line'; + paint = { + 'line-color': 'rgba(15, 203, 116,1)', + 'line-blur': 3, + 'line-width': 5, + }; + } + setTimeout(() => { + newfiberMapbox.map.addSource('projectrange', { type: 'geojson', data: projectionGeojson }); + newfiberMapbox.map.addLayer({ + id: 'projectrange', + type: type, + source: 'projectrange', + paint: paint, + }); + newfiberMapbox.setCenter(form.projectLocation.split(',').map(Number)); + }, 500); + } + }); +}; +//绘制边界确认事件 +const drawProjectGeometry = () => { + mapBoxDrawingTool.value = false; + form.projectrange = projectGeometry.value; +}; onMounted(() => { getProjectCompanyLists(); form.analysisUsers1 = props.curRow.analysisUsers1; @@ -812,6 +869,11 @@ getPointPosition.value = e[0]; getPointAddress.value = e[1]; }); + bus.on('getProjectRowData', data => { + form.projectLocation = data.projectLocation; + form.projectAbbreviation = data.projectAbbreviation; + form.projectrange = data.projectrange; + }); }); onBeforeUnmount(() => { diff --git a/src/views/gisMapPage/gisMapBox1.vue b/src/views/gisMapPage/gisMapBox1.vue index 1d0da9b..9210bb6 100644 --- a/src/views/gisMapPage/gisMapBox1.vue +++ b/src/views/gisMapPage/gisMapBox1.vue @@ -92,12 +92,12 @@ // getLayerIdByClick(); (config.orders || []).forEach(item => setLayerOrder(...item)); newfiberMapbox.getLayers().filter(i => highlightLayers[i.newfiberId] && (highlightLayers[i.newfiberId] = i)); - let timeout = setTimeout(() => { - let { pitch, center } = config.params.init; - pitch && newfiberMapbox.map.setPitch(pitch); - center && newfiberMapbox.map.setCenter(center); - clearTimeout(timeout); - }, 1000); + // let timeout = setTimeout(() => { + let { pitch, center } = config.params.init; + pitch && newfiberMapbox.map.setPitch(pitch); + center && newfiberMapbox.map.setCenter(center); + //clearTimeout(timeout); + //}, 1000); newfiberMapbox.map.load = true; }); }, 200); diff --git a/src/views/project/projectInformation/index.vue b/src/views/project/projectInformation/index.vue index 493d73c..793398e 100644 --- a/src/views/project/projectInformation/index.vue +++ b/src/views/project/projectInformation/index.vue @@ -210,7 +210,7 @@ projectInfoNewDetail, updateProjectBuildStatus, } from '@/api/project/projectInformationNew'; - +import bus from '@/bus'; const { proxy } = getCurrentInstance(); const { build_category, project_library_type, project_content_type, build_status, findText } = useDicts(proxy); const { project_data_sources } = proxy.useDict('project_data_sources'); @@ -288,6 +288,7 @@ opts.text = optTextMap.get(type); curRow.value = data; curRow.value.analysisUsers1 = data.drainagePartition ? data.drainagePartition.split(',') : []; + bus.emit('getProjectRowData', data); }; const close = type => { diff --git a/src/views/project/projectInformation/operate.vue b/src/views/project/projectInformation/operate.vue index 2beb7a9..5c6a5d9 100644 --- a/src/views/project/projectInformation/operate.vue +++ b/src/views/project/projectInformation/operate.vue @@ -108,7 +108,7 @@ @@ -327,7 +327,7 @@ - +
@@ -381,7 +381,7 @@ import ImageFileUpload from '@/components/ImageFileUpload'; import { getImageUrl } from '@/utils/ruoyi'; import mapBoxSelectPositionVue from '../../../components/mapBoxSelectPosition/mapBoxSelectPosition.vue'; -import { onBeforeUnmount } from 'vue'; +import { nextTick, onBeforeUnmount } from 'vue'; import bus from '@/bus'; const { proxy } = getCurrentInstance(); @@ -617,7 +617,6 @@ const res = await getProjectItemDescriptionConfigList({ projectTypeId: form.projectTypeId }); if (res?.code !== 200) return; projectItemDescriptionConfigList.value = res?.data || []; - console.log(projectItemDescriptionConfigList); projectContentList.value = props.projectContentType.slice(0, 3).map((item, i) => { const list = projectItemDescriptionConfigList.value.filter(it => it.projectContentType === item.value); const obj = {}; @@ -710,7 +709,6 @@ }; //绘制工具切换事件 const changeTool = toolId => { - console.log('toolId---', toolId); newfiberMapbox.map.off('click', drawPointEvent); if (toolId == '1') { //画点 @@ -721,6 +719,10 @@ if (!!newfiberMapbox.measure) { newfiberMapbox.measure.clearMeasureAll(); } + if (newfiberMapbox.map.getLayer('projectrange')) { + newfiberMapbox.map.removeLayer('projectrange'); + newfiberMapbox.map.removeSource('projectrange'); + } window.drawPointFun = newfiberMapbox.map.on('click', drawPointEvent); } else if (toolId == '2') { //画线 @@ -730,12 +732,15 @@ newfiberMapbox.map.removeLayer('drawPoint'); newfiberMapbox.map.removeSource('drawPoint'); } + if (newfiberMapbox.map.getLayer('projectrange')) { + newfiberMapbox.map.removeLayer('projectrange'); + newfiberMapbox.map.removeSource('projectrange'); + } let layerId = String(new Date().getTime()); if (!newfiberMapbox.measure) newfiberMapbox.measure = new mapboxgl1.MeatureTool(newfiberMapbox.map); newfiberMapbox.measure.measureDistance('drawLine' + layerId, true, geojson => { multiPolyLineList.value.push(geojson.geometry.coordinates); projectGeometry.value = Terraformer.WKT.convert(turf.multiLineString(multiPolyLineList.value).geometry); - console.log('projectGeometry.value---', projectGeometry.value); }); newfiberMapbox.measure.setDistance(); } else if (toolId == '3') { @@ -746,12 +751,15 @@ newfiberMapbox.map.removeLayer('drawPoint'); newfiberMapbox.map.removeSource('drawPoint'); } + if (newfiberMapbox.map.getLayer('projectrange')) { + newfiberMapbox.map.removeLayer('projectrange'); + newfiberMapbox.map.removeSource('projectrange'); + } let layerId = String(new Date().getTime()); if (!newfiberMapbox.measure) newfiberMapbox.measure = new mapboxgl1.MeatureTool(newfiberMapbox.map); newfiberMapbox.measure.measureArea(layerId, true, geojson => { multiPolyPolygonList.value.push(geojson.geometry.coordinates); projectGeometry.value = Terraformer.WKT.convert(turf.multiPolygon(multiPolyPolygonList.value).geometry); - console.log('projectGeometry.value---', projectGeometry.value); }); newfiberMapbox.measure.setArea(); } else { @@ -764,6 +772,10 @@ newfiberMapbox.map.removeLayer('drawPoint'); newfiberMapbox.map.removeSource('drawPoint'); } + if (newfiberMapbox.map.getLayer('projectrange')) { + newfiberMapbox.map.removeLayer('projectrange'); + newfiberMapbox.map.removeSource('projectrange'); + } if (!newfiberMapbox.measure) return; newfiberMapbox.measure.clearMeasureAll(); } @@ -774,7 +786,6 @@ drawPointList.value.push(pointFeature); multiPointList.value.push(pointFeature.geometry.coordinates); projectGeometry.value = Terraformer.WKT.convert(turf.multiPoint(multiPointList.value).geometry); - console.log('projectGeometry.value---', projectGeometry.value); let drawPointGeojson = turf.featureCollection(drawPointList.value); if (!newfiberMapbox.map.getLayer('drawPoint')) { newfiberMapbox.map.addSource('drawPoint', { type: 'geojson', data: drawPointGeojson }); @@ -796,6 +807,52 @@ form.projectLocation = getPointPosition.value; form.projectLocationName = getPointAddress.value; }; +//打开项目边界绘制工具 +const openProjectDrawingTool = () => { + mapBoxDrawingTool.value = true; + nextTick(() => { + if (form.projectrange) { + let type, paint; + let projectionGeojson = turf.featureCollection([{ type: 'Feature', geometry: Terraformer.WKT.parse(form.projectrange) }]); + if (form.projectrange.includes('POINT')) { + type = 'circle'; + paint = { + 'circle-radius': 8, + 'circle-color': 'rgba(15, 203, 116,1)', + 'circle-blur': 3, + }; + } else if (form.projectrange.includes('POLYGON')) { + type = 'fill'; + paint = { + 'fill-color': 'rgba(15, 203, 116,0.5)', + 'fill-outline-color': 'rgba(15, 203, 116,1)', + }; + } else { + type = 'line'; + paint = { + 'line-color': 'rgba(15, 203, 116,1)', + 'line-blur': 3, + 'line-width': 5, + }; + } + setTimeout(() => { + newfiberMapbox.map.addSource('projectrange', { type: 'geojson', data: projectionGeojson }); + newfiberMapbox.map.addLayer({ + id: 'projectrange', + type: type, + source: 'projectrange', + paint: paint, + }); + newfiberMapbox.setCenter(form.projectLocation.split(',').map(Number)); + }, 500); + } + }); +}; +//绘制边界确认事件 +const drawProjectGeometry = () => { + mapBoxDrawingTool.value = false; + form.projectrange = projectGeometry.value; +}; onMounted(() => { getProjectCompanyLists(); form.analysisUsers1 = props.curRow.analysisUsers1; @@ -812,6 +869,11 @@ getPointPosition.value = e[0]; getPointAddress.value = e[1]; }); + bus.on('getProjectRowData', data => { + form.projectLocation = data.projectLocation; + form.projectAbbreviation = data.projectAbbreviation; + form.projectrange = data.projectrange; + }); }); onBeforeUnmount(() => { diff --git a/src/views/sponeScreen/gisMF/cesiumMap.vue b/src/views/sponeScreen/gisMF/cesiumMap.vue index 7ffbfc3..19bb9a7 100644 --- a/src/views/sponeScreen/gisMF/cesiumMap.vue +++ b/src/views/sponeScreen/gisMF/cesiumMap.vue @@ -88,6 +88,7 @@ onBeforeUnmount(() => { clearInterval(window.currentWeatherTimer); window.currentWeatherTimer = null; + if (!newfiberMap) return; newfiberMap.weatherRemove(); }); diff --git a/src/views/gisMapPage/gisMapBox1.vue b/src/views/gisMapPage/gisMapBox1.vue index 1d0da9b..9210bb6 100644 --- a/src/views/gisMapPage/gisMapBox1.vue +++ b/src/views/gisMapPage/gisMapBox1.vue @@ -92,12 +92,12 @@ // getLayerIdByClick(); (config.orders || []).forEach(item => setLayerOrder(...item)); newfiberMapbox.getLayers().filter(i => highlightLayers[i.newfiberId] && (highlightLayers[i.newfiberId] = i)); - let timeout = setTimeout(() => { - let { pitch, center } = config.params.init; - pitch && newfiberMapbox.map.setPitch(pitch); - center && newfiberMapbox.map.setCenter(center); - clearTimeout(timeout); - }, 1000); + // let timeout = setTimeout(() => { + let { pitch, center } = config.params.init; + pitch && newfiberMapbox.map.setPitch(pitch); + center && newfiberMapbox.map.setCenter(center); + //clearTimeout(timeout); + //}, 1000); newfiberMapbox.map.load = true; }); }, 200); diff --git a/src/views/project/projectInformation/index.vue b/src/views/project/projectInformation/index.vue index 493d73c..793398e 100644 --- a/src/views/project/projectInformation/index.vue +++ b/src/views/project/projectInformation/index.vue @@ -210,7 +210,7 @@ projectInfoNewDetail, updateProjectBuildStatus, } from '@/api/project/projectInformationNew'; - +import bus from '@/bus'; const { proxy } = getCurrentInstance(); const { build_category, project_library_type, project_content_type, build_status, findText } = useDicts(proxy); const { project_data_sources } = proxy.useDict('project_data_sources'); @@ -288,6 +288,7 @@ opts.text = optTextMap.get(type); curRow.value = data; curRow.value.analysisUsers1 = data.drainagePartition ? data.drainagePartition.split(',') : []; + bus.emit('getProjectRowData', data); }; const close = type => { diff --git a/src/views/project/projectInformation/operate.vue b/src/views/project/projectInformation/operate.vue index 2beb7a9..5c6a5d9 100644 --- a/src/views/project/projectInformation/operate.vue +++ b/src/views/project/projectInformation/operate.vue @@ -108,7 +108,7 @@ @@ -327,7 +327,7 @@ - +
@@ -381,7 +381,7 @@ import ImageFileUpload from '@/components/ImageFileUpload'; import { getImageUrl } from '@/utils/ruoyi'; import mapBoxSelectPositionVue from '../../../components/mapBoxSelectPosition/mapBoxSelectPosition.vue'; -import { onBeforeUnmount } from 'vue'; +import { nextTick, onBeforeUnmount } from 'vue'; import bus from '@/bus'; const { proxy } = getCurrentInstance(); @@ -617,7 +617,6 @@ const res = await getProjectItemDescriptionConfigList({ projectTypeId: form.projectTypeId }); if (res?.code !== 200) return; projectItemDescriptionConfigList.value = res?.data || []; - console.log(projectItemDescriptionConfigList); projectContentList.value = props.projectContentType.slice(0, 3).map((item, i) => { const list = projectItemDescriptionConfigList.value.filter(it => it.projectContentType === item.value); const obj = {}; @@ -710,7 +709,6 @@ }; //绘制工具切换事件 const changeTool = toolId => { - console.log('toolId---', toolId); newfiberMapbox.map.off('click', drawPointEvent); if (toolId == '1') { //画点 @@ -721,6 +719,10 @@ if (!!newfiberMapbox.measure) { newfiberMapbox.measure.clearMeasureAll(); } + if (newfiberMapbox.map.getLayer('projectrange')) { + newfiberMapbox.map.removeLayer('projectrange'); + newfiberMapbox.map.removeSource('projectrange'); + } window.drawPointFun = newfiberMapbox.map.on('click', drawPointEvent); } else if (toolId == '2') { //画线 @@ -730,12 +732,15 @@ newfiberMapbox.map.removeLayer('drawPoint'); newfiberMapbox.map.removeSource('drawPoint'); } + if (newfiberMapbox.map.getLayer('projectrange')) { + newfiberMapbox.map.removeLayer('projectrange'); + newfiberMapbox.map.removeSource('projectrange'); + } let layerId = String(new Date().getTime()); if (!newfiberMapbox.measure) newfiberMapbox.measure = new mapboxgl1.MeatureTool(newfiberMapbox.map); newfiberMapbox.measure.measureDistance('drawLine' + layerId, true, geojson => { multiPolyLineList.value.push(geojson.geometry.coordinates); projectGeometry.value = Terraformer.WKT.convert(turf.multiLineString(multiPolyLineList.value).geometry); - console.log('projectGeometry.value---', projectGeometry.value); }); newfiberMapbox.measure.setDistance(); } else if (toolId == '3') { @@ -746,12 +751,15 @@ newfiberMapbox.map.removeLayer('drawPoint'); newfiberMapbox.map.removeSource('drawPoint'); } + if (newfiberMapbox.map.getLayer('projectrange')) { + newfiberMapbox.map.removeLayer('projectrange'); + newfiberMapbox.map.removeSource('projectrange'); + } let layerId = String(new Date().getTime()); if (!newfiberMapbox.measure) newfiberMapbox.measure = new mapboxgl1.MeatureTool(newfiberMapbox.map); newfiberMapbox.measure.measureArea(layerId, true, geojson => { multiPolyPolygonList.value.push(geojson.geometry.coordinates); projectGeometry.value = Terraformer.WKT.convert(turf.multiPolygon(multiPolyPolygonList.value).geometry); - console.log('projectGeometry.value---', projectGeometry.value); }); newfiberMapbox.measure.setArea(); } else { @@ -764,6 +772,10 @@ newfiberMapbox.map.removeLayer('drawPoint'); newfiberMapbox.map.removeSource('drawPoint'); } + if (newfiberMapbox.map.getLayer('projectrange')) { + newfiberMapbox.map.removeLayer('projectrange'); + newfiberMapbox.map.removeSource('projectrange'); + } if (!newfiberMapbox.measure) return; newfiberMapbox.measure.clearMeasureAll(); } @@ -774,7 +786,6 @@ drawPointList.value.push(pointFeature); multiPointList.value.push(pointFeature.geometry.coordinates); projectGeometry.value = Terraformer.WKT.convert(turf.multiPoint(multiPointList.value).geometry); - console.log('projectGeometry.value---', projectGeometry.value); let drawPointGeojson = turf.featureCollection(drawPointList.value); if (!newfiberMapbox.map.getLayer('drawPoint')) { newfiberMapbox.map.addSource('drawPoint', { type: 'geojson', data: drawPointGeojson }); @@ -796,6 +807,52 @@ form.projectLocation = getPointPosition.value; form.projectLocationName = getPointAddress.value; }; +//打开项目边界绘制工具 +const openProjectDrawingTool = () => { + mapBoxDrawingTool.value = true; + nextTick(() => { + if (form.projectrange) { + let type, paint; + let projectionGeojson = turf.featureCollection([{ type: 'Feature', geometry: Terraformer.WKT.parse(form.projectrange) }]); + if (form.projectrange.includes('POINT')) { + type = 'circle'; + paint = { + 'circle-radius': 8, + 'circle-color': 'rgba(15, 203, 116,1)', + 'circle-blur': 3, + }; + } else if (form.projectrange.includes('POLYGON')) { + type = 'fill'; + paint = { + 'fill-color': 'rgba(15, 203, 116,0.5)', + 'fill-outline-color': 'rgba(15, 203, 116,1)', + }; + } else { + type = 'line'; + paint = { + 'line-color': 'rgba(15, 203, 116,1)', + 'line-blur': 3, + 'line-width': 5, + }; + } + setTimeout(() => { + newfiberMapbox.map.addSource('projectrange', { type: 'geojson', data: projectionGeojson }); + newfiberMapbox.map.addLayer({ + id: 'projectrange', + type: type, + source: 'projectrange', + paint: paint, + }); + newfiberMapbox.setCenter(form.projectLocation.split(',').map(Number)); + }, 500); + } + }); +}; +//绘制边界确认事件 +const drawProjectGeometry = () => { + mapBoxDrawingTool.value = false; + form.projectrange = projectGeometry.value; +}; onMounted(() => { getProjectCompanyLists(); form.analysisUsers1 = props.curRow.analysisUsers1; @@ -812,6 +869,11 @@ getPointPosition.value = e[0]; getPointAddress.value = e[1]; }); + bus.on('getProjectRowData', data => { + form.projectLocation = data.projectLocation; + form.projectAbbreviation = data.projectAbbreviation; + form.projectrange = data.projectrange; + }); }); onBeforeUnmount(() => { diff --git a/src/views/sponeScreen/gisMF/cesiumMap.vue b/src/views/sponeScreen/gisMF/cesiumMap.vue index 7ffbfc3..19bb9a7 100644 --- a/src/views/sponeScreen/gisMF/cesiumMap.vue +++ b/src/views/sponeScreen/gisMF/cesiumMap.vue @@ -88,6 +88,7 @@ onBeforeUnmount(() => { clearInterval(window.currentWeatherTimer); window.currentWeatherTimer = null; + if (!newfiberMap) return; newfiberMap.weatherRemove(); }); diff --git a/src/views/sponeScreen/gisMF/newfiberVectorLayer.js b/src/views/sponeScreen/gisMF/newfiberVectorLayer.js index 831253d..2a5f6a2 100644 --- a/src/views/sponeScreen/gisMF/newfiberVectorLayer.js +++ b/src/views/sponeScreen/gisMF/newfiberVectorLayer.js @@ -51,7 +51,7 @@ type: NewFiberMap.Enum.VectorType.POLYGON, options: { show: true, - material: !!feature.properties.fillcolor ? feature.properties.fillcolor : 'rgba(154,104,171,0.4)', + material: !!feature.properties.fillcolor ? feature.properties.fillcolor : 'rgba(154,104,171,0.8)', outline: false, // outlineColorBottom: !!feature.properties.outcolor ? feature.properties.outcolor : 'rgba(189,127,171,0.75)', // outlineWidthBottom: 2,