diff --git a/package.json b/package.json index cf7d7ef8..6f7d77c6 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/components/MapboxMaps/MapComponent.vue b/src/components/MapboxMaps/MapComponent.vue index b12eedc3..f3a3e16f 100644 --- a/src/components/MapboxMaps/MapComponent.vue +++ b/src/components/MapboxMaps/MapComponent.vue @@ -29,7 +29,7 @@
-
+
@@ -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 = 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", diff --git a/src/components/MapboxMaps/MapboxMap.vue b/src/components/MapboxMaps/MapboxMap.vue index 296a491c..36e47a48 100644 --- a/src/components/MapboxMaps/MapboxMap.vue +++ b/src/components/MapboxMaps/MapboxMap.vue @@ -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'; diff --git a/src/components/MapboxMaps/index.vue b/src/components/MapboxMaps/index.vue index 8b4832fc..bb8ebadd 100644 --- a/src/components/MapboxMaps/index.vue +++ b/src/components/MapboxMaps/index.vue @@ -17,7 +17,7 @@