HC_YFZX
/
CaiYuanYiTiHua
11
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

merge

dianlixunjian
徐景良 2024-07-03 15:35:14 +08:00
parent 69b73335df
commit b32160356c
7 changed files with 170 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
package.json
View File

@ -102,9 +102,8 @@
"localforage": "^1.10.0",
"lodash": "^4.17.21",
"lodash-es": "^4.17.21",
"mapbox-gl": "^3.3.0",
"mapbox-gl-utils": "^0.44.0",
"@mapbox/mapbox-gl-draw": "^1.4.1",
"mapbox-gl": "^2.9.2",
"@mapbox/mapbox-gl-draw": "^1.4.3",
"mapbox-gl-draw-snap-mode": "^0.2.0",
"mapbox-extensions":"^1.3.38",
"terraformer-wkt-parser": "^1.2.1",

183
src/components/MapboxMaps/MapComponent.vue
View File

@ -29,7 +29,7 @@
<!-- 根据输入坐标定位 -->
<div class="position-by-lnglat">
<div class="to-location">
<div class="to-location" @click="handlerSelectView">
</div>
<div class="draw-polygon" @click="LocationShow = true">
@ -70,6 +70,7 @@
reactive,
ref,
defineExpose,
watch
} from 'vue';
import { useMessage } from '@/hooks/web/useMessage';
@ -82,10 +83,10 @@
import { generateUUID,getGeometryCenter } from './src/tool'
// 测量工具
import { SwitchLayerControl,MeasureControl,SwitchMapControl } from 'mapbox-extensions'
import { SwitchLayerControl,MeasureControl } from 'mapbox-extensions'
import 'mapbox-extensions/dist/index.css'
import U from 'mapbox-gl-utils';
// import U from 'mapbox-gl-utils';
import 'mapbox-gl/dist/mapbox-gl.css';
import './src/index.less';
@ -148,6 +149,7 @@
},
});
let nextMapControl: Array<any> = reactive([]);
nextMapControl = props.control
? props.control.map((item) => {
@ -173,13 +175,22 @@
features: [],
},
});
let switchLayerControler;
const { createConfirm, createMessage } = useMessage();
// 定义地图回调emit
// 地图加载完成回调
const emit = defineEmits(['mapOnLoad', 'mapDraw', 'handlerDrawComplete','handlerGetFormDetail']);
watch(
()=>props.mapConfig,
(newVal,oldVal)=>{
handlerLoadMapLayer();
}
)
onMounted(() => {
mapboxgl.accessToken = MapboxConfig.ACCESS_TOKEN;
map = initMap();
@ -240,27 +251,85 @@
}
}),"top-right")
let applicationLayers = []
// 加载图层
handlerLoadMapLayer();
// 应用图层绑定点击事件
// applicationLayers.forEach((item,index)=>{
// map.on("click",item.layer.id,(e)=>{
// let state = findLayerAttributeInfo(applicationLayers,e.features[0].layer.id);
// if(state){
// let formDetailParams = {
// attributeTable:state.attributeTable,
// attributeField:state.attributeField,
// value:e.features[0].properties.gid
// }
// // 调用父组件查询表单详情信息
// emit("handlerGetFormDetail",formDetailParams)
// createMessage.success("数据表："+state.attributeTable+"；查询字段："+state.attributeField+"字段值："+e.features[0].properties.gid)
// }else{
// createMessage.warning("当前点击图层未绑定信息");
// }
// })
// })
});
});
// 地图图层控制
const handlerLoadMapLayer = ()=>{
if(switchLayerControler){
var allLayers = map.getStyle().layers;
allLayers.forEach(function(layer){
console.log("layerEEEEEE",layer);
console.log(layer.id);
// map.removeLayer(layer.id);
});
// var allSources = Object.keys(map.style.sourceCaches);
// allSources.forEach(function(sourceId){
// map.removeSource(sourceId);
// });
// map.removeControl(switchLayerControler);
}
let configlayers = {};
let baseLayers = [];
props.mapConfig.layers?.forEach((item,index)=>{
let style = JSON.parse(item.style)
let layers = {
name:item.name,
layer:style,
fixed:true,
zoom:-100,
easeToOptions:{},
mutex:true,
mutexIdentity:"t1",
active:false,
backgroundImage:"",
backgroundImageActive:"",
onVisibleChange:(visible:boolean)=>{}
}
applicationLayers.push(layers)
let applicationLayers = [];
item?.layers?.forEach((it,idx)=>{
let style = JSON.parse(it.style)
let layers = {
name:it.name,
layer:style,
fixed:true,
zoom:18,
easeToOptions:{},
mutex:false,
mutexIdentity:generateUUID(),
active:false,
backgroundImage:"",
backgroundImageActive:"",
selectAndClearAll:true,
selectAllLabel:"select all",
clearAllLabel:"clear all",
onVisibleChange:(visible:boolean)=>{}
}
applicationLayers.push(layers);
})
configlayers[item.name] = {
mutex:true,
collapse:true,
selectAndClearAll:true,
selectAllLabel:"select all",
clearAllLabel:"clear all",
uiType:"SwitchBtn",
layers:applicationLayers
};
})
props.mapConfig.baseLayers?.forEach((item,index)=>{
let layers = {
name:item.name,
@ -268,67 +337,36 @@
fixed:true,
zoom:-100,
easeToOptions:{},
mutex:true,
mutexIdentity:index,
active:false,
mutex:false,
mutexIdentity:generateUUID(),
active:false,
backgroundImage:"http://lbs.tianditu.gov.cn/images/cia_c.png",
backgroundImageActive:"",
onVisibleChange:(visible:boolean)=>{}
}
baseLayers.push(layers)
})
configlayers["地图底图"] = {
mutex:true,
collapse:true,
uiType:"ImgTxtBtn",
layers:baseLayers
};
// 图层管理工具
map.addControl(new SwitchLayerControl({
switchLayerControler = new SwitchLayerControl({
name:"图层管理" ,
position:"top-left",
selectAndClearAll:true,
selectAllLabel:"select all",
clearAllLabel:"clear all",
showToTop:true,
selectAllLabel:"select all",
clearAllLabel:"clear all",
showToTop:false,
topLayerId:"",
layerGroups:{
"应用图层":{
mutex:true,
collapse:true,
uiType:"SwitchBtn",
layers:applicationLayers
},
"地图底图":{
mutex:true,
collapse:true,
uiType:"ImgTxtBtn",
layers:baseLayers
},
}
}),"top-left");
// 应用图层绑定点击事件
applicationLayers.forEach((item,index)=>{
map.on("click",item.layer.id,(e)=>{
let state = findLayerAttributeInfo(applicationLayers,e.features[0].layer.id);
if(state){
let formDetailParams = {
attributeTable:state.attributeTable,
attributeField:state.attributeField,
value:e.features[0].properties.gid
}
// 调用父组件查询表单详情信息
emit("handlerGetFormDetail",formDetailParams)
createMessage.success("数据表："+state.attributeTable+"；查询字段："+state.attributeField+"字段值："+e.features[0].properties.gid)
}else{
createMessage.warning("当前点击图层未绑定信息");
}
})
})
});
});
layerGroups:configlayers
});
console.log("switchLayerControler",switchLayerControler)
map.addControl(switchLayerControler,"top-left");
}
// 销毁地图
const findLayerAttributeInfo = (layers,id)=>{
@ -792,7 +830,6 @@
}
}
)
map.addLayer(
{
"id": "detailsLayerLine",

2
src/components/MapboxMaps/MapboxMap.vue
View File

@ -52,7 +52,7 @@
// 图形绘制工具类
import MapboxDraw from '@mapbox/mapbox-gl-draw';
import U from 'mapbox-gl-utils';
// import U from 'mapbox-gl-utils';
import 'mapbox-gl/dist/mapbox-gl.css';
import './src/index.less';
import { MapboxConfig, MapboxDefaultStyle, MapControlConfig } from './src/config';

6
src/components/MapboxMaps/index.vue
View File

@ -17,7 +17,7 @@
<script lang="ts" setup>
import { onMounted, onUnmounted, defineProps, reactive,defineExpose } from 'vue';
import mapboxgl, { Map } from 'mapbox-gl';
import U from 'mapbox-gl-utils';
// import U from 'mapbox-gl-utils';
import 'mapbox-gl/dist/mapbox-gl.css';
import './src/index.less';
import { MapboxConfig, MapboxDefaultStyle, MapControlConfig } from './src/config';
@ -51,8 +51,8 @@
map = initMap();
map.on('load', () => {
//挂载mapbox-gl-utils
U.init(map);
mp = new MP(map);
// U.init(map);
// mp = new MP(map);
emit('mapOnLoad', map);
});
});

2
src/components/MapboxMaps/src/MP.ts
View File

@ -1,4 +1,4 @@
import U from 'mapbox-gl-utils';
// import U from 'mapbox-gl-utils';
import * as turf from '@turf/turf';
type EventType = 'Point' | 'LineString' | 'Polygon';

3
src/views/demo/bootstraps/auditinfo/MapList/index.vue
View File

@ -196,8 +196,7 @@
type.value = record.type;
}
async function locationFun(record) {
console.log(record);
emits('changeTask', record.geomid);
emits('changeTask', record);
}
onMounted(() => {
getTaskList();

80
src/views/demo/bootstraps/auditinfo/index.vue
View File

@ -39,6 +39,7 @@
import MapList from './MapList/index.vue';
import { getLoadTaskCount } from '@/api/bootstraps/index';
import { getGeom } from '@/api/sys/layerManagement';
import { getDetail } from '@/api/sys/WFSchemeInfo';
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage();
@ -115,37 +116,60 @@
}
yearOptions.value = list;
}
function changeTask(val) {
console.log(val);
let getGeomPrams = {
TableName: 'drone_shp_data ',
FieldName: 'gid',
FieldValue: val,
page: 1,
limit: 999,
key: null,
};
if (val) {
getGeom(getGeomPrams).then((res) => {
let geoms = [];
if (res) {
if (res.items?.length > 0) {
res.items.forEach((item, index) => {
let geom = {
key: item.gid,
mapgeom: item.geometry,
};
geoms.push(geom);
});
function changeTask(record) {
if(record?.geomid){
handlerGetMapConfigByFormId(record.processcode);
let val = record.geomid
let getGeomPrams = {
TableName: 'drone_shp_data ',
FieldName: 'gid',
FieldValue: val,
page: 1,
limit: 999,
key: null,
};
if (val) {
getGeom(getGeomPrams).then((res) => {
let geoms = [];
if (res) {
if (res.items?.length > 0) {
res.items.forEach((item, index) => {
let geom = {
key: item.gid,
mapgeom: item.geometry,
};
geoms.push(geom);
});
}
// MapboxComponent.value.handlerDraw(status,mapgemoList.value, false);
MapboxComponent.value.handlerDraw('Details', geoms, false);
} else {
createMessage.error('当前数据没有图斑！');
}
// MapboxComponent.value.handlerDraw(status,mapgemoList.value, false);
MapboxComponent.value.handlerDraw('Details', geoms, false);
} else {
createMessage.error('当前数据没有图斑！');
});
} else {
createMessage.error('当前数据没有图斑！');
}
}
}
// 根据发布表单的id获取地图配置
function handlerGetMapConfigByFormId(id){
if(id){
getDetail({ code: id }).then(res=>{
let data = res;
let scheme = JSON.parse(data.scheme.content);
let wfData = scheme.wfData;
let startFlow = wfData.find((item,index)=>{
return item.type == "bpmn:StartEvent";
})
if(startFlow?.mapConfig){
mapConfig.value = startFlow?.mapConfig
}
});
} else {
createMessage.error('当前数据没有图斑！');
}
}
</script>