zhufuzebao
/
NONG_FA_DIAO_CHA_CAI_JI
0
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页数据图层代码优化

Browse Source
main
zhufu 6 months ago
parent 78da2afa4e
commit d8ea80097d
3 changed files with 128 additions and 334 deletions
Show Stats Download Patch File Download Diff File

396
src/views/sys/exception/Converge/index.vue
Unescape Escape View File

@ -38,6 +38,7 @@
import U from 'mapbox-gl-utils';
import { MP } from './src/MP.js';
import { GeojsonToWkt } from './src/WktGeojsonTransform.js';
import { layers } from '@/views/sys/exception/util'
const emits = defineEmits([
'onload',
@ -55,12 +56,6 @@
});
const layerSettings = ref<any>({});
const layerDefaultColor = ref<String>();
const tiandituLabelVisibility = ref('none')
const nongjiLayerVisibility = ref('none')
const houseLayerVisibility = ref('none')
const landLayerVisibility = ref('none')
const farmingLayerVisibility = ref('none')
const watersLayerVisibility = ref('none')
watch(
() => props.layer,
(val) => {
@ -68,35 +63,6 @@
layerDefaultColor.value = props.defaultColor;
},
);
watch(() => nongjiLayerVisibility.value, (newVal) => {
if (map.getLayer('nongjiSourceLayer')) {
map.setLayoutProperty('nongjiSourceLayer', 'visibility', newVal);
}
});
watch(() => houseLayerVisibility.value, (newVal) => {
if (map.getLayer('houseSourceFillLayer')) {
map.setLayoutProperty('houseSourceFillLayer', 'visibility', newVal);
map.setLayoutProperty('houseSourceLineLayer', 'visibility', newVal);
}
});
watch(() => landLayerVisibility.value, (newVal) => {
if (map.getLayer('landSourceFillLayer')) {
map.setLayoutProperty('landSourceFillLayer', 'visibility', newVal);
map.setLayoutProperty('landSourceLineLayer', 'visibility', newVal);
}
});
watch(() => farmingLayerVisibility.value, (newVal) => {
if (map.getLayer('farmingSourceFillLayer')) {
map.setLayoutProperty('farmingSourceFillLayer', 'visibility', newVal);
map.setLayoutProperty('farmingSourceLineLayer', 'visibility', newVal);
}
});
watch(() => watersLayerVisibility.value, (newVal) => {
if (map.getLayer('watersSourceFillLayer')) {
map.setLayoutProperty('watersSourceFillLayer', 'visibility', newVal);
map.setLayoutProperty('watersSourceLineLayer', 'visibility', newVal);
}
});
const initMap = () => {
return new mapboxgl.Map({
container: mapContainerName.value,
@ -159,37 +125,7 @@
//挂载mapbox-gl-utils
U.init(map);
mp = new MP(map);
// 添加地形数据
map.addSource('mapbox-dem', {
type: 'raster-dem',
tiles: [VITE_GLOB_API_URL_VAR.value + '/mapbox_terrain/{z}/{x}/{y}.png'],
tileSize: 256,
maxzoom: 13,
minzoom: 10,
});
map.addSource('tianditu-label', {
type: 'raster',
tiles: [
`https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=${TINADITU_TOKEN}`
],
tileSize: 256
});
map.addLayer({
id: 'tianditu-label-layer',
type: 'raster',
source: 'tianditu-label',
layout: {
visibility: tiandituLabelVisibility.value, // 可以绑定按钮控制显示隐藏
}
});
map.loadImage('/homepage/nong.png', (error, image) => {
if (error) throw error;
if (!map.hasImage('nongji-marker')) {
map.addImage('nongji-marker', image);
}
});
// map.setTerrain({ source: 'mapbox-dem', exaggeration: 1 });
// 设置2D地图
map.easeTo({ pitch: 0, bearing: 0, duration: 1000 });
@ -227,27 +163,9 @@
handlerLocation(item, 17.2);
}
function handlerFilter(item) {
// handlerLoadPolygon("",item);
// if (isRootLevel.value) {
// handlerLoadPolygon('', item, '', '1');
// } else {
// handlerLoadPolygon('', item, '', '');
// }
}
const polygonVisibility = ref<String>('visible');
const isRootLevel = ref<Boolean>(false);
async function handlerCheckUserOrgs() {
let orgs = await getUserOrgs({});
let isLevel = orgs.find((item, index) => {
return item.name == '临沂市' || item.parentId == 0 || item.parentName == '根节点';
});
if (isLevel) {
isRootLevel.value = true;
handlerLoadPolygon('', '', '', '1');
} else {
isRootLevel.value = false;
handlerLoadPolygon();
}
handlerLoadPolygon();
}
function getMaskData() {
axios({
@ -301,213 +219,90 @@
}
function handlerLoadPolygon(code = '', filter = '', type = '', level = '') {
let field_filter = '&field="SerialNumber","Type","Id",';
// 农机Source
map.addSource('nongjiSource', {
type: 'vector',
map.addSource('tianditu-label', {
type: 'raster',
tiles: [
VITE_GLOB_API_URL_VAR.value +
'/api/IdleLand/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=' +
'view_shp_idle_nongji' +
field_filter
`https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=${TINADITU_TOKEN}`
],
minzoom: 1,
maxzoom: 20,
tileSize: 256
});
// 房屋Source
map.addSource('houseSource', {
type: 'vector',
tiles: [
VITE_GLOB_API_URL_VAR.value +
'/api/IdleLand/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=' +
'view_shp_idle_house' +
field_filter
],
minzoom: 1,
maxzoom: 20,
cluster: true,
clusterMaxZoom: 0,
clusterRadius: 0,
});
// 土地资源Source
map.addSource('landSource', {
type: 'vector',
tiles: [
VITE_GLOB_API_URL_VAR.value +
'/api/IdleLand/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=' +
'view_shp_idle_land' +
field_filter
],
minzoom: 1,
maxzoom: 20,
cluster: true,
clusterMaxZoom: 0,
clusterRadius: 0,
});
// 农业Source
map.addSource('farmingSource', {
type: 'vector',
tiles: [
VITE_GLOB_API_URL_VAR.value +
'/api/IdleLand/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=' +
'view_shp_idle_farming' +
field_filter
],
minzoom: 1,
maxzoom: 20,
cluster: true,
clusterMaxZoom: 0,
clusterRadius: 0,
});
// 水域Source
map.addSource('watersSource', {
type: 'vector',
tiles: [
VITE_GLOB_API_URL_VAR.value +
'/api/IdleLand/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=' +
'view_shp_idle_waters' +
field_filter
],
minzoom: 1,
maxzoom: 20,
cluster: true,
clusterMaxZoom: 0,
clusterRadius: 0,
});
// 农机Layer
map.addLayer({
id: 'nongjiSourceLayer',
type: 'symbol',
source: 'nongjiSource',
'source-layer': 'view_shp_idle_nongji',
id: 'tianditu-label-layer',
type: 'raster',
source: 'tianditu-label',
layout: {
'icon-image': 'nongji-marker',
'icon-size': 0.8,
'icon-allow-overlap': true,
'icon-anchor': 'bottom',
visibility: nongjiLayerVisibility.value
},
});
// 房屋Layer
map.addLayer({
id: 'houseSourceLineLayer',
type: 'line',
source: 'houseSource',
'source-layer': 'view_shp_idle_house',
layout: {
'line-join': 'round',
'line-cap': 'round',
visibility: houseLayerVisibility.value,
},
paint: {
'line-color': '#F70303',
'line-width': 5,
},
});
map.addLayer({
id: 'houseSourceFillLayer',
type: 'fill',
source: 'houseSource',
'source-layer': 'view_shp_idle_house',
layout: {
visibility: houseLayerVisibility.value,
},
paint: {
'fill-color': '#F70303',
'fill-opacity': 0.5,
},
});
// 土地资源Layer
map.addLayer({
id: 'landSourceLineLayer',
type: 'line',
source: 'landSource',
'source-layer': 'view_shp_idle_land',
layout: {
'line-join': 'round',
'line-cap': 'round',
visibility: landLayerVisibility.value,
},
paint: {
'line-color': '#0AF703',
'line-width': 5,
},
});
map.addLayer({
id: 'landSourceFillLayer',
type: 'fill',
source: 'landSource',
'source-layer': 'view_shp_idle_land',
layout: {
visibility: landLayerVisibility.value,
},
paint: {
'fill-color': '#0AF703',
'fill-opacity': 0.5,
},
});
// 农业Layer
map.addLayer({
id: 'farmingSourceLineLayer',
type: 'line',
source: 'farmingSource',
'source-layer': 'view_shp_idle_farming',
layout: {
'line-join': 'round',
'line-cap': 'round',
visibility: farmingLayerVisibility.value,
},
paint: {
'line-color': '#F4E004',
'line-width': 5,
},
});
map.addLayer({
id: 'farmingSourceFillLayer',
type: 'fill',
source: 'farmingSource',
'source-layer': 'view_shp_idle_farming',
layout: {
visibility: farmingLayerVisibility.value,
},
paint: {
'fill-color': '#F4E004',
'fill-opacity': 0.5,
},
});
// 水域Layer
map.addLayer({
id: 'watersSourceLineLayer',
type: 'line',
source: 'watersSource',
'source-layer': 'view_shp_idle_waters',
layout: {
'line-join': 'round',
'line-cap': 'round',
visibility: watersLayerVisibility.value,
},
paint: {
'line-color': '#0382F7',
'line-width': 5,
},
visibility: 'none',
}
});
map.addLayer({
id: 'watersSourceFillLayer',
type: 'fill',
source: 'watersSource',
'source-layer': 'view_shp_idle_waters',
layout: {
visibility: watersLayerVisibility.value,
},
paint: {
'fill-color': '#0382F7',
'fill-opacity': 0.5,
},
map.loadImage('/homepage/nong.png', (error, image) => {
if (error) throw error;
if (!map.hasImage('nongji-marker')) {
map.addImage('nongji-marker', image);
}
});
map.on('click', 'nongjiSourceLayer', handlerNongjiGetDetails);
map.on('click', 'houseSourceFillLayer', handlerGetDetails);
map.on('click', 'landSourceFillLayer', handlerGetDetails);
map.on('click', 'farmingSourceFillLayer', handlerGetDetails);
map.on('click', 'watersSourceFillLayer', handlerGetDetails);
layers.forEach(layerItem => {
const sourceId = `${layerItem.id}Source`
map.addSource(sourceId, {
type: 'vector',
tiles: [
VITE_GLOB_API_URL_VAR.value +
'/api/IdleLand/QueryVectorTileByTable?z={z}&x={x}&y={y}&table=' +
layerItem.tableName +
field_filter
],
minzoom: 1,
maxzoom: 20,
});
if(layerItem.id == 'nongji'){
const layerId = `${layerItem.id}SourceLayer`
map.addLayer({
id: layerId,
type: 'symbol',
source: sourceId,
'source-layer': layerItem.tableName,
layout: {
'icon-image': 'nongji-marker',
'icon-size': 0.8,
'icon-allow-overlap': true,
'icon-anchor': 'bottom',
visibility: 'none'
},
});
map.on('click', layerId, handlerNongjiGetDetails);
}else{
const lineLayerId = `${layerItem.id}SourceLineLayer`
const fillLayerId = `${layerItem.id}SourceFillLayer`
map.addLayer({
id: lineLayerId,
type: 'line',
source: sourceId,
'source-layer': layerItem.tableName,
layout: {
'line-join': 'round',
'line-cap': 'round',
visibility: 'none',
},
paint: {
'line-color': layerItem.color,
'line-width': 5,
},
});
map.addLayer({
id: fillLayerId,
type: 'fill',
source: sourceId,
'source-layer': layerItem.tableName,
layout: {
visibility: 'none',
},
paint: {
'fill-color': layerItem.color,
'fill-opacity': 0.5,
},
});
map.on('click', fillLayerId, handlerGetDetails);
}
})
}
// 获取乡镇数据
const handlerDealStreet = (countyName: String = '临沂市'): void => {
@ -715,30 +510,17 @@
}
};
const handlerChangeLayer = (list) => {
const layerIds = [1, 2, 3, 4, 5];
const layerIds = layers.map(item => item.id);
layerIds.forEach(id => {
const visibility = list.includes(id) ? 'visible' : 'none';
switch(id){
case 1:
// 农业生产设施
farmingLayerVisibility.value = visibility
break
case 2:
// 房屋
houseLayerVisibility.value = visibility
break
case 3:
// 土地资源
landLayerVisibility.value = visibility
break
case 4:
// 农机组织
nongjiLayerVisibility.value = visibility
break
case 5:
// 水域
watersLayerVisibility.value = visibility
break
if(id == 'nongji'){
const layerId = `${id}SourceLayer`
map.setLayoutProperty(layerId, 'visibility', visibility);
}else{
const lineLayerId = `${id}SourceLineLayer`
const fillLayerId = `${id}SourceFillLayer`
map.setLayoutProperty(lineLayerId, 'visibility', visibility);
map.setLayoutProperty(fillLayerId, 'visibility', visibility);
}
})
}

29
src/views/sys/exception/mapComponent/layers/index.vue
Unescape Escape View File

@ -31,36 +31,11 @@
defineEmits,
ref,
} from 'vue'
import { layers } from '@/views/sys/exception/util'
const emits = defineEmits(['changeLayer','changeLabel'])
const openLayer = ref(true)
const tiandituLabelOpen = ref(false)
const dataLayerList = ref([
{
id:2,
name:"房屋",
checked:false,
},
{
id:3,
name:"土地资源",
checked:false,
},
{
id:5,
name:"水域",
checked:false,
},
{
id:1,
name:"农业生产设施",
checked:false,
},
{
id:4,
name:"农机组织",
checked:false,
},
])
const dataLayerList = ref(layers)
const layerChange = (item,type)=>{
let showLayer = dataLayerList.value.filter(itemLayer => itemLayer.checked).map(itemLayer => itemLayer.id)

37
src/views/sys/exception/util.ts
Unescape Escape View File

@ -0,0 +1,37 @@
export const layers = [
{
id: 'house',
name:"房屋",
checked:false,
tableName: 'view_shp_idle_house',
color: '#F70303',
},
{
id: 'land',
name:"土地资源",
checked:false,
tableName: 'view_shp_idle_land',
color: '#0AF703',
},
{
id: 'waters',
name:"水域",
checked:false,
tableName: 'view_shp_idle_waters',
color: '#0382F7',
},
{
id: 'farming',
name:"农业生产设施",
checked:false,
tableName: 'view_shp_idle_farming',
color: '#F4E004',
},
{
id: 'nongji',
name:"农机组织",
checked:false,
tableName: 'view_shp_idle_nongji',
color: '#F70303',
},
]
Write Preview
Loading…
Cancel
Save