From cacdb43f703420692056c500cb80e220e5f2d70b Mon Sep 17 00:00:00 2001 From: wanghui Date: Wed, 24 Jul 2024 09:54:47 +0800 Subject: [PATCH] 11 --- src/view/sy_map.vue | 118 +++++++++++++++++++++++++------------------- 1 file changed, 66 insertions(+), 52 deletions(-) diff --git a/src/view/sy_map.vue b/src/view/sy_map.vue index 07a2cc7..c5b6c6c 100644 --- a/src/view/sy_map.vue +++ b/src/view/sy_map.vue @@ -8,13 +8,8 @@
-
+
{{ item.name }}
{{ item.value }}
@@ -26,13 +21,8 @@
-
+
{{ item.name }}
{{ item.value }}
@@ -46,19 +36,11 @@
-
+
{{ item.name }}
-
+
{{ itemm.name }}
@@ -71,13 +53,8 @@
-
+
{{ item.name }}
@@ -96,6 +73,7 @@ import { computed, defineProps, watch, + nextTick, } from "vue"; import mapTown from "@/assets/json/ly.json"; import xkz from "@/assets/json/xkz.json"; @@ -301,15 +279,21 @@ const addPolygonCounty = () => { }; //添加街道名 const addJd = () => { + goMapCenter([119.178783, 29.034581], 12); mapTownCount.map((item) => { createCustomOverlayJd(item); }); + goMapCenter([119.178783, 29.034583], 12); + + }; //添加街道名2含数量 const addJd2 = () => { + goMapCenter([119.178783, 29.034581], 12); mapTownCount.map((item) => { createCustomOverlayJd2(item); }); + goMapCenter([119.178783, 29.034583], 12); }; //加载村社信息 const loadCs = () => { @@ -550,6 +534,7 @@ const goMapCenter = (point, zoom) => { map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom); }; const removeAllPolygon = (e) => { + let allOverlay = map.getOverlays(); console.log("allOverlay", allOverlay); for (let i = 0; i < allOverlay.length; i++) { @@ -557,10 +542,14 @@ const removeAllPolygon = (e) => { } if (e == "fwq") { addPolygonCounty(); - addJd(); + nextTick(() => { + addJd(); + }) } else { addPolygonCounty(); - addJd2(); + nextTick(() => { + addJd2(); + }) } }; //选项设置 @@ -802,8 +791,8 @@ const jbfwqTotal = ref([ bgColor: "#00b050", img: fwqbg1, img2: b2, - x:30, - y:0, + x: 30, + y: 0, }, { name: "衢州学院附属幼儿园", @@ -1204,15 +1193,18 @@ onMounted(() => { ::v-deep .anchorBL { display: none; } + .module { display: flex; width: 100%; height: 100%; position: relative; } + #id { z-index: 10; } + //左侧弹框 .left { box-sizing: border-box; @@ -1221,17 +1213,13 @@ 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; @@ -1239,6 +1227,7 @@ onMounted(() => { flex-direction: column; z-index: 12; overflow: hidden; + //人口数 .lyx { .content { @@ -1250,6 +1239,7 @@ onMounted(() => { color: #ffffff; height: 450px; overflow: auto; + .content_item { cursor: pointer; box-sizing: border-box; @@ -1264,6 +1254,7 @@ onMounted(() => { background-size: 100% 100%; margin-bottom: 12px; } + .content_item:first-child { box-sizing: border-box; display: flex; @@ -1277,9 +1268,11 @@ onMounted(() => { background-size: 100% 100%; margin-bottom: 12px; } + .content_item_name { position: relative; } + .content_item_name::before { content: ""; position: absolute; @@ -1291,19 +1284,23 @@ onMounted(() => { top: 7.5px; left: -13px; } + .choose { background-image: url(@/assets/images/map/choose.png) !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; } } + .content::-webkit-scrollbar { display: none; } } + //特殊标签 .tsbq { margin-top: 40px; + .content { box-sizing: border-box; margin-top: 20px; @@ -1328,6 +1325,7 @@ onMounted(() => { background-size: 100% 100%; margin-bottom: 12px; } + .content_item:last-child { box-sizing: border-box; display: flex; @@ -1341,9 +1339,11 @@ onMounted(() => { background-size: 100% 100%; margin-bottom: 12px; } + .content_item_name { position: relative; } + .content_item_name::before { content: ""; position: absolute; @@ -1355,17 +1355,20 @@ onMounted(() => { top: 7.5px; left: -13px; } + .choose { background-image: url(@/assets/images/map/choose.png) !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; } } + .content::-webkit-scrollbar { display: none; } } } + //右侧弹框 .right { box-sizing: border-box; @@ -1374,17 +1377,13 @@ 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; @@ -1392,6 +1391,7 @@ onMounted(() => { flex-direction: column; z-index: 12; overflow: hidden; + .jbggfwq { .jbggfwq_content { height: 550px; @@ -1399,21 +1399,25 @@ onMounted(() => { margin-top: 15px; display: flex; flex-direction: column; + .jbggfwq_content_item { margin-bottom: 5px; display: flex; // align-items: center; color: #ffffff; + .jbggfwq_content_item_left { margin-right: 10px; width: 80px; height: 48px; line-height: 48px; } + .jbggfwq_content_item_right { width: 370px; display: flex; flex-flow: row wrap; + .jbggfwq_content_item_right_item { cursor: pointer; box-sizing: border-box; @@ -1424,6 +1428,7 @@ onMounted(() => { background: rgba(124, 151, 180, 0.8); padding: 10px; } + .choose { background-image: url(@/assets/images/map/choose.png); background-repeat: no-repeat; @@ -1432,10 +1437,12 @@ onMounted(() => { } } } + .jbggfwq_content::-webkit-scrollbar { display: none; } } + .zyys { .zyys_content { margin-top: 20px; @@ -1443,6 +1450,7 @@ onMounted(() => { display: flex; justify-content: space-between; flex-flow: row wrap; + .zyys_content_item { cursor: pointer; margin-bottom: 15px; @@ -1453,19 +1461,23 @@ onMounted(() => { width: 110px; height: 42px; background: rgba(124, 151, 180, 0.8); + .zyys_content_item_left { width: 18px; height: 18px; margin-right: 3px; } + .zyys_content_item_right { font-weight: 500; font-size: 16px; } } + .wz { width: 150px; } + .choose { background-image: url(@/assets/images/map/choose.png); background-repeat: no-repeat; @@ -1474,6 +1486,7 @@ onMounted(() => { } } } + .title { .title_name { font-family: YouSheBiaoTiHei; @@ -1489,6 +1502,7 @@ onMounted(() => { -webkit-background-clip: text; -webkit-text-fill-color: transparent; } + .title_line { height: 4px; width: 100%;