2683 lines
66 KiB
Vue
2683 lines
66 KiB
Vue
<template>
|
||
<div class="module">
|
||
<teleport to="body">
|
||
<div id="map" style="width: 100vw; height: 100vh"></div>
|
||
<div class="left" style="width: 517px">
|
||
<div class="lyx">
|
||
<div class="title">
|
||
<div class="title_name">
|
||
<span @click="csh()">龙游县</span>{{ title_choose }}
|
||
</div>
|
||
<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_name">{{ item.ages }}</div>
|
||
<div class="content_item_value">{{ item.rksl }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="tsbq">
|
||
<div class="title">
|
||
<div class="title_name">特殊标签</div>
|
||
<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="changebq(item.id)"
|
||
:key="index"
|
||
>
|
||
<div class="content_item_name">{{ item.name }}</div>
|
||
<div class="content_item_value">{{ item.rksl }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right" style="width: 517px">
|
||
<div class="jbggfwq">
|
||
<div class="title">
|
||
<div class="title_name">基本公共服务圈</div>
|
||
<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_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)"
|
||
>
|
||
{{ itemm.name }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="zyys">
|
||
<div class="title">
|
||
<div class="title_name">资源要素</div>
|
||
<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"
|
||
>
|
||
<img :src="item.img" class="zyys_content_item_left" />
|
||
<div class="zyys_content_item_right">{{ item.name }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</teleport>
|
||
</div>
|
||
</template>
|
||
<script setup>
|
||
import {
|
||
ref,
|
||
reactive,
|
||
onMounted,
|
||
onBeforeMount,
|
||
onBeforeUnmount,
|
||
computed,
|
||
defineProps,
|
||
watch,
|
||
nextTick,
|
||
} from "vue";
|
||
import mapTown from "@/assets/json/ly.json";
|
||
import xkz from "@/assets/json/xkz.json";
|
||
import j0 from "@/assets/images/map/j0.png";
|
||
import j1 from "@/assets/images/map/j1.png";
|
||
import j2 from "@/assets/images/map/j2.png";
|
||
import j3 from "@/assets/images/map/j3.png";
|
||
import j4 from "@/assets/images/map/j4.png";
|
||
import j5 from "@/assets/images/map/j5.png";
|
||
import j6 from "@/assets/images/map/j6.png";
|
||
import j7 from "@/assets/images/map/j7.png";
|
||
import j8 from "@/assets/images/map/j8.png";
|
||
import j9 from "@/assets/images/map/j9.png";
|
||
import j10 from "@/assets/images/map/j10.png";
|
||
import m1 from "@/assets/images/map/m1.png";
|
||
import m2 from "@/assets/images/map/m2.png";
|
||
import dwd from "@/assets/images/map/dwd.png";
|
||
import fwqbg1 from "@/assets/images/map/qlv.png";
|
||
import fwqbg2 from "@/assets/images/map/qlan.png";
|
||
import fwqbg3 from "@/assets/images/map/slan.png";
|
||
import fwqbg4 from "@/assets/images/map/slv.png";
|
||
import fwqbg5 from "@/assets/images/map/shuang.png";
|
||
import fwqbg6 from "@/assets/images/map/qqlv.png";
|
||
import b1 from "@/assets/images/map/bb1.png";
|
||
import b2 from "@/assets/images/map/b2.png";
|
||
import b3 from "@/assets/images/map/b3.png";
|
||
import b4 from "@/assets/images/map/b4.png";
|
||
import b5 from "@/assets/images/map/b5.png";
|
||
import b6 from "@/assets/images/map/b6.png";
|
||
import xcbg from "@/assets/images/map/xcbg.png";
|
||
import http from "@/utils/request.js";
|
||
import AED from "@/assets/images/map/AED.png";
|
||
//删除(存放渲染的地块及图标)
|
||
const jdm_arr = ref([]);
|
||
const jdm_number_arr = ref([]);
|
||
const fwq_list_arr = ref([]);
|
||
const cs_qk_arr = ref([]);
|
||
const cs_name_arr = ref([]);
|
||
const cs_number_name_arr = ref([]);
|
||
const cs_choose_arr = ref([]);
|
||
const cs_un_choose_arr = ref([]);
|
||
const cs_dd_arr = ref([]);
|
||
//是否进入村社
|
||
const jrcs = ref(false);
|
||
const title_choose = ref("");
|
||
//是否单点社区
|
||
const sfdd = ref(false);
|
||
const xuanzhongCs = ref([]);
|
||
//存放街道
|
||
const cfJd = ref("");
|
||
//存放村社
|
||
const cfCs = ref("");
|
||
//村社颜色列表
|
||
const colorList = [
|
||
{
|
||
bg: "RGBA(52, 231, 134, 1)",
|
||
},
|
||
{
|
||
bg: "RGBA(255, 206, 0, 1)",
|
||
},
|
||
{
|
||
bg: "RGBA(186, 232, 128, 1)",
|
||
},
|
||
{
|
||
bg: "RGBA(35, 146, 223, 1)",
|
||
},
|
||
{
|
||
bg: "RGBA(60, 144, 252, 1)",
|
||
},
|
||
{
|
||
bg: "RGBA(255, 142, 0, 1)",
|
||
},
|
||
{
|
||
bg: "RGBA(137, 128, 0, 1)",
|
||
},
|
||
{
|
||
bg: "RGBA(0, 207, 249, 1)",
|
||
},
|
||
{
|
||
bg: "RGBA(27, 91, 55, 1)",
|
||
},
|
||
];
|
||
//存放特殊标签中文对应的简写
|
||
const tsbq_id_total = ref([
|
||
{
|
||
name: "残疾人",
|
||
id: "cjr",
|
||
},
|
||
{
|
||
name: "低边",
|
||
id: "dibian",
|
||
},
|
||
{
|
||
name: "低保",
|
||
id: "db",
|
||
},
|
||
{
|
||
name: "高血压",
|
||
id: "gxy",
|
||
},
|
||
{
|
||
name: "糖尿病",
|
||
id: "tnb",
|
||
},
|
||
]);
|
||
//点击龙游县初始化
|
||
const csh = () => {
|
||
xuanzhongCs.value = [];
|
||
sfdd.value = false;
|
||
title_choose.value = "";
|
||
cfJd.value = "";
|
||
cfCs.value = "";
|
||
cs_un_choose_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(cs_un_choose_arr.value[index]);
|
||
});
|
||
cs_choose_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(cs_choose_arr.value[index]);
|
||
});
|
||
cs_number_name_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(cs_number_name_arr.value[index]);
|
||
});
|
||
cs_name_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(cs_name_arr.value[index]);
|
||
});
|
||
cs_qk_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(cs_qk_arr.value[index]);
|
||
});
|
||
cs_dd_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(cs_dd_arr.value[index]);
|
||
});
|
||
// jdm_arr.value = [];
|
||
// jdm_number_arr.value = [];
|
||
// fwq_list_arr.value = [];
|
||
cs_qk_arr.value = [];
|
||
cs_name_arr.value = [];
|
||
cs_number_name_arr.value = [];
|
||
cs_choose_arr.value = [];
|
||
cs_un_choose_arr.value = [];
|
||
cs_dd_arr.value = [];
|
||
map.removeEventListener("click", markera);
|
||
if (currentMarker !== null) {
|
||
map.removeOverlay(currentMarker);
|
||
}
|
||
goMapCenter([119.178783, 29.034583], 11);
|
||
getData();
|
||
};
|
||
//选中社区
|
||
const chooseCsList = ref([]);
|
||
const unChooseList = ref([]);
|
||
const sqname = ref();
|
||
//中心点坐标
|
||
const center_now = ref([]);
|
||
const center_center = ref([119.178783, 29.034583]);
|
||
//地图设置
|
||
const mapTownCount = reactive([
|
||
{
|
||
name: "龙洲街道",
|
||
center: [119.1573083, 28.9799445],
|
||
number: "1000",
|
||
},
|
||
{
|
||
name: "东华街道",
|
||
center: [119.209592, 28.9799445],
|
||
number: "1000",
|
||
},
|
||
{
|
||
name: "小南海镇",
|
||
center: [119.119616, 29.07309],
|
||
number: "1000",
|
||
},
|
||
{
|
||
name: "湖镇镇",
|
||
center: [119.2906892, 29.0386151],
|
||
number: "1000",
|
||
},
|
||
{
|
||
name: "溪口镇",
|
||
center: [119.1859408, 28.8879474],
|
||
number: "1000",
|
||
},
|
||
{
|
||
name: "詹家镇",
|
||
center: [119.1201732, 29.005175],
|
||
number: "1000",
|
||
},
|
||
{
|
||
name: "塔石镇",
|
||
center: [119.1256669, 29.1373072],
|
||
number: "1000",
|
||
},
|
||
{
|
||
name: "横山镇",
|
||
center: [119.1876111, 29.1903275],
|
||
number: "1000",
|
||
},
|
||
{
|
||
name: "模环乡",
|
||
center: [119.237015, 29.120862],
|
||
number: "1000",
|
||
},
|
||
{
|
||
name: "石佛乡",
|
||
center: [119.1002998, 29.2018674],
|
||
number: "1000",
|
||
},
|
||
{
|
||
name: "沐尘畲族乡",
|
||
center: [119.1837169, 28.8014116],
|
||
number: "1000",
|
||
},
|
||
{
|
||
name: "罗家乡",
|
||
center: [119.2453273, 28.9130851],
|
||
number: "1000",
|
||
},
|
||
{
|
||
name: "庙下乡",
|
||
center: [119.1037175, 28.8089885],
|
||
number: "1000",
|
||
},
|
||
{
|
||
name: "大街乡",
|
||
center: [119.2664362, 28.8432149],
|
||
number: "1000",
|
||
},
|
||
{
|
||
name: "社阳乡",
|
||
center: [119.3109367, 28.9074754],
|
||
number: "1000",
|
||
},
|
||
]);
|
||
|
||
//默认龙游县灰色地块
|
||
const mapTownDataDK = reactive([]);
|
||
//社区地块
|
||
const xkzDk = reactive([]);
|
||
//社区中心点
|
||
const xkzCenter = reactive([
|
||
{
|
||
name: "溪口村",
|
||
center: [119.2002156322304, 28.83866363229786],
|
||
number: "50",
|
||
},
|
||
{
|
||
name: "扁石村",
|
||
center: [119.18143177857742, 28.858795781247416],
|
||
number: "50",
|
||
},
|
||
{
|
||
name: "大垄村",
|
||
center: [119.15947390269743, 28.856881986353613],
|
||
number: "50",
|
||
},
|
||
{
|
||
name: "枫林村",
|
||
center: [119.2244601402551, 28.874916936765324],
|
||
number: "50",
|
||
},
|
||
{
|
||
name: "双港口村",
|
||
center: [119.2112370831526, 28.873145674638753],
|
||
number: "50",
|
||
},
|
||
{
|
||
name: "灵上村",
|
||
center: [119.18997199384468, 28.871170115155575],
|
||
number: "50",
|
||
},
|
||
{
|
||
name: "灵下村",
|
||
center: [119.19215588030731, 28.890692457149832],
|
||
number: "50",
|
||
},
|
||
{
|
||
name: "下徐村",
|
||
center: [119.13517530022014, 28.877528537725134],
|
||
number: "50",
|
||
},
|
||
{
|
||
name: "大沃口村",
|
||
center: [119.17629950196843, 28.895987778606404],
|
||
number: "50",
|
||
},
|
||
{
|
||
name: "寺下村",
|
||
center: [119.15115841066512, 28.913624042836545],
|
||
number: "50",
|
||
},
|
||
{
|
||
name: "大阳家村",
|
||
center: [119.165141274073, 28.89860048623702],
|
||
number: "50",
|
||
},
|
||
{
|
||
name: "石角村",
|
||
center: [119.12327500764461, 28.911094612057784],
|
||
number: "50",
|
||
},
|
||
{
|
||
name: "红罗村",
|
||
center: [119.18884846618927, 28.911017362099795],
|
||
number: "50",
|
||
},
|
||
{
|
||
name: "冷水村",
|
||
center: [119.19787638778016, 28.934598743672993],
|
||
number: "50",
|
||
},
|
||
{
|
||
name: "新溪社区",
|
||
center: [119.184555, 28.853068],
|
||
number: "50",
|
||
},
|
||
]);
|
||
var map = null;
|
||
// 鼠标点击添加点位
|
||
let currentMarker = null; // 用于保存当前标记的引用
|
||
const markera = (e) => {
|
||
// console.log(`${e.latlng.lng},${e.latlng.lat} `, "name");
|
||
// 检查并移除当前标记
|
||
if (currentMarker !== null) {
|
||
map.removeOverlay(currentMarker);
|
||
}
|
||
// 创建新标记
|
||
let icons = new BMapGL.Icon(AED, new BMapGL.Size(24, 62));
|
||
var marker = new BMapGL.Marker(new BMapGL.Point(e.latlng.lng, e.latlng.lat), {
|
||
icon: icons,
|
||
});
|
||
|
||
// 将新标记添加到地图中并更新当前标记引用
|
||
map.addOverlay(marker);
|
||
currentMarker = marker;
|
||
};
|
||
const BMAP = () => {
|
||
// 添加鼠标点击事件监听器
|
||
|
||
map.addEventListener("click", markera);
|
||
};
|
||
|
||
const initMap = () => {
|
||
map = new BMapGL.Map("map", { minZoom: 11, maxZoom: 20 });
|
||
map.setMapType(BMAP_SATELLITE_MAP);
|
||
map.enableScrollWheelZoom(true);
|
||
goMapCenter([119.178783, 29.034583], 11);
|
||
|
||
//加载乡镇信息
|
||
loadTown();
|
||
//渲染地块
|
||
addPolygonCounty();
|
||
//添加街道名
|
||
addJd();
|
||
};
|
||
const loadTown = () => {
|
||
for (let v of mapTown.features) {
|
||
if (v.geometry.coordinates.length > 1) {
|
||
for (let w in v.geometry.coordinates) {
|
||
if (v.geometry.coordinates[w][0].length < 60) continue;
|
||
mapTownDataDK.push({
|
||
name: v.properties.name,
|
||
point: v.geometry.coordinates[w][0],
|
||
});
|
||
}
|
||
} else {
|
||
mapTownDataDK.push({
|
||
name: v.properties.name,
|
||
point: v.geometry.coordinates[0],
|
||
});
|
||
}
|
||
}
|
||
};
|
||
|
||
//添加地图区块
|
||
const addPolygonCounty = () => {
|
||
map.clearOverlays();
|
||
let fillColor = "#ffffff";
|
||
mapTownDataDK.map((item) => {
|
||
item.leg = 0;
|
||
//地区的坐标范围
|
||
let points = [];
|
||
item.point.map((p) => points.push(new BMapGL.Point(...p)));
|
||
if (points.length) {
|
||
//创建面
|
||
let polygon = new BMapGL.Polygon(points, {
|
||
strokeColor: "#5E9AD2",
|
||
strokeWeight: 2,
|
||
strokeOpacity: 0.8,
|
||
fillColor: fillColor,
|
||
fillOpacity: 0.7,
|
||
name: item.name,
|
||
zIndex: 92,
|
||
});
|
||
|
||
map.addOverlay(polygon);
|
||
polygon.addEventListener("click", () => {
|
||
// console.log(11111, item.name);
|
||
|
||
// if(item.name !== "溪口镇"){
|
||
// jrcs.value=false;
|
||
// console.log( jrcs.value,'000');
|
||
// }
|
||
// if (jrcs.value && item.name != "溪口镇") {
|
||
// console.log(1);
|
||
// } else {
|
||
// console.log(2);
|
||
|
||
// jrcs.value=true;
|
||
if (item.name == cfJd.value) {
|
||
// console.log(2222);
|
||
} else {
|
||
// console.log(111);
|
||
cfJd.value = item.name;
|
||
let jdCenter = [];
|
||
if (item.name == "溪口镇") {
|
||
BMAP();
|
||
if (choose.value.person == 0) {
|
||
getDatas("溪口镇", "");
|
||
} else {
|
||
getDatas("溪口镇", choose.value.person);
|
||
}
|
||
|
||
if (!title_choose.value.includes("溪口镇")) {
|
||
title_choose.value = title_choose.value + `>${item.name}`;
|
||
}
|
||
loadCs();
|
||
addPolygonCountyCs();
|
||
mapTownCount.map((item) => {
|
||
if (item.name == "溪口镇") {
|
||
jdCenter = item.center;
|
||
}
|
||
});
|
||
if (choose.value.person == "") {
|
||
addCs();
|
||
} else {
|
||
addCs2();
|
||
}
|
||
goMapCenter(jdCenter, 13);
|
||
} else {
|
||
map.removeEventListener("click", markera);
|
||
if (currentMarker !== null) {
|
||
map.removeOverlay(currentMarker);
|
||
}
|
||
// xuanzhongCs.value = [];
|
||
// sfdd.value = false;
|
||
// title_choose.value = "";
|
||
// cs_qk_arr.value.forEach((item, index) => {
|
||
// map.removeOverlay(cs_qk_arr.value[index]);
|
||
// });
|
||
// cs_name_arr.value.forEach((item, index) => {
|
||
// map.removeOverlay(cs_name_arr.value[index]);
|
||
// });
|
||
// cs_choose_arr.value.forEach((item, index) => {
|
||
// map.removeOverlay(cs_choose_arr.value[index]);
|
||
// });
|
||
// cs_un_choose_arr.value.forEach((item, index) => {
|
||
// map.removeOverlay(cs_un_choose_arr.value[index]);
|
||
// });
|
||
// cs_dd_arr.value.forEach((item, index) => {
|
||
// map.removeOverlay(cs_dd_arr.value[index]);
|
||
// });
|
||
|
||
// fwq_list_arr.value = [];
|
||
// cs_qk_arr.value = [];
|
||
// cs_name_arr.value = [];
|
||
// cs_number_name_arr.value = [];
|
||
// cs_choose_arr.value = [];
|
||
// cs_un_choose_arr.value = [];
|
||
// cs_dd_arr.value = [];
|
||
cfJd.value = "";
|
||
cfCs.value = "";
|
||
xuanzhongCs.value = [];
|
||
sfdd.value = false;
|
||
title_choose.value = "";
|
||
cs_un_choose_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(cs_un_choose_arr.value[index]);
|
||
});
|
||
cs_choose_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(cs_choose_arr.value[index]);
|
||
});
|
||
cs_number_name_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(cs_number_name_arr.value[index]);
|
||
});
|
||
cs_name_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(cs_name_arr.value[index]);
|
||
});
|
||
cs_qk_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(cs_qk_arr.value[index]);
|
||
});
|
||
cs_dd_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(cs_dd_arr.value[index]);
|
||
});
|
||
// jdm_arr.value = [];
|
||
// jdm_number_arr.value = [];
|
||
// fwq_list_arr.value = [];
|
||
cs_qk_arr.value = [];
|
||
cs_name_arr.value = [];
|
||
cs_number_name_arr.value = [];
|
||
cs_choose_arr.value = [];
|
||
cs_un_choose_arr.value = [];
|
||
cs_dd_arr.value = [];
|
||
getData();
|
||
}
|
||
}
|
||
|
||
// }
|
||
});
|
||
}
|
||
});
|
||
};
|
||
//添加街道名
|
||
|
||
const addJd = () => {
|
||
mapTownCount.map((item, index) => {
|
||
createCustomOverlayJd(item, index);
|
||
});
|
||
};
|
||
//添加街道名2含数量
|
||
const addJd2 = () => {
|
||
// if (center_now.value[0] == 119.178783) {
|
||
// goMapCenter([119.178783, 29.034581], 11);
|
||
// }
|
||
mapTownCount.map((item, index) => {
|
||
createCustomOverlayJd2(item, index);
|
||
});
|
||
|
||
// if (center_now.value[0] == 119.178783) {
|
||
// goMapCenter([119.178783, 29.034581], 11);
|
||
// }
|
||
};
|
||
//加载村社信息
|
||
const loadCs = () => {
|
||
for (let v of xkz.features) {
|
||
if (v.geometry.coordinates.length > 1) {
|
||
for (let w in v.geometry.coordinates) {
|
||
if (v.geometry.coordinates[w][0].length < 60) continue;
|
||
xkzDk.push({
|
||
name: v.properties.name,
|
||
point: v.geometry.coordinates[w][0],
|
||
});
|
||
}
|
||
} else {
|
||
xkzDk.push({
|
||
name: v.properties.name,
|
||
point: v.geometry.coordinates[0],
|
||
});
|
||
}
|
||
}
|
||
};
|
||
//添加村社区块
|
||
const addPolygonCountyCs = () => {
|
||
xkzDk.map((item, index) => {
|
||
let num = index % 9;
|
||
let fillColor = colorList[num].bg;
|
||
//地区的坐标范围
|
||
let points = [];
|
||
item.point[0].map((p) => points.push(new BMapGL.Point(...p)));
|
||
if (points.length) {
|
||
//创建面
|
||
cs_qk_arr.value[index] = new BMapGL.Polygon(points, {
|
||
strokeColor: fillColor,
|
||
strokeWeight: 2,
|
||
strokeOpacity: 0.8,
|
||
fillColor: fillColor,
|
||
fillOpacity: 0.7,
|
||
name: item.name,
|
||
zIndex: 99,
|
||
});
|
||
map.addOverlay(cs_qk_arr.value[index]);
|
||
cs_qk_arr.value[index].addEventListener("click", () => {
|
||
cfCs.value = item.name;
|
||
sfdd.value = true;
|
||
xkzCenter.forEach((a, b) => {
|
||
if (a.name == item.name) {
|
||
cs_dd_arr.value.push(a);
|
||
xuanzhongCs.value.push(a);
|
||
}
|
||
});
|
||
chooseCsList.value.length = 0;
|
||
unChooseList.value.length = 0;
|
||
xkzDk.forEach((itemm, indexx) => {
|
||
if (itemm.name == item.name) {
|
||
chooseCsList.value.push(itemm);
|
||
} else {
|
||
unChooseList.value.push(itemm);
|
||
}
|
||
});
|
||
title_choose.value = title_choose.value + `>${item.name}`;
|
||
cs_qk_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(cs_qk_arr.value[index]);
|
||
});
|
||
cs_name_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(cs_name_arr.value[index]);
|
||
});
|
||
cs_number_name_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(cs_number_name_arr.value[index]);
|
||
});
|
||
if (choose.value.person == "") {
|
||
cs_dd_arr.value.map((item, index) => {
|
||
DGcreateCs(item, index);
|
||
});
|
||
} else {
|
||
cs_dd_arr.value.map((item, index) => {
|
||
DGcreateCs2(item, index);
|
||
});
|
||
}
|
||
getDatas2(cfJd.value, choose.value.person, cfCs.value);
|
||
addCsChoose();
|
||
addCsUnChoose();
|
||
});
|
||
}
|
||
});
|
||
};
|
||
//添加选中社区
|
||
const addCsChoose = () => {
|
||
chooseCsList.value.map((item, index) => {
|
||
sqname.value = item.name;
|
||
let fillColor = "blue";
|
||
//地区的坐标范围
|
||
let points = [];
|
||
item.point[0].map((p) => points.push(new BMapGL.Point(...p)));
|
||
if (points.length) {
|
||
//创建面
|
||
cs_choose_arr.value[index] = new BMapGL.Polygon(points, {
|
||
strokeColor: fillColor,
|
||
strokeWeight: 2,
|
||
strokeOpacity: 0.8,
|
||
fillColor: fillColor,
|
||
fillOpacity: 0.4,
|
||
name: item.name,
|
||
zIndex: 99,
|
||
});
|
||
map.addOverlay(cs_choose_arr.value[index]);
|
||
}
|
||
});
|
||
};
|
||
//添加未选中社区
|
||
const addCsUnChoose = () => {
|
||
unChooseList.value.map((item, index) => {
|
||
let fillColor = "RGBA(125, 140, 154, 1)";
|
||
//地区的坐标范围
|
||
let points = [];
|
||
item.point[0].map((p) => points.push(new BMapGL.Point(...p)));
|
||
if (points.length) {
|
||
//创建面
|
||
cs_un_choose_arr.value[index] = new BMapGL.Polygon(points, {
|
||
strokeColor: fillColor,
|
||
strokeWeight: 2,
|
||
strokeOpacity: 0.8,
|
||
fillColor: fillColor,
|
||
fillOpacity: 0.5,
|
||
name: item.name,
|
||
zIndex: 99,
|
||
});
|
||
map.addOverlay(cs_un_choose_arr.value[index]);
|
||
cs_un_choose_arr.value[index].addEventListener("click", () => {
|
||
title_choose.value = title_choose.value.slice(
|
||
0,
|
||
-(cfCs.value.length + 1)
|
||
);
|
||
|
||
cfCs.value = item.name;
|
||
title_choose.value = title_choose.value + `>${cfCs.value}`;
|
||
|
||
sfdd.value = true;
|
||
|
||
cs_dd_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(cs_dd_arr.value[index]);
|
||
});
|
||
cs_un_choose_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(cs_un_choose_arr.value[index]);
|
||
});
|
||
cs_choose_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(cs_choose_arr.value[index]);
|
||
});
|
||
chooseCsList.value.length = 0;
|
||
unChooseList.value.length = 0;
|
||
cs_dd_arr.value = [];
|
||
xuanzhongCs.value = [];
|
||
xkzCenter.forEach((a, b) => {
|
||
if (a.name == item.name) {
|
||
cs_dd_arr.value.push(a);
|
||
xuanzhongCs.value.push(a);
|
||
}
|
||
});
|
||
xkzDk.forEach((itemm, indexx) => {
|
||
if (itemm.name == item.name) {
|
||
chooseCsList.value.push(itemm);
|
||
} else {
|
||
unChooseList.value.push(itemm);
|
||
}
|
||
});
|
||
cs_un_choose_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(cs_qk_arr.value[index]);
|
||
});
|
||
if (choose.value.person == "") {
|
||
cs_dd_arr.value.map((item, index) => {
|
||
DGcreateCs(item, index);
|
||
});
|
||
} else {
|
||
cs_dd_arr.value.map((item, index) => {
|
||
DGcreateCs2(item, index);
|
||
});
|
||
}
|
||
getDatas2(cfJd.value, choose.value.person, cfCs.value);
|
||
addCsChoose();
|
||
addCsUnChoose();
|
||
});
|
||
}
|
||
});
|
||
};
|
||
// 添加地图上的街道名
|
||
|
||
const createCustomOverlayJd = (polygon, indexx) => {
|
||
function createLabelDOM() {
|
||
var content = document.createElement("div");
|
||
content.style.display = "flex";
|
||
content.style.flexDirection = "column";
|
||
content.style.alignItems = "center";
|
||
content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
|
||
content.style.height = "20px";
|
||
content.style.width = "20px";
|
||
var div = document.createElement("div");
|
||
div.style.color = "#333";
|
||
div.style.whiteSpace = "nowrap";
|
||
div.style.MozUserSelect = "none";
|
||
div.style.display = "flex";
|
||
div.style.justifyContent = "center";
|
||
div.style.alignItems = "center";
|
||
div.style.cursor = "pointer";
|
||
div.setAttribute("name", this.properties.title);
|
||
|
||
var title = document.createElement("div");
|
||
title.style.fontSize = "10px";
|
||
title.style.fontWeight = "600";
|
||
title.style.color = "#000000";
|
||
div.appendChild(title);
|
||
title.appendChild(document.createTextNode(this.properties.title));
|
||
content.appendChild(div);
|
||
return content;
|
||
}
|
||
jdm_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
|
||
point: new BMapGL.Point(...polygon.center),
|
||
opacity: 0.5,
|
||
offsetY: -10,
|
||
properties: {
|
||
title: polygon.name,
|
||
type: "customOverlay",
|
||
},
|
||
});
|
||
map.addOverlay(jdm_arr.value[indexx]);
|
||
};
|
||
// 添加地图上的街道名+(人数,标签)
|
||
const createCustomOverlayJd2 = (polygon, indexx) => {
|
||
function createLabelDOM() {
|
||
var content = document.createElement("div");
|
||
content.style.display = "flex";
|
||
content.style.flexDirection = "column";
|
||
content.style.alignItems = "center";
|
||
content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
|
||
content.style.height = "30px";
|
||
content.style.width = "30px";
|
||
var div = document.createElement("div");
|
||
div.style.color = "#333";
|
||
div.style.whiteSpace = "nowrap";
|
||
div.style.MozUserSelect = "none";
|
||
div.style.display = "flex";
|
||
div.style.flexDirection = "column";
|
||
div.style.justifyContent = "center";
|
||
div.style.alignItems = "center";
|
||
div.style.cursor = "pointer";
|
||
div.setAttribute("name", this.properties.title);
|
||
|
||
var title = document.createElement("div");
|
||
title.style.fontSize = "10px";
|
||
title.style.fontWeight = "600";
|
||
title.style.color = "#000000";
|
||
div.appendChild(title);
|
||
title.appendChild(document.createTextNode(this.properties.title));
|
||
content.appendChild(div);
|
||
var number = document.createElement("div");
|
||
number.style.fontSize = "9px";
|
||
number.style.fontWeight = "600";
|
||
number.style.color = "#FEFF6C";
|
||
number.style.textShadow = "0px 2px 4px rgba(0,0,0,0.5)";
|
||
div.appendChild(number);
|
||
number.appendChild(document.createTextNode(this.properties.number));
|
||
content.appendChild(div);
|
||
div.onclick = function () {
|
||
let jdCenter = [];
|
||
if (polygon.name == "溪口镇") {
|
||
title_choose.value = title_choose.value + `>${polygon.name}`;
|
||
loadCs();
|
||
addPolygonCountyCs();
|
||
mapTownCount.map((item) => {
|
||
if (item.name == "溪口镇") {
|
||
jdCenter = item.center;
|
||
}
|
||
});
|
||
addCs2();
|
||
goMapCenter(jdCenter, 14);
|
||
}
|
||
};
|
||
return content;
|
||
}
|
||
jdm_number_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
|
||
point: new BMapGL.Point(...polygon.center),
|
||
opacity: 0.5,
|
||
offsetY: 0,
|
||
properties: {
|
||
title: polygon.name,
|
||
number: polygon.number,
|
||
type: "customOverlay",
|
||
},
|
||
});
|
||
map.addOverlay(jdm_number_arr.value[indexx]);
|
||
};
|
||
//创建村社
|
||
const addCs = () => {
|
||
xkzCenter.map((item, index) => {
|
||
createCs(item, index);
|
||
});
|
||
};
|
||
//创建村社(人数,标签)
|
||
const addCs2 = () => {
|
||
xkzCenter.map((item, index) => {
|
||
createCs2(item, index);
|
||
});
|
||
};
|
||
//添加村社+(人数,标签)
|
||
const createCs2 = (polygon, indexx) => {
|
||
function createLabelDOM() {
|
||
var content = document.createElement("div");
|
||
content.style.display = "flex";
|
||
content.style.flexDirection = "column";
|
||
content.style.alignItems = "center";
|
||
content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
|
||
content.style.height = "60px";
|
||
content.style.width = "60px";
|
||
var div = document.createElement("div");
|
||
div.style.color = "#333";
|
||
div.style.whiteSpace = "nowrap";
|
||
div.style.MozUserSelect = "none";
|
||
div.style.display = "flex";
|
||
div.style.justifyContent = "space-between";
|
||
div.style.alignItems = "center";
|
||
div.style.cursor = "pointer";
|
||
div.style.padding = "5px";
|
||
div.style.minWidth = "90px";
|
||
div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
|
||
div.style.transform = "translateY(50px)";
|
||
div.setAttribute("name", this.properties.title);
|
||
|
||
var title = document.createElement("div");
|
||
title.style.fontSize = "10px";
|
||
title.style.fontWeight = "600";
|
||
title.style.color = "#000000";
|
||
div.appendChild(title);
|
||
title.appendChild(document.createTextNode(this.properties.title));
|
||
content.appendChild(div);
|
||
|
||
var number = document.createElement("div");
|
||
number.style.fontSize = "10px";
|
||
number.style.fontWeight = "600";
|
||
number.style.color = "black";
|
||
div.appendChild(number);
|
||
number.appendChild(document.createTextNode(this.properties.number));
|
||
// content.appendChild(div);
|
||
let img2 = document.createElement("img");
|
||
img2.style.width = "20px";
|
||
img2.style.height = "26px";
|
||
img2.src = this.properties.imgSrc2;
|
||
|
||
content.appendChild(div);
|
||
content.appendChild(img2);
|
||
return content;
|
||
}
|
||
|
||
cs_number_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
|
||
point: new BMapGL.Point(...polygon.center),
|
||
opacity: 0.5,
|
||
offsetY: 0,
|
||
properties: {
|
||
title: polygon.name,
|
||
number: polygon.number,
|
||
imgSrc2: dwd,
|
||
type: "customOverlay",
|
||
},
|
||
});
|
||
map.addOverlay(cs_number_name_arr.value[indexx]);
|
||
};
|
||
//添加村社
|
||
const createCs = (polygon, indexx) => {
|
||
function createLabelDOM() {
|
||
var content = document.createElement("div");
|
||
content.style.display = "flex";
|
||
content.style.flexDirection = "column";
|
||
content.style.alignItems = "center";
|
||
content.style.height = "60px";
|
||
content.style.width = "60px";
|
||
content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
|
||
|
||
var div = document.createElement("div");
|
||
div.style.color = "#333";
|
||
div.style.whiteSpace = "nowrap";
|
||
div.style.MozUserSelect = "none";
|
||
div.style.display = "flex";
|
||
div.style.justifyContent = "center";
|
||
div.style.alignItems = "center";
|
||
div.style.cursor = "pointer";
|
||
div.style.padding = "5px";
|
||
div.style.minWidth = "60px";
|
||
div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
|
||
div.style.transform = "translateY(50px)";
|
||
div.setAttribute("name", this.properties.title);
|
||
|
||
var title = document.createElement("div");
|
||
title.style.fontSize = "10px";
|
||
title.style.fontWeight = "600";
|
||
title.style.color = "#000000";
|
||
div.appendChild(title);
|
||
title.appendChild(document.createTextNode(this.properties.title));
|
||
content.appendChild(div);
|
||
let img2 = document.createElement("img");
|
||
img2.style.width = "20px";
|
||
img2.style.height = "26px";
|
||
img2.src = this.properties.imgSrc2;
|
||
|
||
content.appendChild(div);
|
||
content.appendChild(img2);
|
||
return content;
|
||
}
|
||
cs_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
|
||
point: new BMapGL.Point(...polygon.center),
|
||
opacity: 0.5,
|
||
offsetY: 0,
|
||
properties: {
|
||
title: polygon.name,
|
||
imgSrc2: dwd,
|
||
type: "customOverlay",
|
||
},
|
||
});
|
||
map.addOverlay(cs_name_arr.value[indexx]);
|
||
};
|
||
//添加单个村社
|
||
const DGcreateCs = (polygon, indexx) => {
|
||
function createLabelDOM() {
|
||
var content = document.createElement("div");
|
||
content.style.display = "flex";
|
||
content.style.flexDirection = "column";
|
||
content.style.alignItems = "center";
|
||
content.style.height = "60px";
|
||
content.style.width = "60px";
|
||
content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
|
||
|
||
var div = document.createElement("div");
|
||
div.style.color = "#333";
|
||
div.style.whiteSpace = "nowrap";
|
||
div.style.MozUserSelect = "none";
|
||
div.style.display = "flex";
|
||
div.style.justifyContent = "center";
|
||
div.style.alignItems = "center";
|
||
div.style.cursor = "pointer";
|
||
div.style.padding = "5px";
|
||
div.style.minWidth = "60px";
|
||
div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
|
||
div.style.transform = "translateY(50px)";
|
||
div.setAttribute("name", this.properties.title);
|
||
|
||
var title = document.createElement("div");
|
||
title.style.fontSize = "10px";
|
||
title.style.fontWeight = "600";
|
||
title.style.color = "#000000";
|
||
div.appendChild(title);
|
||
title.appendChild(document.createTextNode(this.properties.title));
|
||
content.appendChild(div);
|
||
let img2 = document.createElement("img");
|
||
img2.style.width = "20px";
|
||
img2.style.height = "26px";
|
||
img2.src = this.properties.imgSrc2;
|
||
|
||
content.appendChild(div);
|
||
content.appendChild(img2);
|
||
return content;
|
||
}
|
||
cs_dd_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
|
||
point: new BMapGL.Point(...polygon.center),
|
||
opacity: 0.5,
|
||
offsetY: 0,
|
||
properties: {
|
||
title: polygon.name,
|
||
imgSrc2: dwd,
|
||
type: "customOverlay",
|
||
},
|
||
});
|
||
map.addOverlay(cs_dd_arr.value[indexx]);
|
||
};
|
||
const DGcreateCs2 = (polygon, indexx) => {
|
||
function createLabelDOM() {
|
||
var content = document.createElement("div");
|
||
content.style.display = "flex";
|
||
content.style.flexDirection = "column";
|
||
content.style.alignItems = "center";
|
||
content.style.height = "60px";
|
||
content.style.width = "60px";
|
||
content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
|
||
|
||
var div = document.createElement("div");
|
||
div.style.color = "#333";
|
||
div.style.whiteSpace = "nowrap";
|
||
div.style.MozUserSelect = "none";
|
||
div.style.display = "flex";
|
||
div.style.justifyContent = "space-between";
|
||
div.style.alignItems = "center";
|
||
div.style.cursor = "pointer";
|
||
div.style.padding = "5px";
|
||
div.style.minWidth = "90px";
|
||
div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
|
||
div.style.transform = "translateY(50px)";
|
||
div.setAttribute("name", this.properties.title);
|
||
|
||
var title = document.createElement("div");
|
||
title.style.fontSize = "10px";
|
||
title.style.fontWeight = "600";
|
||
title.style.color = "#000000";
|
||
div.appendChild(title);
|
||
title.appendChild(document.createTextNode(this.properties.title));
|
||
content.appendChild(div);
|
||
|
||
var number = document.createElement("div");
|
||
number.style.fontSize = "10px";
|
||
number.style.fontWeight = "600";
|
||
number.style.color = "black";
|
||
div.appendChild(number);
|
||
number.appendChild(document.createTextNode(this.properties.number));
|
||
content.appendChild(div);
|
||
let img2 = document.createElement("img");
|
||
img2.style.width = "20px";
|
||
img2.style.height = "26px";
|
||
img2.src = this.properties.imgSrc2;
|
||
|
||
content.appendChild(div);
|
||
content.appendChild(img2);
|
||
return content;
|
||
}
|
||
cs_dd_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
|
||
point: new BMapGL.Point(...polygon.center),
|
||
opacity: 0.5,
|
||
offsetY: 0,
|
||
properties: {
|
||
title: polygon.name,
|
||
number: polygon.number,
|
||
imgSrc2: dwd,
|
||
type: "customOverlay",
|
||
},
|
||
});
|
||
map.addOverlay(cs_dd_arr.value[indexx]);
|
||
};
|
||
//创建公共服务圈
|
||
const addggfwq = () => {
|
||
fwqList.value.map((item, index) => {
|
||
createCustomOverlay(item, index);
|
||
});
|
||
};
|
||
// 添加公共服务圈的图标
|
||
const createCustomOverlay = (polygon, indexx) => {
|
||
function createLabelDOM() {
|
||
var content = document.createElement("div");
|
||
content.style.display = "flex";
|
||
content.style.flexDirection = "column";
|
||
content.style.alignItems = "center";
|
||
content.style.height = "40px";
|
||
content.style.width = "40px";
|
||
content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
|
||
|
||
var div = document.createElement("div");
|
||
div.style.color = "#ddd";
|
||
div.style.padding = `${polygon.padding}`;
|
||
div.style.whiteSpace = "nowrap";
|
||
div.style.MozUserSelect = "none";
|
||
div.style.fontSize = "12px";
|
||
div.style.borderRadius = "10px";
|
||
div.style.display = "flex";
|
||
div.style.justifyContent = "center";
|
||
div.style.alignItems = "center";
|
||
div.style.background = `url(${polygon.img}) no-repeat 0/100% 100%`;
|
||
div.style.cursor = "pointer";
|
||
div.style.transform = `translate(${polygon.x}px,${polygon.y}px)`;
|
||
div.setAttribute("name", this.properties.title);
|
||
|
||
var title = document.createElement("div");
|
||
title.style.fontSize = "14px";
|
||
title.style.fontWeight = "700";
|
||
title.style.marginLeft = "0px";
|
||
title.style.color = `${polygon.textColor}`;
|
||
div.appendChild(title);
|
||
title.appendChild(document.createTextNode(this.properties.title));
|
||
|
||
let img2 = document.createElement("img");
|
||
img2.style.width = "20px";
|
||
img2.style.height = "20px";
|
||
img2.src = this.properties.imgSrc2;
|
||
|
||
content.appendChild(div);
|
||
content.appendChild(img2);
|
||
|
||
// div.onclick = function () {
|
||
// addPolygonTown(this.getAttribute('name'))
|
||
// removeCustomOverlay()
|
||
// addStage(this.getAttribute('name'))
|
||
// state.mapStatus = 1
|
||
// }
|
||
|
||
return content;
|
||
}
|
||
fwq_list_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
|
||
point: new BMapGL.Point(...polygon.point),
|
||
opacity: 0.5,
|
||
offsetY: 0,
|
||
properties: {
|
||
title: polygon.name,
|
||
imgSrc2: polygon.img2,
|
||
type: "customOverlay",
|
||
},
|
||
});
|
||
// var labelopts = {
|
||
// position: new BMapGL.Point(polygon.point[0], polygon.point[1]), // 指定文本标注所在的地理位置
|
||
// offset: new BMapGL.Size(0, -97), // 设置文本偏移量
|
||
// };
|
||
// var label = new BMapGL.Label(polygon.name, labelopts);
|
||
// label.setStyle({
|
||
// color: "#fff",
|
||
// borderRadius: "1px",
|
||
// padding: "5px 13px",
|
||
// // background: `url(${b1s}) no-repeat 0/100% 100%`,
|
||
// fontSize: "15px",
|
||
// lineHeight: "20px",
|
||
// border: "0",
|
||
// transform: "translateX(-50%)",
|
||
// });
|
||
map.addOverlay(fwq_list_arr.value[indexx]);
|
||
};
|
||
|
||
//地图中点
|
||
const goMapCenter = (point, zoom) => {
|
||
map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom);
|
||
};
|
||
const removeAllPolygon = (e) => {
|
||
let allOverlay = map.getOverlays();
|
||
for (let i = 0; i < allOverlay.length; i++) {
|
||
map.removeOverlay(allOverlay[i]);
|
||
}
|
||
// if (e == "fwq") {
|
||
// addPolygonCounty();
|
||
// nextTick(() => {
|
||
// addJd();
|
||
// });
|
||
// } else {
|
||
// addPolygonCounty();
|
||
// nextTick(() => {
|
||
// addJd2();
|
||
// });
|
||
// }
|
||
};
|
||
//选项设置
|
||
//选中
|
||
const chooseArr = ref([]);
|
||
|
||
const choose = ref({
|
||
person: "",
|
||
bq: 9999,
|
||
fwq: 9999,
|
||
yaosu: 9999,
|
||
});
|
||
const changeRs = (id) => {
|
||
if (choose.value.person == id) {
|
||
choose.value.person = "";
|
||
jdm_number_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(jdm_number_arr.value[index]);
|
||
});
|
||
addJd();
|
||
} else {
|
||
choose.value.person = id;
|
||
jdm_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(jdm_arr.value[index]);
|
||
});
|
||
jdm_number_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(jdm_number_arr.value[index]);
|
||
});
|
||
addJd2();
|
||
}
|
||
};
|
||
const changebq = (id) => {
|
||
if (choose.value.person == id) {
|
||
choose.value.person = "";
|
||
jdm_number_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(jdm_number_arr.value[index]);
|
||
});
|
||
// addJd();
|
||
} else {
|
||
choose.value.person = id;
|
||
jdm_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(jdm_arr.value[index]);
|
||
});
|
||
jdm_number_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(jdm_number_arr.value[index]);
|
||
});
|
||
// addJd2();
|
||
}
|
||
// choose.value.person = id;
|
||
};
|
||
const changeFwq = (id, list, center) => {
|
||
if (choose.value.fwq == id) {
|
||
// chooseArr.value = chooseArr.value.filter((item) => item !== "fwq");
|
||
choose.value.fwq = 9999;
|
||
// removeAllPolygon("fwq");
|
||
fwq_list_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(fwq_list_arr.value[index]);
|
||
});
|
||
// xuanran();
|
||
} else {
|
||
// chooseArr.value.push("fwq");
|
||
choose.value.fwq = id;
|
||
fwqList.value = list;
|
||
// removeAllPolygon("fwq");
|
||
addggfwq();
|
||
// xuanran();
|
||
setTimeout(() => {
|
||
goMapCenter(center, 17);
|
||
}, 500);
|
||
|
||
// addggfwq()
|
||
}
|
||
|
||
// choose.value.fwq = id;
|
||
// removeAllPolygon("fwq");
|
||
// fwqList.value = list;
|
||
// goMapCenter(center, 17);
|
||
// fwqList.value.map((item) => {
|
||
// createCustomOverlay(item);
|
||
// });
|
||
};
|
||
const changeys = (id) => {
|
||
choose.value.yaosu = id;
|
||
};
|
||
//人口数
|
||
const personTotal = ref([
|
||
{
|
||
id: 0,
|
||
name: "总人口",
|
||
value: "1724114",
|
||
ages: "总人口",
|
||
age: "1000",
|
||
},
|
||
{
|
||
id: 1,
|
||
name: "0岁",
|
||
value: "26737",
|
||
ages: "0岁",
|
||
age: "1000",
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "1岁",
|
||
value: "26737",
|
||
ages: "1岁",
|
||
age: "1000",
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "2岁",
|
||
value: "26737",
|
||
ages: "2岁",
|
||
age: "1000",
|
||
},
|
||
{
|
||
id: 4,
|
||
name: "3岁",
|
||
value: "26737",
|
||
ages: "3岁",
|
||
age: "1000",
|
||
},
|
||
|
||
{
|
||
id: 5,
|
||
name: "4岁",
|
||
value: "26737",
|
||
ages: "4岁",
|
||
age: "1000",
|
||
},
|
||
{
|
||
id: 6,
|
||
name: "5岁",
|
||
value: "26737",
|
||
ages: "5岁",
|
||
age: "1000",
|
||
},
|
||
{
|
||
id: 7,
|
||
name: "6岁",
|
||
value: "26737",
|
||
ages: "6岁",
|
||
age: "1000",
|
||
},
|
||
{
|
||
id: 8,
|
||
name: "7岁",
|
||
value: "26737",
|
||
ages: "7岁",
|
||
age: "1000",
|
||
},
|
||
{
|
||
id: 9,
|
||
name: "8岁",
|
||
value: "26737",
|
||
ages: "8岁",
|
||
age: "1000",
|
||
},
|
||
{
|
||
id: 10,
|
||
name: "9岁",
|
||
value: "26737",
|
||
ages: "9岁",
|
||
age: "1000",
|
||
},
|
||
{
|
||
id: 11,
|
||
name: "10岁",
|
||
value: "26737",
|
||
ages: "10岁",
|
||
age: "1000",
|
||
},
|
||
{
|
||
id: 12,
|
||
name: "11岁",
|
||
value: "26737",
|
||
ages: "11岁",
|
||
age: "1000",
|
||
},
|
||
{
|
||
id: 13,
|
||
name: "12岁",
|
||
value: "26737",
|
||
ages: "12岁",
|
||
age: "1000",
|
||
},
|
||
]);
|
||
|
||
//特殊标签
|
||
const tsbqTotal = ref([
|
||
{
|
||
id: 10,
|
||
name: "退役军人",
|
||
value: "26737",
|
||
},
|
||
{
|
||
id: 20,
|
||
name: "留守",
|
||
value: "26737",
|
||
},
|
||
{
|
||
id: 30,
|
||
name: "困境儿童",
|
||
value: "26737",
|
||
},
|
||
{
|
||
id: 40,
|
||
name: "特困",
|
||
value: "26737",
|
||
},
|
||
{
|
||
id: 0,
|
||
name: "低边",
|
||
value: "26737",
|
||
},
|
||
{
|
||
id: 1,
|
||
name: "低保",
|
||
value: "26737",
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "高血压",
|
||
value: "26737",
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "糖尿病",
|
||
value: "26737",
|
||
},
|
||
{
|
||
id: 4,
|
||
name: "残疾人",
|
||
value: "26737",
|
||
},
|
||
]);
|
||
|
||
//基本公共服务圈
|
||
|
||
const jbfwqTotal = ref([
|
||
{
|
||
id: 0,
|
||
name: "东华街道",
|
||
child: [
|
||
{
|
||
id: 100,
|
||
name: "上圩头村",
|
||
},
|
||
{
|
||
id: 200,
|
||
name: "官村",
|
||
},
|
||
{
|
||
id: 300,
|
||
name: "下杨",
|
||
},
|
||
{
|
||
id: 400,
|
||
name: "灵江社区",
|
||
},
|
||
{
|
||
id: 500,
|
||
name: "文成社区",
|
||
},
|
||
{
|
||
id: 600,
|
||
name: "子鸣社区",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: 1,
|
||
name: "社阳乡",
|
||
child: [
|
||
{
|
||
id: 11,
|
||
name: "社阳村",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "小南海镇",
|
||
child: [
|
||
{
|
||
id: 21,
|
||
name: "茶圩里村",
|
||
},
|
||
{
|
||
id: 22,
|
||
name: "团石村",
|
||
},
|
||
{
|
||
id: 23,
|
||
name: "箬塘",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "庙下乡",
|
||
child: [
|
||
{
|
||
id: 31,
|
||
name: "庙下村",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: 4,
|
||
name: "溪口镇",
|
||
child: [
|
||
{
|
||
id: 41,
|
||
name: "新溪社区",
|
||
center: [119.1845892, 28.8540481],
|
||
fwqList: [
|
||
{
|
||
name: "溪口幼儿园",
|
||
point: [119.1856806, 28.8509359],
|
||
bgColor: "#00b050",
|
||
img: fwqbg1,
|
||
img2: b2,
|
||
x: 33,
|
||
y: 0,
|
||
textColor: "#fff",
|
||
|
||
padding: "4px 8px 10px",
|
||
},
|
||
{
|
||
name: "衢州学院附属幼儿园",
|
||
point: [119.182056, 28.8566857],
|
||
bgColor: "#00b050",
|
||
img: fwqbg1,
|
||
img2: b2,
|
||
x: 55,
|
||
y: 0,
|
||
textColor: "#fff",
|
||
padding: "4px 8px 10px",
|
||
},
|
||
{
|
||
name: "溪口中银小学",
|
||
point: [119.1845353, 28.8584533],
|
||
bgColor: "#00b050",
|
||
img: fwqbg1,
|
||
img2: b2,
|
||
x: 38,
|
||
y: 0,
|
||
textColor: "#fff",
|
||
padding: "4px 8px 10px",
|
||
},
|
||
{
|
||
name: "溪口初中",
|
||
point: [119.180978, 28.8525691],
|
||
bgColor: "#00b050",
|
||
img: fwqbg1,
|
||
img2: b2,
|
||
x: 33,
|
||
y: 0,
|
||
textColor: "#fff",
|
||
padding: "4px 8px 10px",
|
||
},
|
||
{
|
||
name: "居家养老中心",
|
||
point: [119.186287, 28.8491049],
|
||
bgColor: "#f4c243",
|
||
img: fwqbg5,
|
||
img2: b1,
|
||
x: 38,
|
||
y: 0,
|
||
textColor: "#fff",
|
||
padding: "4px 8px 10px",
|
||
},
|
||
{
|
||
name: "共享食堂",
|
||
point: [119.184706, 28.8563179],
|
||
bgColor: "#f4c243",
|
||
img: fwqbg5,
|
||
img2: b1,
|
||
x: 33,
|
||
y: 0,
|
||
textColor: "#fff",
|
||
padding: "4px 8px 10px",
|
||
},
|
||
{
|
||
name: "老年活动中心",
|
||
point: [119.1839065, 28.8566106],
|
||
bgColor: "#f4c243",
|
||
img: fwqbg5,
|
||
img2: b1,
|
||
x: 38,
|
||
y: 0,
|
||
textColor: "#fff",
|
||
padding: "4px 8px 10px",
|
||
},
|
||
{
|
||
name: "残疾人之家",
|
||
point: [119.1862825, 28.8491207],
|
||
bgColor: "#f4c243",
|
||
img: fwqbg5,
|
||
img2: b1,
|
||
x: 35,
|
||
y: 0,
|
||
textColor: "#fff",
|
||
padding: "4px 8px 10px",
|
||
},
|
||
{
|
||
name: "智慧篮球场",
|
||
point: [119.1839873, 28.8560886],
|
||
bgColor: "#00b0f0",
|
||
img: fwqbg2,
|
||
img2: b3,
|
||
x: 34,
|
||
y: 50,
|
||
textColor: "#fff",
|
||
padding: "8px 8px 2px",
|
||
},
|
||
{
|
||
name: "慢行步道",
|
||
point: [119.1843107, 28.8510743],
|
||
bgColor: "#00b0f0",
|
||
img: fwqbg2,
|
||
img2: b3,
|
||
x: 26,
|
||
y: 50,
|
||
textColor: "#fff",
|
||
padding: "8px 8px 2px",
|
||
},
|
||
{
|
||
name: "文化礼堂",
|
||
point: [119.1845532, 28.8562072],
|
||
bgColor: "#a1ce63",
|
||
img: fwqbg6,
|
||
img2: b4,
|
||
x: 33,
|
||
y: 0,
|
||
textColor: "#79B72B",
|
||
padding: "4px 8px 10px",
|
||
},
|
||
{
|
||
name: "综合文化站",
|
||
point: [119.1845982, 28.8482348],
|
||
bgColor: "#a1ce63",
|
||
img: fwqbg6,
|
||
img2: b4,
|
||
x: 35,
|
||
y: 0,
|
||
textColor: "#79B72B",
|
||
padding: "4px 8px 10px",
|
||
},
|
||
{
|
||
name: "共享菜园",
|
||
point: [119.1834393, 28.8559858],
|
||
bgColor: "#a1ce63",
|
||
img: fwqbg6,
|
||
img2: b4,
|
||
x: 33,
|
||
y: 0,
|
||
textColor: "#79B72B",
|
||
padding: "4px 8px 2px",
|
||
},
|
||
{
|
||
name: "零工市场",
|
||
point: [119.1811487, 28.8614348],
|
||
bgColor: "#a1ce63",
|
||
img: fwqbg6,
|
||
img2: b4,
|
||
x: 33,
|
||
y: 0,
|
||
textColor: "#79B72B",
|
||
padding: "4px 8px 10px",
|
||
},
|
||
{
|
||
name: "溪口中心医院",
|
||
point: [119.1839334, 28.8516437],
|
||
bgColor: "#0070c0",
|
||
img: fwqbg3,
|
||
img2: b5,
|
||
x: 10,
|
||
y: 50,
|
||
textColor: "#fff",
|
||
padding: "8px 8px 2px",
|
||
},
|
||
{
|
||
name: "溪口菜市场",
|
||
point: [119.1848317, 28.8544673],
|
||
bgColor: "#184e32",
|
||
img: fwqbg4,
|
||
img2: b6,
|
||
x: -24,
|
||
y: 50,
|
||
textColor: "#fff",
|
||
padding: "8px 8px 2px",
|
||
},
|
||
{
|
||
name: "大型超市",
|
||
point: [119.1845892, 28.8540481],
|
||
bgColor: "#184e32",
|
||
img: fwqbg4,
|
||
img2: b6,
|
||
x: -24,
|
||
y: 50,
|
||
textColor: "#fff",
|
||
padding: "8px 8px 2px",
|
||
},
|
||
{
|
||
name: "智慧停车场",
|
||
point: [119.1865654, 28.8555824],
|
||
bgColor: "#184e32",
|
||
img: fwqbg4,
|
||
img2: b6,
|
||
x: -28,
|
||
y: 50,
|
||
textColor: "#fff",
|
||
padding: "8px 8px 2px",
|
||
},
|
||
{
|
||
name: "溪口镇便民服务中心",
|
||
point: [119.1838436, 28.8565473],
|
||
bgColor: "#184e32",
|
||
img: fwqbg4,
|
||
img2: b6,
|
||
x: -40,
|
||
y: 50,
|
||
textColor: "#fff",
|
||
padding: "8px 8px 2px",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: 42,
|
||
name: "石角村",
|
||
},
|
||
{
|
||
id: 43,
|
||
name: "红罗村",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: 5,
|
||
name: "罗家乡",
|
||
child: [
|
||
{
|
||
id: 51,
|
||
name: "罗家村",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: 6,
|
||
name: "模环乡",
|
||
child: [
|
||
{
|
||
id: 61,
|
||
name: "模环村",
|
||
},
|
||
{
|
||
id: 62,
|
||
name: "金星社区",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: 7,
|
||
name: "横山镇",
|
||
child: [
|
||
{
|
||
id: 71,
|
||
name: "志棠村",
|
||
},
|
||
{
|
||
id: 72,
|
||
name: "横山集镇",
|
||
},
|
||
{
|
||
id: 73,
|
||
name: "后徐",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: 8,
|
||
name: "石佛乡",
|
||
child: [
|
||
{
|
||
id: 81,
|
||
name: "三和村",
|
||
},
|
||
{
|
||
id: 82,
|
||
name: "石佛村",
|
||
},
|
||
{
|
||
id: 83,
|
||
name: "三门源村",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: 9,
|
||
name: "詹家镇",
|
||
child: [
|
||
{
|
||
id: 91,
|
||
name: "芝江",
|
||
},
|
||
{
|
||
id: 92,
|
||
name: "马叶",
|
||
},
|
||
{
|
||
id: 93,
|
||
name: "詹家",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: 10,
|
||
name: "龙洲街道",
|
||
child: [
|
||
{
|
||
id: 101,
|
||
name: "官潭村",
|
||
},
|
||
{
|
||
id: 102,
|
||
name: "田铺村",
|
||
},
|
||
{
|
||
id: 103,
|
||
name: "半爿月村",
|
||
},
|
||
{
|
||
id: 104,
|
||
name: "寺后村",
|
||
},
|
||
{
|
||
id: 105,
|
||
name: "清廉社区",
|
||
},
|
||
{
|
||
id: 106,
|
||
name: "莲湖社区",
|
||
},
|
||
{
|
||
id: 107,
|
||
name: "河西街社区",
|
||
},
|
||
{
|
||
id: 108,
|
||
name: "阳光社区",
|
||
},
|
||
{
|
||
id: 109,
|
||
name: "翠光社区",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: 11,
|
||
name: "湖镇镇",
|
||
child: [
|
||
{
|
||
id: 111,
|
||
name: "新光村",
|
||
},
|
||
{
|
||
id: 112,
|
||
name: "七都村",
|
||
},
|
||
{
|
||
id: 113,
|
||
name: "下库村",
|
||
},
|
||
{
|
||
id: 114,
|
||
name: "下田畈村",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: 12,
|
||
name: "塔石镇",
|
||
child: [
|
||
{
|
||
id: 121,
|
||
name: "塔石",
|
||
},
|
||
{
|
||
id: 122,
|
||
name: "泽随",
|
||
},
|
||
{
|
||
id: 123,
|
||
name: "雅村",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: 13,
|
||
name: "沐尘畲族乡",
|
||
child: [
|
||
{
|
||
id: 131,
|
||
name: "沐尘村",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
id: 14,
|
||
name: "大街乡",
|
||
child: [
|
||
{
|
||
id: 141,
|
||
name: "大街村",
|
||
},
|
||
],
|
||
},
|
||
]); //存放地图上服务圈数据
|
||
const fwqList = ref([]);
|
||
//资源要素
|
||
const yaosuTotal = ref([
|
||
{
|
||
id: 0,
|
||
name: "体育场所",
|
||
img: j0,
|
||
wz: false,
|
||
},
|
||
|
||
{
|
||
id: 1,
|
||
name: "幼儿园",
|
||
img: j1,
|
||
wz: false,
|
||
},
|
||
{
|
||
id: 2,
|
||
name: "小学",
|
||
img: j2,
|
||
wz: false,
|
||
},
|
||
{
|
||
id: 3,
|
||
name: "初中",
|
||
img: j3,
|
||
wz: false,
|
||
},
|
||
{
|
||
id: 4,
|
||
name: "高中",
|
||
img: j4,
|
||
wz: false,
|
||
},
|
||
{
|
||
id: 5,
|
||
name: "医院",
|
||
img: j5,
|
||
wz: false,
|
||
},
|
||
{
|
||
id: 6,
|
||
name: "南孔书院",
|
||
img: j6,
|
||
wz: false,
|
||
},
|
||
{
|
||
id: 7,
|
||
name: "养老机构",
|
||
img: j7,
|
||
wz: false,
|
||
},
|
||
{
|
||
id: 8,
|
||
name: "汽车充电桩",
|
||
img: j8,
|
||
wz: true,
|
||
},
|
||
{
|
||
id: 9,
|
||
name: "卫生服务中心",
|
||
img: j9,
|
||
wz: true,
|
||
},
|
||
{
|
||
id: 10,
|
||
name: "AED",
|
||
img: j10,
|
||
wz: true,
|
||
},
|
||
]);
|
||
const buten = async (item) => {
|
||
getData(item.id, item.age);
|
||
getDatas("溪口镇", item.age);
|
||
};
|
||
const buten2 = async (item) => {
|
||
getDataBq(item.id, item.age);
|
||
// getDatas("溪口镇", item.age);
|
||
};
|
||
//获取人口数
|
||
const getData = async (i, e) => {
|
||
await http
|
||
.get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ""}`)
|
||
.then((res) => {
|
||
if (res.code == 200) {
|
||
if (cfJd.value == "") {
|
||
personTotal.value = [
|
||
{
|
||
id: "0",
|
||
ages: "总人口",
|
||
age: "",
|
||
value: "res.data.total",
|
||
},
|
||
];
|
||
personTotal.value[0].rksl = res.data.total;
|
||
personTotal.value[0].ages = "总人口";
|
||
res.data.age.forEach((item, index) => {
|
||
personTotal.value.push({
|
||
id: index + 1,
|
||
rksl: item.rksl,
|
||
age: item.age + "",
|
||
ages: item.age + "岁",
|
||
});
|
||
});
|
||
}
|
||
// res.data.town.map((item) => {
|
||
// mapTownCount.map((items) => {
|
||
// if (item.town == items.name) {
|
||
// items.number = item.rksl;
|
||
// }
|
||
// });
|
||
// });
|
||
mapTownCount.map((item) => {
|
||
item.number = 0;
|
||
res.data.town.map((items) => {
|
||
if (items.town == item.name) {
|
||
item.number = items.rksl;
|
||
}
|
||
});
|
||
});
|
||
}
|
||
});
|
||
if (i) {
|
||
changeRs(i);
|
||
}
|
||
};
|
||
const getDatas = async (e, i) => {
|
||
await http
|
||
.get(`/api/ggfwyth/ysyzt/getCssrksl?town=${e}&age=${i || ""}`)
|
||
.then((res) => {
|
||
if (res.code == 200) {
|
||
if (cfCs.value != "") {
|
||
} else if (cfJd.value !== "") {
|
||
personTotal.value = [
|
||
{
|
||
id: "0",
|
||
ages: "总人口",
|
||
age: "",
|
||
value: "res.data.total",
|
||
},
|
||
];
|
||
personTotal.value[0].rksl = res.data.total;
|
||
personTotal.value[0].ages = "总人口";
|
||
res.data.age.forEach((item, index) => {
|
||
personTotal.value.push({
|
||
id: index + 1,
|
||
rksl: item.rksl,
|
||
age: item.age + "",
|
||
ages: item.age + "岁",
|
||
});
|
||
});
|
||
}
|
||
|
||
// res.data.committee.map((item) => {
|
||
// xkzCenter.map((items) => {
|
||
// if (item.committee == items.name) {
|
||
// items.number = item.rksl;
|
||
// }
|
||
// });
|
||
// });
|
||
xkzCenter.map((item) => {
|
||
item.number = 0;
|
||
res.data.committee.map((items) => {
|
||
if (items.committee == item.name) {
|
||
item.number = items.rksl;
|
||
}
|
||
});
|
||
});
|
||
|
||
cs_name_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(cs_name_arr.value[index]);
|
||
});
|
||
cs_number_name_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(cs_number_name_arr.value[index]);
|
||
});
|
||
|
||
if (title_choose.value == "") {
|
||
} else {
|
||
if (sfdd.value) {
|
||
if (choose.value.person == "") {
|
||
cs_dd_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(cs_dd_arr.value[index]);
|
||
});
|
||
cs_dd_arr.value = [...xuanzhongCs.value];
|
||
cs_dd_arr.value.map((item, index) => {
|
||
DGcreateCs(item, index);
|
||
});
|
||
} else {
|
||
cs_dd_arr.value.forEach((item, index) => {
|
||
map.removeOverlay(cs_dd_arr.value[index]);
|
||
});
|
||
cs_dd_arr.value = [...xuanzhongCs.value];
|
||
cs_dd_arr.value.map((item, index) => {
|
||
DGcreateCs2(item, index);
|
||
});
|
||
}
|
||
} else {
|
||
if (choose.value.person == "") {
|
||
addCs();
|
||
} else {
|
||
addCs2();
|
||
}
|
||
}
|
||
}
|
||
}
|
||
});
|
||
};
|
||
const getDatas2 = async (e, i, cs) => {
|
||
await http
|
||
.get(
|
||
`/api/ggfwyth/ysyzt/getCssrksl?town=${e}&age=${i || ""}&committee=${cs}`
|
||
)
|
||
.then((res) => {
|
||
if (res.code == 200) {
|
||
personTotal.value = [
|
||
{
|
||
id: "0",
|
||
ages: "总人口",
|
||
age: "",
|
||
value: "res.data.total",
|
||
},
|
||
];
|
||
personTotal.value[0].rksl = res.data.total;
|
||
personTotal.value[0].ages = "总人口";
|
||
res.data.age.forEach((item, index) => {
|
||
personTotal.value.push({
|
||
id: index + 1,
|
||
rksl: item.rksl,
|
||
age: item.age + "",
|
||
ages: item.age + "岁",
|
||
});
|
||
});
|
||
}
|
||
});
|
||
};
|
||
//获取特殊标签
|
||
const getDataBq = async (i, e) => {
|
||
await http
|
||
.get(`/api/ggfwyth/ysyzt/getTsbq?csq=${e || ""}&xzjd=${i || ""}`)
|
||
.then((res) => {
|
||
if (res.code == 200) {
|
||
if (cfJd.value == "") {
|
||
// personTotal.value = [
|
||
// {
|
||
// id: "0",
|
||
// ages: "总人口",
|
||
// age: "",
|
||
// value: "res.data.total",
|
||
// },
|
||
// ];
|
||
// personTotal.value[0].rksl = res.data.total;
|
||
// personTotal.value[0].ages = "总人口";
|
||
// res.data.age.forEach((item, index) => {
|
||
// personTotal.value.push({
|
||
// id: index + 1,
|
||
// rksl: item.rksl,
|
||
// age: item.age + "",
|
||
// ages: item.age + "岁",
|
||
// });
|
||
// });
|
||
tsbqTotal.value.length = 0;
|
||
for (let name in res.data) {
|
||
let idd = "";
|
||
for (let v = 0; v < tsbq_id_total.value.length; v++) {
|
||
if (tsbq_id_total.value[v].name == name) {
|
||
idd = tsbq_id_total.value[v].id;
|
||
}
|
||
}
|
||
tsbqTotal.value.push({
|
||
id: idd,
|
||
name: name,
|
||
rksl: res.data[name],
|
||
});
|
||
}
|
||
console.log(1111111111, tsbqTotal.value);
|
||
// res.data.forEach((item, index) => {
|
||
// tsbqTotal.value.push({
|
||
// id: index + 1,
|
||
// rksl: item.rksl,
|
||
// age: item.age + "",
|
||
// ages: item.age + "岁",
|
||
// });
|
||
// });
|
||
}
|
||
// mapTownCount.map((item) => {
|
||
// item.number = 0;
|
||
// res.data.town.map((items) => {
|
||
// if (items.town == item.name) {
|
||
// item.number = items.rksl;
|
||
// }
|
||
// });
|
||
// });
|
||
}
|
||
});
|
||
};
|
||
const reset_font = () => {
|
||
let width = document.documentElement.clientWidth || document.body.clientWidth;
|
||
let height =
|
||
document.documentElement.clientHeight || document.body.clientHeight;
|
||
document.querySelector(".header_content").style.transformOrigin = "top left";
|
||
document.querySelector(".header_content").style.transform =
|
||
"scale(" + width / 1920 + "," + height / 1080 + ")";
|
||
if (document.querySelector(".left")) {
|
||
document.querySelector(".left").style.transformOrigin = "bottom left";
|
||
document.querySelector(".left").style.transform =
|
||
"scale(" + width / 1920 + "," + height / 1080 + ")";
|
||
document.querySelector(".right").style.transformOrigin = "bottom right";
|
||
document.querySelector(".right").style.transform =
|
||
"scale(" + width / 1920 + "," + height / 1080 + ")";
|
||
}
|
||
};
|
||
onMounted(() => {
|
||
reset_font();
|
||
initMap();
|
||
getData();
|
||
getDataBq();
|
||
BMAP();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
::v-deep .anchorBL {
|
||
display: none;
|
||
}
|
||
|
||
.module {
|
||
display: flex;
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
margin-top: 112px;
|
||
}
|
||
|
||
#id {
|
||
z-index: 10;
|
||
}
|
||
|
||
//左侧弹框
|
||
.left {
|
||
box-sizing: border-box;
|
||
position: absolute;
|
||
left: 0;
|
||
bottom: 0;
|
||
width: 520px;
|
||
height: 960px;
|
||
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, 48, 125, 0.29) 0%,
|
||
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;
|
||
display: flex;
|
||
flex-direction: column;
|
||
z-index: 12;
|
||
overflow: hidden;
|
||
|
||
//人口数
|
||
.lyx {
|
||
.content {
|
||
box-sizing: border-box;
|
||
margin-top: 20px;
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
justify-content: space-between;
|
||
color: #ffffff;
|
||
height: 450px;
|
||
overflow: auto;
|
||
|
||
.content_item {
|
||
cursor: pointer;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 24px;
|
||
width: 48%;
|
||
height: 57px;
|
||
background-image: url(@/assets/images/map/unchoose.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.content_item:first-child {
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 24px;
|
||
width: 100%;
|
||
height: 57px;
|
||
background-image: url(@/assets/images/map/unchoose.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.content_item_name {
|
||
position: relative;
|
||
}
|
||
|
||
.content_item_name::before {
|
||
content: "";
|
||
position: absolute;
|
||
width: 3px;
|
||
height: 3px;
|
||
background: #29ffc1;
|
||
border: 3px solid rgba(0, 255, 189, 0.31);
|
||
border-radius: 6px;
|
||
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;
|
||
display: flex;
|
||
flex-flow: row wrap;
|
||
justify-content: space-between;
|
||
color: #ffffff;
|
||
height: 220px;
|
||
overflow: auto;
|
||
|
||
.content_item {
|
||
cursor: pointer;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 24px;
|
||
width: 48%;
|
||
height: 57px;
|
||
background-image: url(@/assets/images/map/unchoose.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.content_item:last-child {
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 24px;
|
||
width: 100%;
|
||
height: 57px;
|
||
background-image: url(@/assets/images/map/unchoose.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
margin-bottom: 12px;
|
||
}
|
||
|
||
.content_item_name {
|
||
position: relative;
|
||
}
|
||
|
||
.content_item_name::before {
|
||
content: "";
|
||
position: absolute;
|
||
width: 3px;
|
||
height: 3px;
|
||
background: rgb(255, 226, 41);
|
||
border: 3px solid rgba(255, 226, 41, 0.31);
|
||
border-radius: 6px;
|
||
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;
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
width: 520px;
|
||
height: 960px;
|
||
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, 48, 125, 0.29) 0%,
|
||
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;
|
||
display: flex;
|
||
flex-direction: column;
|
||
z-index: 12;
|
||
overflow: hidden;
|
||
|
||
.jbggfwq {
|
||
.jbggfwq_content {
|
||
height: 550px;
|
||
overflow: auto;
|
||
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;
|
||
border-radius: 6px;
|
||
overflow: hidden;
|
||
|
||
.jbggfwq_content_item_right_item {
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-sizing: border-box;
|
||
width: 92px;
|
||
height: 48px;
|
||
font-weight: 500;
|
||
text-align: center;
|
||
font-size: 16px;
|
||
line-height: 28px;
|
||
background: rgba(124, 151, 180, 0.8);
|
||
// padding: 10px;
|
||
margin-bottom: 4px;
|
||
position: relative;
|
||
/* 必须设置 position 属性以便伪元素定位 */
|
||
}
|
||
|
||
.jbggfwq_content_item_right_item::after {
|
||
content: "";
|
||
display: block;
|
||
width: 1px;
|
||
height: 18px;
|
||
background-color: #fff;
|
||
position: absolute;
|
||
top: 14px;
|
||
right: 0px;
|
||
}
|
||
|
||
:nth-child(4n).jbggfwq_content_item_right_item::after {
|
||
opacity: 0;
|
||
}
|
||
:last-child.jbggfwq_content_item_right_item::after {
|
||
opacity: 0;
|
||
}
|
||
|
||
.choose {
|
||
background-image: url(@/assets/images/map/choose.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.jbggfwq_content::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.zyys {
|
||
.zyys_content {
|
||
margin-top: 20px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
flex-flow: row wrap;
|
||
|
||
.zyys_content_item {
|
||
cursor: pointer;
|
||
margin-bottom: 15px;
|
||
color: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
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;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.title {
|
||
.title_name {
|
||
display: flex;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-size: 34px;
|
||
font-weight: 900;
|
||
// line-height: 44px;
|
||
letter-spacing: 4px;
|
||
margin-bottom: 15px;
|
||
background: linear-gradient(180deg, #ffffff 0%, #ffffff 40%, #00ffff 100%);
|
||
/* 使文字没有背景颜色的背景 */
|
||
background-clip: text;
|
||
/* 为了兼容性，添加渐变背景到IE */
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
|
||
span {
|
||
display: block;
|
||
font-family: YouSheBiaoTiHei;
|
||
font-size: 34px;
|
||
font-weight: 900;
|
||
// line-height: 44px;
|
||
letter-spacing: 4px;
|
||
margin-bottom: 15px;
|
||
background: linear-gradient(
|
||
180deg,
|
||
#ffffff 0%,
|
||
#ffffff 40%,
|
||
#00ffff 100%
|
||
);
|
||
/* 使文字没有背景颜色的背景 */
|
||
background-clip: text;
|
||
/* 为了兼容性，添加渐变背景到IE */
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
}
|
||
}
|
||
|
||
.title_line {
|
||
height: 4px;
|
||
width: 100%;
|
||
border-top: 1px solid #ffffff;
|
||
border-bottom: 2px dashed #ffffff;
|
||
}
|
||
}
|
||
</style>
|