xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

gx

This commit is contained in:
duanxiaohai 2024-07-26 17:58:29 +08:00
parent fc9044931d
commit 027e46e45a
3 changed files with 3105 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
src/utils/mapInitializer.js Normal file
View File

@ -0,0 +1,65 @@
// 重置与选择相关的状态
const resetSelections = (xuanzhongCs, sfdd, title_choose, cfJd, cfCs) => {
xuanzhongCs.value = [];
sfdd.value = false;
title_choose.value = "";
cfJd.value = "";
cfCs.value = "";
};
// 从特定数组中删除覆盖
const removeOverlaysFromArray = (map, array) => {
array.forEach((item, index) => {
map.removeOverlay(array[index]);
});
};
// 从地图上删除所有叠加层
const clearOverlays = (map, arrays) => {
arrays.forEach(array => removeOverlaysFromArray(map, array));
};
// 删除事件监听器和当前标记覆盖
const removeMarkerEvents = (map, markera, currentMarker) => {
map.removeEventListener("click", markera);
if (currentMarker !== null) {
map.removeOverlay(currentMarker);
}
};
// 重置标记相关数组
const resetMarkers = (arrays) => {
arrays.forEach(array => array.value = []);
};
// 将地图中心重置为默认位置
const resetMapCenter = (map, center, zoom) => {
goMapCenter(center, zoom);
};
// 获取新数据
const fetchData = () => {
getData();
};
// 初始化龙游县
const initializeMap = (map, xuanzhongCs, sfdd, title_choose, cfJd, cfCs, cs_un_choose_arr, cs_choose_arr, cs_number_name_arr, cs_name_arr, cs_qk_arr, cs_dd_arr, markera, currentMarker) => {
resetSelections(xuanzhongCs, sfdd, title_choose, cfJd, cfCs);
clearOverlays(map, [cs_un_choose_arr.value, cs_choose_arr.value, cs_number_name_arr.value, cs_name_arr.value, cs_qk_arr.value, cs_dd_arr.value]);
removeMarkerEvents(map, markera, currentMarker);
resetMarkers([cs_qk_arr, cs_name_arr, cs_number_name_arr, cs_choose_arr, cs_un_choose_arr, cs_dd_arr]);
resetMapCenter(map, [119.178783, 29.034583], 11);
fetchData();
};
export default initializeMap;
export {
resetSelections,
removeOverlaysFromArray,
clearOverlays,
removeMarkerEvents,
resetMarkers,
resetMapCenter,
fetchData
};

2879
src/view/sy_map copy.vue Normal file
View File

File diff suppressed because it is too large Load Diff

201
src/view/sy_map.vue
View File

@ -12,8 +12,13 @@
<div class="title_line"></div>
</div>
<div class="content">
<div class="content_item" v-for="(item, index) in personTotal" :class="{ choose: item.id == choose.person }"
@click="buten(item)" :key="index">
<div
class="content_item"
v-for="(item, index) in personTotal"
:class="{ choose: item.id == choose.person }"
@click="buten(item)"
:key="index"
>
<div class="content_item_name">{{ item.ages }}</div>
<div class="content_item_value">{{ item.rksl }}</div>
</div>
@ -25,8 +30,13 @@
<div class="title_line"></div>
</div>
<div class="content">
<div class="content_item" v-for="(item, index) in tsbqTotal" :class="{ choose: item.id == choose.person }"
@click="buten2(item)" :key="index">
<div
class="content_item"
v-for="(item, index) in tsbqTotal"
:class="{ choose: item.id == choose.person }"
@click="buten2(item)"
:key="index"
>
<div class="content_item_name">{{ item.name }}</div>
<div class="content_item_value">{{ item.rksl }}</div>
</div>
@ -40,11 +50,27 @@
<div class="title_line"></div>
</div>
<div class="jbggfwq_content">
<div class="jbggfwq_content_item" v-for="(item, index) in jbfwqTotal" :key="index">
<div
class="jbggfwq_content_item"
v-for="(item, index) in jbfwqTotal"
:key="index"
>
<div class="jbggfwq_content_item_left">{{ item.name }}</div>
<div class="jbggfwq_content_item_right">
<div class="jbggfwq_content_item_right_item" v-for="itemm in item.child"
:class="{ choose: itemm.id == choose.fwq }" @click="changeFwq(itemm.id, itemm.fwqList, itemm.center)">
<div
class="jbggfwq_content_item_right_item"
v-for="itemm in item.child"
:class="{ choose: itemm.id == choose.fwq }"
@click="
changeFwq(
itemm.id,
itemm.fwqList,
itemm.center,
item.name,
itemm.name
)
"
>
{{ itemm.name }}
</div>
</div>
@ -57,8 +83,13 @@
<div class="title_line"></div>
</div>
<div class="zyys_content">
<div class="zyys_content_item" v-for="(item, index) in yaosuTotal"
:class="{ choose: item.id == choose.yaosu, wz: item.wz == true }" @click="changeys(item.id)" :key="index">
<div
class="zyys_content_item"
v-for="(item, index) in yaosuTotal"
:class="{ choose: item.id == choose.yaosu, wz: item.wz == true }"
@click="changeys(item.id)"
:key="index"
>
<img :src="item.img" class="zyys_content_item_left" />
<div class="zyys_content_item_right">{{ item.name }}</div>
</div>
@ -80,6 +111,7 @@ import {
watch,
nextTick,
} from "vue";
import initializeMap from "@/utils/mapInitializer.js";
import http from "@/utils/request.js";
import mapTown from "@/assets/json/ly.json";
import xkz from "@/assets/json/xkz.json";
@ -531,9 +563,17 @@ const addPolygonCounty = () => {
if (choose.value.person == 0) {
getDatas("溪口镇", "");
getDataBq(cfJd.value, "");
} else if (choose.value.person == "cjr" || choose.value.person == "dibian" || choose.value.person == "db" || choose.value.person == "gxy" || choose.value.person == "tnb" || choose.value.person == "tyjr" || choose.value.person == "kjer") {
} else if (
choose.value.person == "cjr" ||
choose.value.person == "dibian" ||
choose.value.person == "db" ||
choose.value.person == "gxy" ||
choose.value.person == "tnb" ||
choose.value.person == "tyjr" ||
choose.value.person == "kjer"
) {
getDataBq(cfJd.value, "");
getDataBqs2(cfJd.value, '', choose.value.person,);
getDataBqs2(cfJd.value, "", choose.value.person);
console.log(3);
} else {
console.log(4);
@ -602,8 +642,8 @@ const addPolygonCounty = () => {
}
});
};
//添加街道名
//添加街道名
const addJd = () => {
mapTownCount.map((item, index) => {
createCustomOverlayJd(item, index);
@ -615,7 +655,7 @@ const addJd2 = () => {
mapTownCount.map((item, index) => {
createCustomOverlayJd2(item, index);
});
})
});
// if (center_now.value[0] == 119.178783) {
// goMapCenter([119.178783, 29.034581], 11);
@ -698,14 +738,21 @@ const addPolygonCountyCs = () => {
DGcreateCs2(item, index);
});
}
if (choose.value.person == "cjr" || choose.value.person == "dibian" || choose.value.person == "db" || choose.value.person == "gxy" || choose.value.person == "tnb" || choose.value.person == "tyjr" || choose.value.person == "kjer") {
console.log(1, '溪口镇');
getDataBqs2(cfJd.value, cfCs.value, '');
if (
choose.value.person == "cjr" ||
choose.value.person == "dibian" ||
choose.value.person == "db" ||
choose.value.person == "gxy" ||
choose.value.person == "tnb" ||
choose.value.person == "tyjr" ||
choose.value.person == "kjer"
) {
console.log(1, "溪口镇");
getDataBqs2(cfJd.value, cfCs.value, "");
} else {
console.log(2, '溪口镇');
getDatas2('溪口镇', choose.value.person, cfCs.value);
console.log(2, "溪口镇");
getDatas2("溪口镇", choose.value.person, cfCs.value);
}
addCsChoose();
addCsUnChoose();
@ -911,9 +958,17 @@ const createCustomOverlayJd2 = (polygon, indexx) => {
let num = "";
if (choose.value.person == "6666") {
num = "swrs";
} if (choose.value.person == "cjr" || choose.value.person == "dibian" || choose.value.person == "db" || choose.value.person == "gxy" || choose.value.person == "tnb" || choose.value.person == "tyjr" || choose.value.person == "kjer") {
}
if (
choose.value.person == "cjr" ||
choose.value.person == "dibian" ||
choose.value.person == "db" ||
choose.value.person == "gxy" ||
choose.value.person == "tnb" ||
choose.value.person == "tyjr" ||
choose.value.person == "kjer"
) {
num = "numbers";
} else {
num = "number";
}
@ -928,7 +983,6 @@ const createCustomOverlayJd2 = (polygon, indexx) => {
},
});
map.addOverlay(jdm_number_arr.value[indexx]);
};
//创建村社
const addCs = () => {
@ -993,9 +1047,17 @@ const createCs2 = (polygon, indexx) => {
let num = "";
if (choose.value.person == "6666") {
num = "swrs";
} if (choose.value.person == "cjr" || choose.value.person == "dibian" || choose.value.person == "db" || choose.value.person == "gxy" || choose.value.person == "tnb" || choose.value.person == "tyjr" || choose.value.person == "kjer") {
}
if (
choose.value.person == "cjr" ||
choose.value.person == "dibian" ||
choose.value.person == "db" ||
choose.value.person == "gxy" ||
choose.value.person == "tnb" ||
choose.value.person == "tyjr" ||
choose.value.person == "kjer"
) {
num = "numbers";
} else {
num = "number";
}
@ -1173,9 +1235,17 @@ const DGcreateCs2 = (polygon, indexx) => {
let num = "";
if (choose.value.person == "6666") {
num = "swrs";
} if (choose.value.person == "cjr" || choose.value.person == "dibian" || choose.value.person == "db" || choose.value.person == "gxy" || choose.value.person == "tnb" || choose.value.person == "tyjr" || choose.value.person == "kjer") {
}
if (
choose.value.person == "cjr" ||
choose.value.person == "dibian" ||
choose.value.person == "db" ||
choose.value.person == "gxy" ||
choose.value.person == "tnb" ||
choose.value.person == "tyjr" ||
choose.value.person == "kjer"
) {
num = "numbers";
} else {
num = "number";
}
@ -1367,7 +1437,7 @@ const changebq = (id) => {
// choose.value.person = id;
};
//基本公共服务圈点击
const changeFwq = (id, list, center) => {
const changeFwq = (id, list, center, name, names) => {
if (choose.value.fwq == id) {
// chooseArr.value = chooseArr.value.filter((item) => item !== "fwq");
choose.value.fwq = 9999;
@ -1384,6 +1454,7 @@ const changeFwq = (id, list, center) => {
} else {
choose.value.fwq = id;
fwqList.value = list;
getServiceCircle(names, name);
// 清空地图上所有的覆盖物
console.log(22);
map.clearOverlays();
@ -2126,8 +2197,38 @@ const buten = async (item) => {
const buten2 = async (item) => {
// getDataBq(item.id, item.age);
// getDatas("溪口镇", item.age);
// map.removeOverlay(marker1);
getDataBqs(cfJd.value, cfCs.value, item.id);
};
const updateFwqList = (data, townName, communityName) => {
data.forEach((item) => {
if (item.csq === communityName) {
item.fwqList = data.map((item1) => ({
name: item1.zyysmc,
point: [item1.jd, item1.wd],
bgColor: "#00b050",
img: fwqbg1,
img2: b2,
x: 33,
y: 0,
textColor: "#fff",
padding: "4px 8px 10px",
}));
}
});
};
const getServiceCircle = async (communityName, townName) => {
try {
const response = await http.get(`/api/ggfwyth/ysyzt/zyysxx?csq=${communityName}&xzjd=${townName}`);
if (response.code === 200) {
console.log(response.data);
updateFwqList(response.data, townName, communityName);
}
} catch (error) {
console.error("Error fetching data:", error);
}
};
//获取人口数
const getData = async (i, e) => {
await http
@ -2285,8 +2386,16 @@ const getDatas = async (e, i) => {
});
};
const getDatas2 = async (e, i, cs) => {
if (i == "cjr" || i == "dibian" || i == "db" || i == "gxy" || i == "tnb" || i == "tyjr" || i == "kjer") {
i = ''
if (
i == "cjr" ||
i == "dibian" ||
i == "db" ||
i == "gxy" ||
i == "tnb" ||
i == "tyjr" ||
i == "kjer"
) {
i = "";
}
await http
.get(
@ -2367,7 +2476,6 @@ const getDataBqs = async (jd, cs, bq) => {
data = {
xzjd: jd,
tsbq: bq,
};
vv = 2;
} else {
@ -2388,12 +2496,11 @@ const getDataBqs = async (jd, cs, bq) => {
}
});
});
console.log(mapTownCount, 'mapTownCount');
console.log(mapTownCount, "mapTownCount");
changeRs2(bq);
if (jd) {
addCs2();
}
}
});
};
@ -2514,13 +2621,17 @@ onMounted(() => {
bottom: 0;
width: 520px;
height: 960px;
background: linear-gradient(270deg,
background: linear-gradient(
270deg,
rgba(0, 52, 131, 0.69) 0%,
rgba(0, 32, 83, 0.77) 50%,
rgba(0, 60, 131, 0.74) 100%),
radial-gradient(128% 99% at 100% 46%,
rgba(0, 60, 131, 0.74) 100%
),
radial-gradient(
128% 99% at 100% 46%,
rgba(0, 48, 125, 0.29) 0%,
rgba(0, 61, 134, 0.42) 100%);
rgba(0, 61, 134, 0.42) 100%
);
box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
backdrop-filter: blur(3px);
padding: 30px 26px;
@ -2692,13 +2803,17 @@ onMounted(() => {
bottom: 0;
width: 520px;
height: 960px;
background: linear-gradient(270deg,
background: linear-gradient(
270deg,
rgba(0, 52, 131, 0.69) 0%,
rgba(0, 32, 83, 0.77) 50%,
rgba(0, 60, 131, 0.74) 100%),
radial-gradient(128% 99% at 100% 46%,
rgba(0, 60, 131, 0.74) 100%
),
radial-gradient(
128% 99% at 100% 46%,
rgba(0, 48, 125, 0.29) 0%,
rgba(0, 61, 134, 0.42) 100%);
rgba(0, 61, 134, 0.42) 100%
);
box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
backdrop-filter: blur(3px);
padding: 30px 26px;
@ -2856,10 +2971,12 @@ onMounted(() => {
// line-height: 44px;
letter-spacing: 4px;
margin-bottom: 15px;
background: linear-gradient(180deg,
background: linear-gradient(
180deg,
#ffffff 0%,
#ffffff 40%,
#00ffff 100%);
#00ffff 100%
);
/* 使文字没有背景颜色的背景 */
background-clip: text;
/* 为了兼容性，添加渐变背景到IE */