diff --git a/src/components/Map/index.vue b/src/components/Map/index.vue index d181c73..0f6de87 100644 --- a/src/components/Map/index.vue +++ b/src/components/Map/index.vue @@ -295,8 +295,8 @@ [ // NewFiberMap.Enum.BaseMap.TDT_VECTOR_LABEL, // NewFiberMap.Enum.BaseMap.TDT_VECTOR, - //NewFiberMap.Enum.BaseMap.AMAP_VECTOR_V2, - NewFiberMap.Enum.BaseMap.ARCGIS_VECTOR_BLUE, + NewFiberMap.Enum.BaseMap.AMAP_VECTOR_V2, + //NewFiberMap.Enum.BaseMap.ARCGIS_VECTOR_BLUE, ], {}, {} diff --git a/src/components/Map/index.vue b/src/components/Map/index.vue index d181c73..0f6de87 100644 --- a/src/components/Map/index.vue +++ b/src/components/Map/index.vue @@ -295,8 +295,8 @@ [ // NewFiberMap.Enum.BaseMap.TDT_VECTOR_LABEL, // NewFiberMap.Enum.BaseMap.TDT_VECTOR, - //NewFiberMap.Enum.BaseMap.AMAP_VECTOR_V2, - NewFiberMap.Enum.BaseMap.ARCGIS_VECTOR_BLUE, + NewFiberMap.Enum.BaseMap.AMAP_VECTOR_V2, + //NewFiberMap.Enum.BaseMap.ARCGIS_VECTOR_BLUE, ], {}, {} diff --git a/src/views/project/projectInformation/operate.vue b/src/views/project/projectInformation/operate.vue index 172191c..fcb526c 100644 --- a/src/views/project/projectInformation/operate.vue +++ b/src/views/project/projectInformation/operate.vue @@ -110,7 +110,7 @@ @@ -331,6 +331,29 @@ + + +
+ + + +
+
+ +
+ +
@@ -349,6 +372,7 @@ import projectionMap from './projectionAreaMap.vue'; import { useDicts } from '@/hooks'; import MapBox from '@/components/Map'; +import gisMapBox1 from '@/views/gisMapPage/gisMapBox1.vue'; import { inheritAttr } from '@/utils/v3'; import { getProjectCompanyList, @@ -359,6 +383,7 @@ projectInfoNewEdit, } from '@/api/project/projectInformationNew'; import ImageFileUpload from '@/components/ImageFileUpload'; +import { getImageUrl } from '@/utils/ruoyi'; const { proxy } = getCurrentInstance(); const emit = defineEmits(['close']); @@ -470,11 +495,23 @@ const projectContentList = ref([]); const projectInvestList = ref([]); const visible = ref(false); +const mapBoxDrawingTool = ref(false); const visibleArea = ref(false); const constractionFlieList = ref([]); const postConstractionFlieList = ref([]); const previousPoint = ref(''); const previousPointName = ref(''); +const toolList = ref([ + { name: '画点', url: 'position.png', id: '1' }, + { name: '画线', url: 'line.png', id: '2' }, + { name: '画面', url: 'area.png', id: '3' }, + { name: '清除测量', url: 'clear.png', id: '4' }, +]); +const drawPointList = ref([]); +const multiPointList = ref([]); +const multiPolyLineList = ref([]); +const multiPolyPolygonList = ref([]); +const projectGeometry = ref(''); // 获取位置 function getAddress(val) { form.projectLocation = val.lonLat.join(','); //经纬度 @@ -667,7 +704,89 @@ if (res?.code !== 200) return; callback && callback(res.data); }; - +//绘制工具切换事件 +const changeTool = toolId => { + console.log('toolId---', toolId); + newfiberMapbox.map.off('click', drawPointEvent); + if (toolId == '1') { + //画点 + multiPointList.value = []; + multiPolyLineList.value = []; + multiPolyPolygonList.value = []; + drawPointList.value = []; + if (!!newfiberMapbox.measure) { + newfiberMapbox.measure.clearMeasureAll(); + } + window.drawPointFun = newfiberMapbox.map.on('click', drawPointEvent); + } else if (toolId == '2') { + //画线 + multiPointList.value = []; + multiPolyPolygonList.value = []; + if (newfiberMapbox.map.getLayer('drawPoint')) { + newfiberMapbox.map.removeLayer('drawPoint'); + newfiberMapbox.map.removeSource('drawPoint'); + } + 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') { + //画面 + multiPointList.value = []; + multiPolyLineList.value = []; + if (newfiberMapbox.map.getLayer('drawPoint')) { + newfiberMapbox.map.removeLayer('drawPoint'); + newfiberMapbox.map.removeSource('drawPoint'); + } + 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 { + //清除 + multiPointList.value = []; + multiPolyLineList.value = []; + multiPolyPolygonList.value = []; + projectGeometry.value = ''; + if (newfiberMapbox.map.getLayer('drawPoint')) { + newfiberMapbox.map.removeLayer('drawPoint'); + newfiberMapbox.map.removeSource('drawPoint'); + } + if (!newfiberMapbox.measure) return; + newfiberMapbox.measure.clearMeasureAll(); + } +}; +//绘点方法监听 +const drawPointEvent = e => { + let pointFeature = turf.point([e.lngLat.lng, e.lngLat.lat]); + 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 }); + newfiberMapbox.map.addLayer({ + id: 'drawPoint', + type: 'circle', + source: 'drawPoint', + paint: { + 'circle-color': 'rgba(127, 186, 0,1)', + 'circle-radius': 5, + }, + }); + } else { + newfiberMapbox.map.getSource('drawPoint').setData(drawPointGeojson); + } +}; onMounted(() => { getProjectCompanyLists(); form.analysisUsers1 = props.curRow.analysisUsers1; @@ -755,7 +874,22 @@ } } } - +.imgTool { + position: absolute; + top: 80px; + right: 30px; + align-items: center; + z-index: 111; + img { + cursor: pointer; + margin-left: 10px; + width: 28px; + height: 28px; + } + .active { + border: 1px solid red; + } +} .mapBox { height: 600px; }