diff --git a/src/views/gisMapPage/gisMapBox1.vue b/src/views/gisMapPage/gisMapBox1.vue index c128da3..39a9854 100644 --- a/src/views/gisMapPage/gisMapBox1.vue +++ b/src/views/gisMapPage/gisMapBox1.vue @@ -71,16 +71,16 @@ }, }); newfiberMapbox.addControl(mouseLocation); - !!!map.getSource('kaifengWater') && map.addSource('kaifengWater', { type: 'geojson', data: kaifengWater }); - !!!map.getLayer('kaifengWater') && - map.addLayer({ - id: 'kaifengWater', - type: 'fill', - source: 'kaifengWater', - paint: { - 'fill-color': 'rgba(117, 207, 240,1)', - }, - }); + // !!!map.getSource('kaifengWater') && map.addSource('kaifengWater', { type: 'geojson', data: kaifengWater }); + // !!!map.getLayer('kaifengWater') && + // map.addLayer({ + // id: 'kaifengWater', + // type: 'fill', + // source: 'kaifengWater', + // paint: { + // 'fill-color': 'rgba(117, 207, 240,1)', + // }, + // }); //addRiverFlow(); addWaterLabel(); //addAreaBoundary(); diff --git a/src/views/gisMapPage/gisMapBox1.vue b/src/views/gisMapPage/gisMapBox1.vue index c128da3..39a9854 100644 --- a/src/views/gisMapPage/gisMapBox1.vue +++ b/src/views/gisMapPage/gisMapBox1.vue @@ -71,16 +71,16 @@ }, }); newfiberMapbox.addControl(mouseLocation); - !!!map.getSource('kaifengWater') && map.addSource('kaifengWater', { type: 'geojson', data: kaifengWater }); - !!!map.getLayer('kaifengWater') && - map.addLayer({ - id: 'kaifengWater', - type: 'fill', - source: 'kaifengWater', - paint: { - 'fill-color': 'rgba(117, 207, 240,1)', - }, - }); + // !!!map.getSource('kaifengWater') && map.addSource('kaifengWater', { type: 'geojson', data: kaifengWater }); + // !!!map.getLayer('kaifengWater') && + // map.addLayer({ + // id: 'kaifengWater', + // type: 'fill', + // source: 'kaifengWater', + // paint: { + // 'fill-color': 'rgba(117, 207, 240,1)', + // }, + // }); //addRiverFlow(); addWaterLabel(); //addAreaBoundary(); diff --git a/src/views/spongePerformance/waterUtilizationRate/odorousWaterBodies/todoDon.vue b/src/views/spongePerformance/waterUtilizationRate/odorousWaterBodies/todoDon.vue index 7474de8..ccab67f 100644 --- a/src/views/spongePerformance/waterUtilizationRate/odorousWaterBodies/todoDon.vue +++ b/src/views/spongePerformance/waterUtilizationRate/odorousWaterBodies/todoDon.vue @@ -54,11 +54,6 @@ } }; -const gisList = async () => { - const res = await blackWaterInfoList(); - console.log(res.data.geometrys, '123'); -}; - // 表格点击,查看对应的项目情况 function clickTableRow(row) { row.blackOdorSampleInfos && @@ -121,22 +116,24 @@ }; //地图渲染黑臭水体 const addOdorousWaterBodies = async () => { - let params = { - riverType: 'black_odor', - }; - let res = await riverInfoWater(params); + const res = await blackWaterInfoList(); if (res && res.code == 200) { - console.log('response.data', res.data); - let black_odor = []; - let black_odor_label = []; - res.data.forEach(item => { - let waterLine = turf.feature(Terraformer.WKT.parse(item.geometry), item); - let waterLabel = turf.point([Number(item.lonLat.split(',')[0]), Number(item.lonLat.split(',')[1])], item); + let black_odor = [], + black_odor_label = []; + res.data.forEach(data => { + data.fillcolor = '#d9001b'; + let waterLine = turf.feature(Terraformer.WKT.parse(data.geometrys), data); + let waterLabel = turf.center(waterLine, { + properties: data, + }); black_odor.push(waterLine); black_odor_label.push(waterLabel); }); let waterLineGeojson = turf.featureCollection(black_odor); let waterLabelGeojson = turf.featureCollection(black_odor_label); + console.log('blackWaterGeojson---', waterLineGeojson); + console.log('waterLabelGeojson---', waterLabelGeojson); + !newfiberMapbox.map.getSource('waterLine') && newfiberMapbox.map.addSource('waterLine', { type: 'geojson', data: waterLineGeojson }); !newfiberMapbox.map.getSource('waterLabel') && newfiberMapbox.map.addSource('waterLabel', { type: 'geojson', data: waterLabelGeojson }); !newfiberMapbox.map.getLayer('waterLine') && @@ -145,7 +142,7 @@ type: 'line', source: 'waterLine', paint: { - 'line-color': '#757575', + 'line-color': ['get', 'fillcolor'], 'line-width': 5, }, }); @@ -155,29 +152,31 @@ type: 'symbol', source: 'waterLabel', layout: { - 'text-field': ['get', 'riverName'], + 'text-field': ['get', 'blackWaterName'], 'text-font': ['KlokanTech Noto Sans Regular'], 'text-size': 16, 'text-offset': [0, 2], }, paint: { - 'text-color': '#d1dbe5', + 'text-halo-color': 'rgba(238, 251, 255,1)', + 'text-color': ['get', 'fillcolor'], + 'icon-opacity': 1, + 'text-halo-width': 1, }, }); - newfiberMapbox.map.moveLayer('waterLine', 'odorousWaterBodies'); + //newfiberMapbox.map.moveLayer('waterLine', 'odorousWaterBodies'); } }; onMounted(() => { getDataList(); - gisList(); setTimeout(() => { addOdorousWaterBodies(); }, 2000); setTimeout(() => { - newfiberMapbox.map.moveLayer('xiaoganWater', 'waterLine'); + //newfiberMapbox.map.moveLayer('xiaoganWater', 'waterLine'); newfiberMapbox.map.on('click', e => { let clickfeature = newfiberMapbox.map .queryRenderedFeatures([