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;
}