- {{ itemm.jc }}
+ {{ itemm.name }}
@@ -135,17 +71,15 @@
@@ -154,28 +88,6 @@
-
-
@@ -192,12 +104,10 @@ import {
nextTick,
} from "vue";
import { ElMessage } from "element-plus";
-import tools from "@/utils/tools";
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";
-import cssj from "@/assets/json/cssj.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";
@@ -224,28 +134,27 @@ 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 AED from "@/assets/images/map/AED.png";
-import Dialog from "./dialog/dialogMapDp.vue";
-import personDetail from "./person/index.vue";
-//--------定义参数-------
-//是否打开人物详情
-const openD = ref(true);
-const message = ref({});
-//存放渲染的地块及图标的数组
-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 csqk = ref({});
-//头部标题
+
+const data = reactive({
+ serviceCircleList: [],
+ fwqCoordinates: "", //服务圈中心坐标
+ fwqCoordinates1: [], //服务圈中心坐标
+ fwqCoordinates2: [], //服务圈中心坐标
+});
+
+//删除(存放渲染的地块及图标)
+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 title_jd = ref("");
-const title_cs = ref("");
//是否单点社区
const sfdd = ref(false);
const xuanzhongCs = ref([]);
@@ -253,10 +162,194 @@ const xuanzhongCs = ref([]);
const cfJd = ref("");
//存放村社
const cfCs = ref("");
-//点击存放村社暂时
-const cfCsZs = ref("");
-//地图
-var map = null;
+//村社颜色列表
+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",
+ },
+ {
+ name: "退役军人",
+ id: "tyjr",
+ },
+ {
+ name: "困难儿童",
+ id: "kjer",
+ },
+]);
+//点击龙游县初始化
+const csh = () => {
+ // console.log(222, item.name);
+ 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();
+ getDataBq();
+};
+//选中社区
+const chooseCsList = ref([]);
+const unChooseList = ref([]);
+const sqname = ref();
+const townName = ref();
+//地图设置
+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([]);
//社区地块
@@ -339,527 +432,10 @@ const xkzCenter = reactive([
number: "50",
},
]);
-//村社颜色列表
-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",
- },
- {
- name: "退役军人",
- id: "tyjr",
- },
- {
- name: "困境儿童",
- id: "kjer",
- },
-]);
-//单选中社区区块
-const chooseCsList = ref([]);
-//单选未中社区区块
-const unChooseList = ref([]);
-const sqname = ref();
-// const townName = ref();
-//地图街道设置(存放数量)
-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 choose = ref({
- person: "",
- fwq: 9999,
- yaosu: 9999,
-});
-//人口数
-const personTotal = ref([
- {
- id: 0,
- name: "总人口",
- value: "1724114",
- ages: "总人口",
- age: "1000",
- },
-]);
-//人口数比例
-const PopulationRatio = ref([
- {
- id: 0,
- age: "1-10岁",
- progress: 10, //进度条占比
- bgColor: "rgba(246, 214, 120, 1)",
- },
- {
- id: 1,
- age: "11-20岁",
- progress: 10, //进度条占比
- bgColor: "rgba(243, 254, 128, 1)",
- },
- {
- id: 2,
- age: "21-30岁",
- progress: 10, //进度条占比
- bgColor: "rgba(164, 241, 119, 1)",
- },
- {
- id: 3,
- age: "31-40岁",
- progress: 10, //进度条占比
- bgColor: "rgba(110, 255, 201, 1)",
- },
- {
- id: 4,
- age: "41-50岁",
- progress: 10, //进度条占比
- bgColor: "rgba(105, 201, 241, 1)",
- },
- {
- id: 5,
- age: "51-60岁",
- progress: 10, //进度条占比
- bgColor: "rgba(107, 138, 244, 1)",
- },
- {
- id: 6,
- age: "61-70岁",
- progress: 10, //进度条占比
- bgColor: "rgba(161, 128, 255, 1)",
- },
- {
- id: 7,
- age: "71-80岁",
- progress: 10, //进度条占比
- bgColor: "rgba(179, 238, 147, 1)",
- },
- {
- id: 8,
- age: "81-90岁",
- progress: 10, //进度条占比
- bgColor: "rgba(190, 255, 246, 1)",
- },
- {
- id: 9,
- age: "91-100岁",
- progress: 10, //进度条占比
- bgColor: "rgba(222, 173, 98, 1)",
- },
-]);
-//特殊标签
-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 data = reactive({
- serviceCircleList: [],
- fwqCoordinates: [], //服务圈经度
- fwqCoordinates1: [], //服务圈经度
- fwqCoordinates2: [], //服务圈纬度
- zoomLevel: null, //服务圈缩放级别
-});
-//基本公共服务圈
-const jbfwqTotal = ref([]);
-const jbfwqPx = reactive([
- "龙洲街道",
- "东华街道",
- "小南海镇",
- "湖镇镇",
- "溪口镇",
- "詹家镇",
- "塔石镇",
- "横山镇",
- "模环乡",
- "石佛乡",
- "沐尘畲族乡",
- "罗家乡",
- "庙下乡",
- "大街乡",
- "社阳乡",
-]);
-//存放地图上服务圈数据
-
-var circle;
-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 yaosuList = ref([]);
-//选中资源要素坐标
-const yaosuIcon = ref({
- 体育场所: {
- sj: [],
- },
- 幼儿园: { sj: [] },
- 小学: { sj: [] },
- 初中: { sj: [] },
- 高中: { sj: [] },
- 医院: { sj: [] },
- 南孔书院: { sj: [] },
- 养老机构: { sj: [] },
- 汽车充电桩: { sj: [] },
- 卫生服务中心: { sj: [] },
- AED: { sj: [] },
-});
+var map = null;
// 鼠标点击添加点位
let currentMarker = null; // 用于保存当前标记的引用
-// 详情弹框
-const dialogShow = ref(false);
-const tableType = reactive({
- url: "",
- title: "人员列表",
- columns: [
- {
- label: "姓名",
- property: "nm",
- },
- {
- label: "手机号",
- property: "contactTel",
- },
- {
- label: "政治面貌",
- property: "zzmm",
- },
- {
- label: "居住状态",
- property: "jzzt",
- type: "slot",
- },
- {
- label: "民族",
- property: "ethnic",
- },
- {
- label: "性别",
- property: "gender",
- },
- {
- label: "户口登记地",
- property: "domicAddr",
- width: "300px",
- },
- ],
- data: [],
-});
-// 表格分页
-const pagination = reactive({
- total: 100,
- pageSize: 10,
- currentPage: 1,
-});
-//--------定义方法----------------------------------------
-//地图初始化
-const initMap = () => {
- map = new BMapGL.Map("map", { minZoom: 8, maxZoom: 20 });
- map.setMapType(BMAP_SATELLITE_MAP);
- map.enableScrollWheelZoom(true);
- goMapCenter([119.178783, 29.034583], 11);
-
- //加载乡镇信息
- loadTown();
- //渲染地块
- addPolygonCounty();
- //添加街道名
- addJd();
-};
-//点击龙游县初始化
-const csh = () => {
- clear();
- xkzDk.length = 0;
- map.removeEventListener("click", markera);
- if (currentMarker !== null) {
- map.removeOverlay(currentMarker);
- }
- goMapCenter([119.178783, 29.034583], 11);
- getData();
- getDataBq();
-};
-//清空村社的数据
-const clear = () => {
- xuanzhongCs.value = [];
- sfdd.value = false;
- title_choose.value = "";
- title_jd.value = "";
- title_cs.value = "";
- cfJd.value = "";
- cfCs.value = "";
- cfCsZs.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]);
- });
- 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 = [];
-};
-//定义地图中点
-const goMapCenter = (point, zoom) => {
- map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom);
-};
-//0岁时,改为小于1岁
-const ageLess0 = computed(() => {
- return function (item) {
- if (item == "0岁") {
- return "小于1岁";
- } else {
- return item;
- }
- };
-});
-//鼠标点击添加点位
-const BMAP = () => {
- // 添加鼠标点击事件监听器
- map.addEventListener("click", markera);
-};
const markera = (e) => {
- console.log(`"center":[${e.latlng.lng},${e.latlng.lat}],`);
// 检查并移除当前标记
if (currentMarker !== null) {
map.removeOverlay(currentMarker);
@@ -873,1125 +449,17 @@ const markera = (e) => {
map.addOverlay(marker);
currentMarker = marker;
};
-//点击人口数
-const buten = async (item) => {
- getData(item.age);
- getDatas(cfJd.value, item.age);
+const BMAP = () => {
+ // 添加鼠标点击事件监听器
+ map.addEventListener("click", markera);
};
-//点击特殊标签
-const buten2 = async (item) => {
- getDataBqs(cfJd.value, cfCs.value, item.id);
-};
-//人口
-const getData = async (e) => {
- let e1 = e;
- if (e == "9999") {
- e = "";
- }
- try {
- const res = await http.get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ""}`);
- if (res.code == 200) {
- if (cfJd.value == "") {
- personTotal.value = [
- {
- id: "9999",
- ages: "总人口",
- age: "9999",
- value: "res.data.total",
- },
- {
- id: "6666",
- name: "近一年死亡",
- value: "5650",
- ages: "近一年死亡",
- age: "6666",
- percent: "",
- },
- ];
- personTotal.value[0].rksl = res.data.total;
- personTotal.value[0].ages = "总人口";
- personTotal.value[1].rksl = res.data.swrs;
- personTotal.value[1].ages = "近一年死亡";
- personTotal.value[1].percent = res.data.swrsPercent;
- res.data.age.forEach((item, index) => {
- personTotal.value.push({
- id: index + 1,
- rksl: item.rksl,
- age: item.age + "",
- ages: item.age + "岁",
- percent: item.percent,
- });
- });
- // 年龄百分比
- const agename = [
- "09Percent",
- "1019Percent",
- "2029Percent",
- "3039Percent",
- "4049Percent",
- "5059Percent",
- "6069Percent",
- "7079Percent",
- "8089Percent",
- "9099Percent",
- "100nlPercent",
- ];
- if (res.data.ageGroupsPercent) {
- // console.log(PopulationRatio.value[0].progress);
- agename.forEach((key, index) => {
- if (PopulationRatio.value[index]) {
- PopulationRatio.value[index].progress =
- res.data.ageGroupsPercent[key];
- }
- });
- }
- }
- mapTownCount.map((item) => {
- item.swrs = 0;
- res.data.townWwrs.map((items) => {
- if (items.xzjd == item.name) {
- item.swrs = items.swrs;
- }
- });
- });
- mapTownCount.map((item) => {
- item.number = 0;
- res.data.town.map((items) => {
- if (items.town == item.name) {
- item.number = items.rksl;
- }
- });
- });
- }
- } catch (error) {
- console.error("Error fetching data:", error);
- }
- if (e1) {
- changeRs(e1);
- }
-};
-const getDatas = async (e, i) => {
- if (i == "9999") {
- 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: "9999",
- ages: "总人口",
- age: "9999",
- value: "res.data.total",
- },
- {
- // id: "6666",
- name: "近一年死亡",
- value: "5650",
- ages: "近一年死亡",
- age: "6666",
- percent: "",
- },
- ];
- let before_age = "";
- personTotal.value[0].rksl = res.data.total;
- personTotal.value[0].ages = "总人口";
- personTotal.value[1].rksl = res.data.swrs;
- personTotal.value[1].ages = "近一年死亡";
- personTotal.value[1].percent = res.data.swrsPercent;
- res.data.age.forEach((item, index) => {
- if (index == 0 && item.age == 0) {
- personTotal.value.push({
- rksl: item.rksl,
- age: item.age + "",
- ages: item.age + "岁",
- percent: item.percent,
- });
- before_age = item.age;
- } else {
- if (item.age - before_age == 1) {
- personTotal.value.push({
- rksl: item.rksl,
- age: item.age + "",
- ages: item.age + "岁",
- percent: item.percent,
- });
- before_age = item.age;
- } else {
- for (let k = before_age; k < item.age - 1; k++) {
- before_age = before_age + 1;
- personTotal.value.push({
- rksl: 0,
- age: before_age + "",
- ages: before_age + "岁",
- percent: 0.0,
- });
- }
- personTotal.value.push({
- rksl: item.rksl,
- age: item.age + "",
- ages: item.age + "岁",
- percent: item.percent,
- });
- before_age = item.age;
- }
- }
- });
- }
- if (cfJd.value != "") {
- xkzCenter.map((item) => {
- item.swrs = 0;
- res.data.committeeSwrs.map((items) => {
- if (items.csq == item.name) {
- item.swrs = items.swrs;
- }
- });
- });
-
- 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]);
- });
- cs_dd_arr.value.forEach((item, index) => {
- map.removeOverlay(cs_dd_arr.value[index]);
- });
-
- if (title_jd.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 agename = [
- "09Percent",
- "1019Percent",
- "2029Percent",
- "3039Percent",
- "4049Percent",
- "5059Percent",
- "6069Percent",
- "7079Percent",
- "8089Percent",
- "9099Percent",
- "100nlPercent",
- ];
- if (res.data.ageGroupsPercent) {
- agename.forEach((key, index) => {
- if (PopulationRatio.value[index]) {
- PopulationRatio.value[index].progress =
- res.data.ageGroupsPercent[key];
- }
- });
- }
- }
- });
-};
-const getDatas2 = async (e, i, cs) => {
- let i1 = i;
- if (
- i == "cjr" ||
- i == "dibian" ||
- i == "db" ||
- i == "gxy" ||
- i == "tnb" ||
- i == "tyjr" ||
- i == "kjer"
- ) {
- i = "";
- }
- await http
- .get(
- `/api/ggfwyth/ysyzt/getCssrksl?town=${e}&age=${i || ""}&committee=${cs}`
- )
- .then((res) => {
- if (res.code == 200) {
- personTotal.value = [
- {
- // id: "9999",
- name: "总人口",
- ages: "总人口",
- age: "9999",
- value: "res.data.total",
- },
- {
- // id: "6666",
- name: "近一年死亡",
- value: "5650",
- ages: "近一年死亡",
- age: "6666",
- },
- ];
- personTotal.value[0].rksl = res.data.total;
- personTotal.value[0].ages = "总人口";
- personTotal.value[1].rksl = res.data.swrs;
- personTotal.value[1].ages = "近一年死亡";
- personTotal.value[1].percent = res.data.swrsPercent;
- // res.data.age.forEach((item, index) => {
- // personTotal.value.push({
- // id: index + 1,
- // rksl: item.rksl,
- // age: item.age + "",
- // ages: item.age + "岁",
- // percent: item.percent,
- // });
- // });
- let before_age = "";
- res.data.age.forEach((item, index) => {
- // if (index == 0) {
- // personTotal.value.push({
- // rksl: item.rksl,
- // age: item.age + "",
- // ages: item.age + "岁",
- // percent: item.percent,
- // });
- // before_age = item.age;
- // console.log("执行111", before_age);
- // } else {
- // if (item.age - before_age == 1) {
- // personTotal.value.push({
- // rksl: item.rksl,
- // age: item.age + "",
- // ages: item.age + "岁",
- // percent: item.percent,
- // });
- // before_age = item.age;
- // } else {
- // for (let i = 0; i < item.age - before_age - 1; i++) {
- // ++before_age;
- // personTotal.value.push({
- // rksl: 0,
- // age: before_age + "",
- // ages: before_age + "岁",
- // percent: 0.0,
- // });
- // }
- // personTotal.value.push({
- // rksl: item.rksl,
- // age: item.age + "",
- // ages: item.age + "岁",
- // percent: item.percent,
- // });
- // before_age = item.age;
- // }
- // }
- if (index == 0 && item.age == 0) {
- personTotal.value.push({
- rksl: item.rksl,
- age: item.age + "",
- ages: item.age + "岁",
- percent: item.percent,
- });
- before_age = item.age;
- } else {
- if (item.age - before_age == 1) {
- personTotal.value.push({
- rksl: item.rksl,
- age: item.age + "",
- ages: item.age + "岁",
- percent: item.percent,
- });
- before_age = item.age;
- } else {
- for (let k = before_age; k < item.age - 1; k++) {
- before_age = before_age + 1;
- personTotal.value.push({
- rksl: 0,
- age: before_age + "",
- ages: before_age + "岁",
- percent: 0.0,
- });
- }
- personTotal.value.push({
- rksl: item.rksl,
- age: item.age + "",
- ages: item.age + "岁",
- percent: item.percent,
- });
- before_age = item.age;
- }
- }
- });
- xkzCenter.map((item) => {
- item.swrs = 0;
- res.data.committeeSwrs.map((items) => {
- if (items.csq == item.name) {
- item.swrs = items.swrs;
- }
- });
- });
- // 年龄百分比
- const agename = [
- "09Percent",
- "1019Percent",
- "2029Percent",
- "3039Percent",
- "4049Percent",
- "5059Percent",
- "6069Percent",
- "7079Percent",
- "8089Percent",
- "9099Percent",
- "100nlPercent",
- ];
- if (res.data.ageGroupsPercent) {
- agename.forEach((key, index) => {
- if (PopulationRatio.value[index]) {
- PopulationRatio.value[index].progress =
- res.data.ageGroupsPercent[key];
- }
- });
- }
- }
- });
- if (
- i1 == "cjr" ||
- i1 == "dibian" ||
- i1 == "db" ||
- i1 == "gxy" ||
- i1 == "tnb" ||
- i1 == "tyjr" ||
- i1 == "kjer"
- ) {
- } else {
- 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);
- });
- }
- }
-};
-//特殊标签
-//获取特殊标签
-//特殊标签列表数据请求
-const getDataBq = async (jd, cs) => {
- await http
- .get(`/api/ggfwyth/ysyzt/getTsbq?csq=${cs || ""}&xzjd=${jd || ""}`)
- .then((res) => {
- if (res.code == 200) {
- 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] || 0,
- });
- }
- }
- });
-};
-const getDataBqs = async (jd, cs, bq) => {
- await getDataBqJD(bq);
- getDataBqs2(cfJd.value, cfCs.value, bq);
- // await http.get(`/api/ggfwyth/ysyzt/getTsbqByXzjdOrCsq`, data).then((res) => {
- // if (res.code == 200) {
- // mapTownCount.map((item) => {
- // item.numbers = 0;
- // res.data.map((items) => {
- // if (items.xzjd == item.name) {
- // item.numbers = items.rs;
- // }
- // });
- // });
- // }
- // });
-};
-//特殊标签获取街道内部人数
-const getDataBqs2 = async (jd, cs, bq, f = true) => {
- //f用来判断执不执行changeRs2
- let data = {};
- let vv = 0;
- if (cs == "" && jd == "") {
- data = {
- tsbq: bq,
- };
- vv = 1;
- } else if (cs == "") {
- data = {
- xzjd: jd,
- tsbq: bq,
- };
- vv = 2;
- } else {
- data = {
- xzjd: jd,
- tsbq: bq,
- csq: cs,
- };
- vv = 3;
- }
- await http.get(`/api/ggfwyth/ysyzt/getTsbqByXzjdOrCsq`, data).then((res) => {
- if (res.code == 200) {
- if (cfJd.value != "") {
- xkzCenter.map((item) => {
- item.numbers = 0;
- res.data.map((items) => {
- if (items.csq == item.name) {
- item.numbers = items.rs;
- }
- });
- });
- }
-
- if (f) {
- changeRs2(bq);
- }
-
- 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]);
- });
- cs_dd_arr.value.forEach((item, index) => {
- map.removeOverlay(cs_dd_arr.value[index]);
- });
- if (title_jd.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 getDataBqs3 = async (jd, cs, bq) => {
- //f用来判断执不执行changeRs2
- let data = {};
- let vv = 0;
- if (cs == "" && jd == "") {
- data = {
- tsbq: bq,
- };
- vv = 1;
- } else if (cs == "") {
- data = {
- xzjd: jd,
- tsbq: bq,
- };
- vv = 2;
- } else {
- data = {
- xzjd: jd,
- tsbq: bq,
- csq: cs,
- };
- vv = 3;
- }
- await http.get(`/api/ggfwyth/ysyzt/getTsbqByXzjdOrCsq`, data).then((res) => {
- if (res.code == 200) {
- // if (cfJd.value != "") {
- xkzCenter.map((item) => {
- item.numbers = 0;
- res.data.map((items) => {
- if (items.csq == item.name) {
- item.numbers = items.rs;
- }
- });
- });
- // }
- // 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]);
- // });
- // cs_dd_arr.value.forEach((item, index) => {
- // map.removeOverlay(cs_dd_arr.value[index]);
- // });
- // if (title_jd.value == "") {
- // } else {
- // if (sfdd.value) {
- cs_dd_arr.value = [...xuanzhongCs.value];
- if (choose.value.person == "") {
- // cs_dd_arr.value.forEach((item, index) => {
- // map.removeOverlay(cs_dd_arr.value[index]);
- // });
- cs_dd_arr.value.map((item, index) => {
- DGcreateCs(item, index);
- });
- } else {
- // cs_dd_arr.value = [...xuanzhongCs.value];
- console.log(cs_dd_arr.value);
- cs_dd_arr.value.map((item, index) => {
- DGcreateCs2(item, index);
- });
- }
- // }
- // else {
- // if (choose.value.person == "") {
- // addCs();
- // } else {
- // addCs2();
- // }
- // }
- // }
- }
- });
-};
-//特殊标签单独获取各个街道人数
-const getDataBqJD = async (bq) => {
- let data = {};
- data = {
- tsbq: bq,
- };
-
- await http.get(`/api/ggfwyth/ysyzt/getTsbqByXzjdOrCsq`, data).then((res) => {
- if (res.code == 200) {
- if (res?.data) {
- mapTownCount.map((item) => {
- item.numbers = 0;
- res.data.map((items) => {
- if (items.xzjd == item.name) {
- item.numbers = items.rs;
- }
- });
- });
- }
- }
- });
-};
-//人口,标签切换执行
-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 changeRs2 = (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 removeCharFromArray = (arr, charToRemove) => {
- // 如果数组包含该字符,则过滤掉它
- if (arr.includes(charToRemove)) {
- return arr.filter((ch) => ch !== charToRemove);
- } else {
- arr.push(charToRemove);
- return arr;
- }
-};
-const changeys = (name) => {
- if (yaosuList.value.includes(name)) {
- yaosuList.value = yaosuList.value.filter((ch) => ch !== name);
- // yaosuIcon.value[name].sj.forEach((item, index) => {
- // map.removeOverlay( yaosuIcon.value[name].sj[index]);
- // });
- } else {
- yaosuList.value.push(name);
- // getZyys(name);
- }
-};
-const getZyys = (name) => {
- http.get(``).then((res) => {
- if (res.code == 200) {
- res.data.map((item, index) => {
- createZyys(item, index, name);
- });
- }
- });
-};
-// 添加资源要素的图标
-const createZyys = (polygon, indexx, name) => {
- // data.fwqCoordinates = polygon.point;
- 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);
- let img2 = document.createElement("img");
- img2.style.width = "20px";
- img2.style.height = "20px";
- img2.src = this.properties.imgSrc2;
- content.appendChild(img2);
- return content;
- }
- yaosuIcon.value[name].sj[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
- point: new BMapGL.Point(...polygon.point),
- opacity: 0.5,
- offsetY: -10,
- properties: {
- imgSrc2: polygon.img2,
- type: "customOverlay",
- },
- });
- map.addOverlay(yaosuIcon.value[name].sj[indexx]);
-};
-//----------资源要素------------
-//点击街道,回到街道
-const to_jd = (item_name) => {
- clear();
- title_jd.value = item_name;
- map.removeEventListener("click", markera);
- if (currentMarker !== null) {
- map.removeOverlay(currentMarker);
- }
-
- // townName.value = item_name;
- // if (item_name == cfJd.value) {
- // } else {
- // console.log(111, choose.value.person);
- cfJd.value = item_name;
- let jdCenter = [];
- BMAP();
- loadCs(item_name);
- addPolygonCountyCs();
- getDataBq(cfJd.value, "");
- if (choose.value.person == "") {
- getDatas(cfJd.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"
- ) {
- getDataBqs2(cfJd.value, cfCs.value, choose.value.person, false);
- getDatas(cfJd.value, "");
- } else if (choose.value.person != "") {
- if (choose.value.person == "9999") {
- getDatas(cfJd.value, "");
- } else {
- // if (choose.value.person == 1) {
- // getDatas(cfJd.value, "0"); //0岁传字符串
- // } else {
- // getDatas(cfJd.value, choose.value.person);
- // }
- getDatas(cfJd.value, choose.value.person);
- }
- }
- // if (title_jd.value == item.name) {
- // } else {
- // title_jd.value = item.name;
- // }
-
- mapTownCount.map((itemm) => {
- if (itemm.name == item_name) {
- jdCenter = itemm.center;
- }
- });
- goMapCenter(jdCenter, 13);
-
- // }
-};
-//详情
-const open_detail = () => {
- let age = "";
- // if (choose.value.person == "9999") {
- // age = "";
- // person_detail(age);
- // dialogShow.value = true;
- // } else if (choose.value.person == "6666") {
- // age = "";
- // } else if (choose.value.person == 1) {
- // age = "0";
- // person_detail(age);
- // dialogShow.value = true;
- // } else {
- // age = choose.value.person - 1;
- // person_detail(age);
- // dialogShow.value = true;
- // }
- if (choose.value.person == "9999") {
- age = "";
- person_detail(age);
- dialogShow.value = true;
- } else if (choose.value.person == "6666") {
- age = "";
- } else {
- age = choose.value.person;
- person_detail(age);
- dialogShow.value = true;
- }
-};
-const close = () => {
- dialogShow.value = false;
- pagination.total = 100;
-};
-//表格分页
-const handlePagination = (current) => {
- pagination.currentPage = current;
- let age = "";
- // if (choose.value.person == "9999") {
- // age = "";
- // } else if (choose.value.person == "6666") {
- // age = "";
- // } else if (choose.value.person == 1) {
- // age = "0";
- // } else {
- // age = choose.value.person - 1;
- // }
- if (choose.value.person == "9999") {
- age = "";
- } else if (choose.value.person == "6666") {
- age = "";
- } else {
- age = choose.value.person;
- }
- person_detail(age);
-};
-//打开人物详情页面
-const openMessage = (e) => {
- message.value = e;
- openD.value = false;
- reset_font2();
- //监听实现人物详情动态缩放
- window.addEventListener("resize", reset_font2);
-};
-//关闭人物详情页面
-const closeDetail = () => {
- openD.value = true;
- window.removeEventListener("resize", reset_font2);
-};
-//获取人口列表接口
-const person_detail = (age) => {
- http
- .get(
- `/api/ggfwyth/ysyzt/getRysmzq?page=${pagination.currentPage}&size=${
- pagination.pageSize
- }&age=${age || ""}&committee=${cfCsZs.value || ""}&town=${
- cfJd.value || ""
- }`
- )
- .then((res) => {
- if (res.code == 200) {
- tableType.data = res.data;
- pagination.total = res.count;
- }
- });
-};
-//--------公共服务圈-----------
-//获取服务圈村社数据
-const getFwq = () => {
- http.get(`/api/ggfwyth/ysyzt/listXzjdAndCsq`).then((res) => {
- if (res.code == 200) {
- res.data.forEach((item, index) => {
- jbfwqTotal.value.push({
- name: item.xzjd,
- child: [],
- });
- item.jcs.forEach((item2) => {
- // console.log(item2.jc,6666);
- jbfwqTotal.value[index].child.push({
- name: item2.jc,
- jc: item2.jc,
- });
- });
- });
- let arr=[]
- jbfwqPx.forEach((item,index)=>{
- jbfwqTotal.value.forEach((item2,index2)=>{
- if(item==item2.name){
- arr.push(item2)
- }
- })
- })
- jbfwqTotal.value=arr;
- }
- });
-};
-//点击服务圈村
-const changeFwq = async (id, name, names) => {
- if (choose.value.fwq == id) {
- choose.value.fwq = null;
- csh(); //地图初始化
- addPolygonCounty(); //添加地区
- fwq_list_arr.value.forEach((item, index) => {
- map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标
- });
- fwq_list_arr.value = [];
- map.removeOverlay(circle); // 清空服务圈 圆
- circle = null;
- } else {
- csh();
- await getServiceCircle(names, name);
- if (fwqList.value.length !== 0) {
- fwq_list_arr.value.forEach((item, index) => {
- map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标
- });
- map.removeOverlay(circle); // 清空服务圈 圆
- circle = null;
- fwq_list_arr.value = [];
- choose.value.fwq = id;
- map.clearOverlays(); //清空地图上所有的覆盖物
- addggfwq(); //创建公共服务圈
- setTimeout(() => {
- goMapCenter(
- [data.fwqCoordinates1, data.fwqCoordinates2],
- data.zoomLevel
- ); //中心点缩放
- }, 500);
- } else {
- ElMessage.warning({
- message: "无数据",
- offset: 100, // 距离窗口顶部的偏移量
- });
- }
- }
-};
-// 服务圈数据
-const getServiceCircle = async (communityName, townName) => {
- try {
- const response = await http.get(
- `/api/ggfwyth/ysyzt/zyysxx?jc=${communityName}&xzjd=${townName}`
- );
- if (response.code === 200) {
- updateFwqList(response.data, townName, communityName);
- }
- } catch (error) {
- console.error("Error fetching data:", error);
- }
-};
-// 计算中心点
-const calculateCenterPoint = (coordinates) => {
- if (coordinates.length === 0) {
- return null;
- }
-
- let x = 0.0;
- let y = 0.0;
- let z = 0.0;
-
- coordinates.forEach((coord) => {
- const lat = (parseFloat(coord[1]) * Math.PI) / 180;
- const lon = (parseFloat(coord[0]) * Math.PI) / 180;
-
- x += Math.cos(lat) * Math.cos(lon);
- y += Math.cos(lat) * Math.sin(lon);
- z += Math.sin(lat);
- });
-
- const total = coordinates.length;
- x /= total;
- y /= total;
- z /= total;
-
- const centralLon = Math.atan2(y, x);
- const centralSquareRoot = Math.sqrt(x * x + y * y);
- const centralLat = Math.atan2(z, centralSquareRoot);
-
- return [
- ((centralLon * 180) / Math.PI).toFixed(6), // 经度
- ((centralLat * 180) / Math.PI).toFixed(6), // 纬度
- ];
-};
-const calculateAverage = (coordinates) => {
- // const numericCoordinates = coordinates.map(Number); // 将字符串转换为数字
- const numericCoordinates = coordinates.map((coord) => {
- // 使用正则表达式去除非数字字符(保留小数点和负号)
- const cleanedCoord = coord.replace(/[^0-9.-]/g, "");
- return Number(cleanedCoord); // 将清理后的字符串转换为数字
- });
- const sum = numericCoordinates.reduce((acc, val) => acc + val, 0); // 计算总和
- const average = sum / numericCoordinates.length; // 计算平均值
- // console.log(average, "计算平均值");
-
- return parseFloat(average.toFixed(5)); // 保留5位小数并转换为数字
-};
-// 根据最大距离计算合适的缩放级别
-const calculateZoomLevel = (maxDistance) => {
- if (maxDistance < 151) return 18;
- if (maxDistance < 400) return 17;
- if (maxDistance < 600) return 17.5;
- if (maxDistance < 1000) return 16;
- if (maxDistance < 2000) return 15;
- if (maxDistance < 3000) return 14;
- if (maxDistance < 5000) return 13;
- return 13;
-};
-//创建公共服务圈
-const addggfwq = () => {
- if (fwqList.value.length !== 0) {
- data.fwqCoordinates = [];
- // data.fwqCoordinates1 = [];
- // data.fwqCoordinates2 = [];
- fwqList.value.map((item, index) => {
- data.fwqCoordinates.push(item.point);
- // data.fwqCoordinates1.push(item.point[0]);
- // data.fwqCoordinates2.push(item.point[1]);
- createCustomOverlay(item, index);
- });
-
- const centerPoint = calculateCenterPoint(data.fwqCoordinates);
- data.fwqCoordinates1 = centerPoint[0];
- data.fwqCoordinates2 = centerPoint[1];
-
- // data.fwqCoordinates1 = calculateAverage(data.fwqCoordinates1);
- // data.fwqCoordinates2 = calculateAverage(data.fwqCoordinates2);
- console.log(centerPoint); // 输出中心点的经纬度
- // console.log("经纬度", data.fwqCoordinates1, data.fwqCoordinates2 );
-
- let distances = []; // 初始化距离数组
- fwqList.value.forEach((item) => {
- // let distance = algorithm(
- // (item.point[0] = Number(item.point[0].replace(/[^0-9.-]/g, ""))),
- // (item.point[1] = Number(item.point[1].replace(/[^0-9.-]/g, ""))),
- // data.fwqCoordinates1,
- // data.fwqCoordinates2
- // );
- let distance = algorithm(
- Number(item.point[0].replace(/[^0-9.-]/g, "")),
- Number(item.point[1].replace(/[^0-9.-]/g, "")),
- Number(centerPoint[0]),
- Number(centerPoint[1])
- );
- distances.push(distance); // 将距离存入数组
- });
- let maxDistance = Math.max(...distances); // 找到最大距离
- maxDistance = Math.ceil(maxDistance * 1.8); // 向上取整
- if (maxDistance < 100) {
- maxDistance = 150; // 如果小于 100,则赋值为 150
- }
- data.zoomLevel = calculateZoomLevel(maxDistance);
- console.log("最大距离:", maxDistance, data.zoomLevel);
- drawACircle(maxDistance);
- } else {
- ElMessage.warning({
- message: "无数据",
- offset: 100, // 距离窗口顶部的偏移量
- });
- }
-};
-//计算两点之间直线距离
-const algorithm = (point1, point2, point3, point4) => {
- // console.log(point1, point2, point3, point4, 5555);
- let [x1, y1] = [point1, point2];
- let [x2, y2] = [point3, point4];
- let Lat1 = rad(x1); // 纬度
- let Lat2 = rad(x2);
- let a = Lat1 - Lat2; // 两点纬度之差
- let b = rad(y1) - rad(y2); // 经度之差
- let s =
- 2 *
- Math.asin(
- Math.sqrt(
- Math.pow(Math.sin(a / 2), 2) +
- Math.cos(Lat1) * Math.cos(Lat2) * Math.pow(Math.sin(b / 2), 2)
- )
- );
- // 计算两点距离的公式
- s = s * 6378137.0; // 弧长等于弧度乘地球半径(半径为米)
- s = Math.round(s * 10000) / 10000; // 精确距离的数值
- return s;
-};
-
-// 角度转换成弧度
-const rad = (d) => {
- return (d * Math.PI) / 180.0;
-};
-
// 添加服务圈
-const drawACircle = (maxDistance) => {
- // console.log("经纬度1", data.fwqCoordinates1, data.fwqCoordinates2);
+var circle;
+const drawACircle = (v) => {
+ console.log("经纬度", data.fwqCoordinates1, data.fwqCoordinates2);
if (!circle) {
var point = new BMapGL.Point(data.fwqCoordinates1, data.fwqCoordinates2);
- circle = new BMapGL.Circle(point, maxDistance, {
+ circle = new BMapGL.Circle(point, 1000, {
strokeColor: "yellow",
strokeWeight: 2,
strokeOpacity: 0.8,
@@ -2002,6 +470,818 @@ const drawACircle = (maxDistance) => {
});
map.addOverlay(circle);
}
+
+ // if (v === "hide") {
+ // circle.hide();
+ // } else {
+ // circle.show();
+ // map.addOverlay(circle);
+ // map.setViewport({
+ // center: new BMapGL.Point(data.fwqCoordinates1, data.fwqCoordinates2),
+ // zoom: 14,
+ // });
+ // }
+};
+
+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", () => {
+ townName.value = item.name;
+ if (item.name == cfJd.value) {
+ } else {
+ console.log(111, choose.value.person);
+ cfJd.value = item.name;
+ let jdCenter = [];
+ if (item.name == "溪口镇") {
+ console.log(444444444, choose.value.person);
+ BMAP();
+ getDatas("溪口镇", "");
+ getDataBq(cfJd.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(5555555555555555);
+ getDataBqs2(cfJd.value, cfCs.value, choose.value.person, false);
+ } else if (choose.value.person != "") {
+ getDatas("溪口镇", choose.value.person);
+ }
+
+ if (!title_choose.value.includes("溪口镇")) {
+ title_choose.value = title_choose.value + `>${item.name}`;
+ }
+ loadCs();
+ addPolygonCountyCs();
+
+ // if (choose.value.person == "") {
+ // addCs();
+ // } else {
+ // addCs2();
+ // }
+ mapTownCount.map((item) => {
+ if (item.name == "溪口镇") {
+ jdCenter = item.center;
+ }
+ });
+ goMapCenter(jdCenter, 13);
+ } else {
+ map.removeEventListener("click", markera);
+ if (currentMarker !== null) {
+ map.removeOverlay(currentMarker);
+ }
+ 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();
+ getDataBq();
+ }
+ }
+
+ // }
+ });
+ }
+ });
+};
+
+//添加街道名
+const addJd = () => {
+ mapTownCount.map((item, index) => {
+ createCustomOverlayJd(item, index);
+ });
+};
+//添加街道名2含数量
+const addJd2 = () => {
+ nextTick(() => {
+ 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]);
+ });
+ getDataBq(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"
+ ) {
+ getDataBqs2(cfJd.value, cfCs.value, choose.value.person, false);
+ } else {
+ // console.log(2, "溪口镇");
+ getDataBqs(cfJd.value, cfCs.value);
+ }
+ //这段注意
+ getDatas2(cfJd.value, choose.value.person, cfCs.value);
+ addCsChoose();
+ addCsUnChoose();
+ 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);
+ });
+ }
+ });
+ }
+ });
+};
+//添加选中社区
+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]);
+ });
+ getDataBqs(cfJd.value, cfCs.value);
+ getDataBq(cfJd.value, cfCs.value);
+ getDatas2(cfJd.value, choose.value.person, 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"
+ ) {
+ // getDataBq(cfJd.value, cfCs.value);
+ getDataBqs2(cfJd.value, cfCs.value, choose.value.person, false);
+ }
+ if (choose.value.person == "") {
+ cs_dd_arr.value.map((item, index) => {
+ DGcreateCs(item, index);
+ });
+ } else {
+ setTimeout(() => {
+ cs_dd_arr.value.map((item, index) => {
+ console.log("渲染", item);
+ DGcreateCs2(item, index);
+ });
+ }, 300);
+ }
+ 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 = "11px";
+ 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;
+ }
+ let num = "";
+ if (choose.value.person == "6666") {
+ // console.log(1);
+ num = "swrs";
+ } 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"
+ ) {
+ num = "numbers";
+ } else {
+ num = "number";
+ }
+ 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[`${num}`],
+ 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 10px";
+ 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;
+ }
+ let num = "";
+ if (choose.value.person == "6666") {
+ num = "swrs";
+ } 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"
+ ) {
+ num = "numbers";
+ } else {
+ num = "number";
+ }
+ 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[`${num}`],
+ 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 10px";
+ 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 10px";
+ 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) => {
+ console.log(choose.value.person, "单个村社", polygon);
+ console.log("单个村社", polygon.name);
+ console.log("单个村社", polygon.number);
+ console.log("单个村社", polygon.swrs);
+ 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 10px";
+ 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;
+ }
+ let num = "";
+ if (choose.value.person == "6666") {
+ num = "swrs";
+ } 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"
+ ) {
+ num = "numbers";
+ } else {
+ num = "number";
+ }
+ 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[`${num}`],
+ imgSrc2: dwd,
+ type: "customOverlay",
+ },
+ });
+ map.addOverlay(cs_dd_arr.value[indexx]);
+};
+//创建公共服务圈
+const addggfwq = () => {
+ if (fwqList.value.length !== 0) {
+ data.fwqCoordinates1 = [];
+ data.fwqCoordinates2 = [];
+ fwqList.value.map((item, index) => {
+ data.fwqCoordinates1.push(item.point[0]);
+ data.fwqCoordinates2.push(item.point[1]);
+ createCustomOverlay(item, index);
+ });
+ function calculateAverage(coordinates) {
+ const numericCoordinates = coordinates.map(Number); // 将字符串转换为数字
+ const sum = numericCoordinates.reduce((acc, val) => acc + val, 0); // 计算总和
+ const average = sum / numericCoordinates.length; // 计算平均值
+ return parseFloat(average.toFixed(5)); // 保留5位小数并转换为数字
+ }
+ data.fwqCoordinates1 = calculateAverage(data.fwqCoordinates1);
+ data.fwqCoordinates2 = calculateAverage(data.fwqCoordinates2);
+ drawACircle();
+ } else {
+ ElMessage.warning("无数据");
+ }
};
// 添加公共服务圈的图标
const createCustomOverlay = (polygon, indexx) => {
@@ -2082,16 +1362,877 @@ const createCustomOverlay = (polygon, indexx) => {
// });
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 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]);
+ });
+ console.log(1);
+ addJd();
+ } else {
+ console.log(2);
+ 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 changeRs2 = (id) => {
+ if (choose.value.person == id) {
+ console.log("测试");
+ 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]);
+ });
+ jdm_arr.value.forEach((item, index) => {
+ map.removeOverlay(jdm_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();
+ addJd();
+ }
+ // choose.value.person = id;
+};
+//点击服务圈村
+const changeFwq = async (id, name, names) => {
+ console.log("fwqid", choose.value.fwq, id);
+ console.log(fwqList.value, "无");
+ if (choose.value.fwq == id) {
+ choose.value.fwq = null;
+ csh(); //地图初始化
+ addPolygonCounty(); //添加地区
+ fwq_list_arr.value.forEach((item, index) => {
+ map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标
+ });
+ fwq_list_arr.value = [];
+ map.removeOverlay(circle); // 清空服务圈 圆
+ circle = null;
+ // drawACircle("hide"); //隐藏服务圈 圆
+ } else {
+ await getServiceCircle(names, name);
+ if (fwqList.value.length !== 0) {
+ fwq_list_arr.value.forEach((item, index) => {
+ map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标
+ });
+ map.removeOverlay(circle); // 清空服务圈 圆
+ circle = null;
+ fwq_list_arr.value = [];
+ choose.value.fwq = id;
+ map.clearOverlays(); //清空地图上所有的覆盖物
+ choose.value.person = "";
+ addggfwq(); //创建公共服务圈
+ setTimeout(() => {
+ goMapCenter([data.fwqCoordinates1, data.fwqCoordinates2], 16); //中心点缩放
+ }, 500);
+ } else {
+ ElMessage.warning("无数据");
+ }
+ }
+};
+
+const changeys = (id) => {
+ choose.value.yaosu = id;
+};
+//人口数
+const personTotal = ref([
+ {
+ id: 0,
+ name: "总人口",
+ value: "1724114",
+ ages: "总人口",
+ age: "1000",
+ },
+ {
+ id: 1,
+ name: "1岁以下",
+ value: "26737",
+ ages: "1岁以下",
+ 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",
+ },
+ {
+ id: 14,
+ name: "死亡总人口",
+ value: "5650",
+ ages: "死亡总人口",
+ age: "1000",
+ },
+]);
+const ageLess0 = computed(() => {
+ return function (item) {
+ if (item == "0岁") {
+ return "小于1岁";
+ } else {
+ return item;
+ }
+ };
+});
+//特殊标签
+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);
+ // map.removeOverlay(marker1);
+ getDataBqs(cfJd.value, cfCs.value, item.id);
+};
const updateFwqList = (data, townName, communityName) => {
- // console.log(data, townName, communityName,'服务器数据');
let updatedFwqList = [];
jbfwqTotal.value.forEach((town) => {
if (town.name === townName) {
- town.child.forEach((community, index) => {
+ town.child.forEach((community) => {
if (community.name === communityName) {
updatedFwqList = data
.filter(
- (item) => item.xzjd === townName && item.jc === communityName
+ (item) => item.xzjd === townName && item.csq === communityName
)
.map((item) => ({
x: 53,
@@ -2112,814 +2253,400 @@ const updateFwqList = (data, townName, communityName) => {
fwqList.value = updatedFwqList;
// console.log(jbfwqTotal.value[4].child[0], "乡镇");
};
-//------------------------------
-//-------乡镇街道级别---------
-//加载乡镇信息
-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 getServiceCircle = async (communityName, townName) => {
+ try {
+ const response = await http.get(
+ `/api/ggfwyth/ysyzt/zyysxx?csq=${communityName}&xzjd=${townName}`
+ );
+ if (response.code === 200) {
+ updateFwqList(response.data, townName, communityName);
}
+ } catch (error) {
+ console.error("Error fetching data:", error);
}
};
-//添加地图区块
-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", () => {
- // townName.value = item.name;
- if (item.name == cfJd.value) {
- } else {
- clear();
- xkzDk.length = 0;
- cfJd.value = item.name;
- let jdCenter = [];
- // if (item.name == "溪口镇") {
- BMAP();
- loadCs(item.name);
- addPolygonCountyCs();
- getDataBq(cfJd.value, "");
- if (choose.value.person == "") {
- getDatas(cfJd.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"
- ) {
- getDataBqs2(cfJd.value, cfCs.value, choose.value.person, false);
- getDatas(cfJd.value, "");
- } else if (choose.value.person != "") {
- if (choose.value.person == "9999") {
- getDatas(cfJd.value, "");
- } else {
- // if (choose.value.person == 1) {
- // getDatas(cfJd.value, "0"); //0岁传字符串
- // } else {
- // getDatas(cfJd.value, choose.value.person - 1);
- // }
-
- getDatas(cfJd.value, choose.value.person);
- }
- }
- if (title_jd.value == item.name) {
- } else {
- title_jd.value = item.name;
- }
-
- mapTownCount.map((itemm) => {
- if (itemm.name == item.name) {
- jdCenter = itemm.center;
+//获取人口数
+const getData = async (i, e) => {
+ if (e == "9999") {
+ e = "";
+ }
+ await http
+ .get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ""}`)
+ .then((res) => {
+ if (res.code == 200) {
+ if (cfJd.value == "") {
+ personTotal.value = [
+ {
+ id: "9999",
+ ages: "总人口",
+ age: "",
+ value: "res.data.total",
+ },
+ {
+ id: "6666",
+ name: "死亡总人口",
+ value: "5650",
+ ages: "死亡总人口",
+ age: "1000",
+ },
+ ];
+ personTotal.value[0].rksl = res.data.total;
+ personTotal.value[0].ages = "总人口";
+ personTotal.value[1].rksl = res.data.swrs;
+ personTotal.value[1].ages = "死亡";
+ res.data.age.forEach((item, index) => {
+ personTotal.value.push({
+ id: index + 1,
+ rksl: item.rksl,
+ age: item.age + "",
+ ages: item.age + "岁",
+ });
+ });
+ }
+ mapTownCount.map((item) => {
+ // item.number = 0;
+ res.data.townWwrs.map((items) => {
+ if (items.xzjd == item.name) {
+ item.swrs = items.swrs;
+ }
+ });
+ });
+ mapTownCount.map((item) => {
+ item.number = 0;
+ res.data.town.map((items) => {
+ if (items.town == item.name) {
+ item.number = items.rksl;
}
});
- goMapCenter(jdCenter, 13);
- // }
- // else {
- // loadCs(item.name);
- // addPolygonCountyCs();
- // // map.removeEventListener("click", markera);
- // // if (currentMarker !== null) {
- // // map.removeOverlay(currentMarker);
- // // }
- // // clear();
- // // getData();
- // // getDataBq();
- // }
- }
- });
- }
- });
-};
-//添加街道名
-const addJd = () => {
- mapTownCount.map((item, index) => {
- createCustomOverlayJd(item, index);
- });
-};
-//添加街道名2含数量
-const addJd2 = () => {
- nextTick(() => {
- mapTownCount.map((item, index) => {
- createCustomOverlayJd2(item, index);
- });
- });
-
- // if (center_now.value[0] == 119.178783) {
- // goMapCenter([119.178783, 29.034581], 11);
- // }
-};
-// 添加地图上的街道名
-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 = "12px";
- 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 = "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.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 = "12px";
- 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 = "13px";
- 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;
- }
- let num = "";
- if (choose.value.person == "6666") {
- num = "swrs";
- } 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"
- ) {
- num = "numbers";
- } else {
- num = "number";
- }
- jdm_number_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
- point: new BMapGL.Point(...polygon.center),
- opacity: 0.5,
- offsetY: -10,
- properties: {
- title: polygon.name,
- number: polygon[`${num}`],
- type: "customOverlay",
- },
- });
- map.addOverlay(jdm_number_arr.value[indexx]);
-};
-//------------------------------
-//---------村社级别------------
-//加载村社信息
-const loadCs = (name) => {
- xkzCenter.length = 0;
- cssj.forEach((item, index) => {
- if (item.name == name) {
- csqk.value = item.sj;
- }
- });
- for (let v of csqk.value.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],
});
}
- xkzCenter.push({
- name: v.properties.name,
- center: v.properties.center,
- });
- } else {
- xkzDk.push({
- name: v.properties.name,
- point: v.geometry.coordinates[0],
- });
- xkzCenter.push({
- name: v.properties.name,
- center: v.properties.center,
- });
- }
+ });
+ if (i) {
+ changeRs(i);
}
};
-//添加村社区块
-const addPolygonCountyCs = () => {
- // console.log(11111111111111, xkzDk);
- 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", () => {
- // console.log("名字", item.name);
- cs_dd_arr.value = [];
- cfCs.value = item.name;
- title_cs.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);
- }
+const getDatas = async (e, i) => {
+ if (i == "9999") {
+ 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: "9999",
+ ages: "总人口",
+ age: "",
+ value: "res.data.total",
+ },
+ {
+ id: "6666",
+ name: "死亡总人口",
+ value: "5650",
+ ages: "死亡总人口",
+ age: "1000",
+ },
+ ];
+ personTotal.value[0].rksl = res.data.total;
+ personTotal.value[0].ages = "总人口";
+ personTotal.value[1].rksl = res.data.swrs;
+ personTotal.value[1].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.committeeSwrs.map((items) => {
+ if (items.csq == item.name) {
+ item.swrs = items.swrs;
+ }
+ });
});
- 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);
- }
- });
- cs_qk_arr.value.forEach((item, index) => {
- map.removeOverlay(cs_qk_arr.value[index]);
+
+ 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]);
});
- getDataBq(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"
- ) {
- getDataBqs3(cfJd.value, cfCs.value, choose.value.person);
- } else {
- // getDataBqs(cfJd.value, cfCs.value);
- }
- //这段注意
- // if (choose.value.person == 1) {
- // getDatas2(cfJd.value, "0", cfCs.value); //0岁传字符串
- // } else {
- // getDatas2(cfJd.value, choose.value.person - 1, cfCs.value);
- // }
- getDatas2(cfJd.value, choose.value.person, cfCs.value);
- // getDatas2(cfJd.value, choose.value.person, cfCs.value);
- addCsChoose();
- addCsUnChoose();
- // 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);
- // });
- // }
- });
- }
- });
-};
-//添加选中社区
-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", () => {
- cfCs.value = item.name;
- title_cs.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);
+
+ 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 {
- unChooseList.value.push(itemm);
+ console.log("hhhhh", xkzCenter);
+ if (choose.value.person == "") {
+ addCs();
+ } else {
+ addCs2();
+ }
+ }
+ }
+ }
+ });
+};
+const getDatas2 = async (e, i, cs) => {
+ if (
+ i == "cjr" ||
+ i == "dibian" ||
+ i == "db" ||
+ i == "gxy" ||
+ i == "tnb" ||
+ i == "tyjr" ||
+ i == "kjer"
+ ) {
+ i = "";
+ }
+ await http
+ .get(
+ `/api/ggfwyth/ysyzt/getCssrksl?town=${e}&age=${i || ""}&committee=${cs}`
+ )
+ .then((res) => {
+ if (res.code == 200) {
+ personTotal.value = [
+ {
+ id: "9999",
+ ages: "总人口",
+ age: "",
+ value: "res.data.total",
+ },
+ {
+ id: "6666",
+ name: "死亡总人口",
+ value: "5650",
+ ages: "死亡总人口",
+ age: "1000",
+ },
+ ];
+ personTotal.value[0].rksl = res.data.total;
+ personTotal.value[0].ages = "总人口";
+ personTotal.value[1].rksl = res.data.swrs;
+ personTotal.value[1].ages = "死亡";
+ res.data.age.forEach((item, index) => {
+ personTotal.value.push({
+ id: index + 1,
+ rksl: item.rksl,
+ age: item.age + "",
+ ages: item.age + "岁",
+ });
+ });
+ xkzCenter.map((item) => {
+ item.swrs = 0;
+ res.data.committeeSwrs.map((items) => {
+ if (items.csq == item.name) {
+ item.swrs = items.swrs;
+ }
+ });
+ });
+ }
+ });
+};
+//获取特殊标签
+const getDataBq = async (jd, cs) => {
+ await http
+ .get(`/api/ggfwyth/ysyzt/getTsbq?csq=${cs || ""}&xzjd=${jd || ""}`)
+ .then((res) => {
+ if (res.code == 200) {
+ 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] || 0,
+ });
+ }
+ }
+ });
+};
+const getDataBqs = async (jd, cs, bq) => {
+ let data = {};
+ let vv = 0;
+ if (cs == "" && jd == "") {
+ data = {
+ tsbq: bq,
+ };
+ vv = 1;
+ } else if (cs == "") {
+ data = {
+ xzjd: jd,
+ tsbq: bq,
+ };
+ vv = 2;
+ } else {
+ data = {
+ xzjd: jd,
+ tsbq: bq,
+ csq: cs,
+ };
+ vv = 3;
+ }
+ await getDataBqJD(bq);
+ getDataBqs2(cfJd.value, cfCs.value, bq);
+ // await http.get(`/api/ggfwyth/ysyzt/getTsbqByXzjdOrCsq`, data).then((res) => {
+ // if (res.code == 200) {
+ // mapTownCount.map((item) => {
+ // item.numbers = 0;
+ // res.data.map((items) => {
+ // if (items.xzjd == item.name) {
+ // item.numbers = items.rs;
+ // }
+ // });
+ // });
+ // }
+ // });
+};
+const getDataBqs2 = async (jd, cs, bq, f = true) => {
+ //f用来判断执不执行changeRs2
+ let data = {};
+ let vv = 0;
+ if (cs == "" && jd == "") {
+ data = {
+ tsbq: bq,
+ };
+ vv = 1;
+ } else if (cs == "") {
+ data = {
+ xzjd: jd,
+ tsbq: bq,
+ };
+ vv = 2;
+ } else {
+ data = {
+ xzjd: jd,
+ tsbq: bq,
+ csq: cs,
+ };
+ vv = 3;
+ }
+ await http.get(`/api/ggfwyth/ysyzt/getTsbqByXzjdOrCsq`, data).then((res) => {
+ if (res.code == 200) {
+ xkzCenter.map((item) => {
+ item.numbers = 0;
+ res.data.map((items) => {
+ if (items.csq == item.name) {
+ item.numbers = items.rs;
}
});
- // cs_un_choose_arr.value.forEach((item, index) => {
- // map.removeOverlay(cs_qk_arr.value[index]);
- // });
- // getDataBqs(cfJd.value, cfCs.value);
- getDataBq(cfJd.value, cfCs.value);
- // if (choose.value.person == 1) {
- // getDatas2(cfJd.value, "0", cfCs.value); //0岁传字符串
- // } else {
- // getDatas2(cfJd.value, choose.value.person - 1, cfCs.value);
- // }
- getDatas2(cfJd.value, choose.value.person, cfCs.value);
- // getDatas2(cfJd.value, choose.value.person, 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"
- // ) {
- // getDataBqs2(cfJd.value, cfCs.value, choose.value.person, false);
- // }
- // if (choose.value.person == "") {
- // cs_dd_arr.value.map((item, index) => {
- // DGcreateCs(item, index);
- // });
- // } 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"
- ) {
- getDataBqs3(cfJd.value, cfCs.value, choose.value.person);
- }
- // 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);
- // });
- // }
- addCsChoose();
- addCsUnChoose();
});
+ if (f) {
+ changeRs2(bq);
+ }
+
+ 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]);
+ });
+ cs_dd_arr.value.forEach((item, index) => {
+ map.removeOverlay(cs_dd_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 {
+ console.log("hhhhh", xkzCenter);
+ if (choose.value.person == "") {
+ addCs();
+ } else {
+ addCs2();
+ }
+ }
+ }
}
});
};
-//创建村社
-const addCs = () => {
- xkzCenter.map((item, index) => {
- createCs(item, index);
- });
-};
-//创建村社(人数,标签)
-const addCs2 = () => {
- xkzCenter.map((item, index) => {
- createCs2(item, index);
- });
-};
-//添加村社
-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);
+//特殊标签单独获取各个街道人数
+const getDataBqJD = async (bq) => {
+ let data = {};
+ data = {
+ tsbq: bq,
+ };
- 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: -10,
- properties: {
- title: polygon.name,
- imgSrc2: dwd,
- type: "customOverlay",
- },
- });
- map.addOverlay(cs_name_arr.value[indexx]);
-};
-//添加村社+(人数,标签)
-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 = "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);
-
- 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;
- }
- let num = "";
- if (choose.value.person == "6666") {
- num = "swrs";
- } 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"
- ) {
- num = "numbers";
- } else {
- num = "number";
- }
- cs_number_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
- point: new BMapGL.Point(...polygon.center),
- opacity: 0.5,
- offsetY: -10,
- properties: {
- title: polygon.name,
- number: polygon[`${num}`],
- imgSrc2: dwd,
- type: "customOverlay",
- },
- });
- map.addOverlay(cs_number_name_arr.value[indexx]);
- cs_number_name_arr.value[indexx].addEventListener("click", () => {
- cfCsZs.value = polygon.name;
- 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 {
- open_detail();
+ await http.get(`/api/ggfwyth/ysyzt/getTsbqByXzjdOrCsq`, data).then((res) => {
+ if (res.code == 200) {
+ if (res?.data) {
+ mapTownCount.map((item) => {
+ item.numbers = 0;
+ res.data.map((items) => {
+ if (items.xzjd == item.name) {
+ item.numbers = items.rs;
+ }
+ });
+ });
+ }
}
});
};
-//添加单个村社
-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: -10,
- properties: {
- title: polygon.name,
- imgSrc2: dwd,
- type: "customOverlay",
- },
- });
- map.addOverlay(cs_dd_arr.value[indexx]);
-};
-//添加单个村社(+数量)
-const DGcreateCs2 = (polygon, indexx) => {
- // console.log(choose.value.person, "单个村社", polygon);
- // console.log("单个村社", polygon.name);
- // console.log("单个村社", polygon.number);
- // console.log("单个村社", polygon.swrs);
- 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 = "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);
-
- 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;
- }
- let num = "";
- if (choose.value.person == "6666") {
- num = "swrs";
- } 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"
- ) {
- num = "numbers";
- } else {
- num = "number";
- }
- cs_dd_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
- point: new BMapGL.Point(...polygon.center),
- opacity: 0.5,
- offsetY: -10,
- properties: {
- title: polygon.name,
- number: polygon[`${num}`],
- imgSrc2: dwd,
- type: "customOverlay",
- },
- });
- map.addOverlay(cs_dd_arr.value[indexx]);
- cs_dd_arr.value[indexx].addEventListener("click", () => {
- console.log(cfJd.value, polygon.name);
- cfCsZs.value = polygon.name;
- 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 {
- open_detail();
- }
- // open_detail();
- });
-};
//适配
const reset_font = () => {
let width = document.documentElement.clientWidth || document.body.clientWidth;
@@ -2937,23 +2664,31 @@ const reset_font = () => {
"scale(" + width / 1920 + "," + height / 1080 + ")";
}
};
-const reset_font2 = () => {
- let width = document.documentElement.clientWidth || document.body.clientWidth;
- let height =
- document.documentElement.clientHeight || document.body.clientHeight;
+// function initializeMap() {
+// map = new BMapGL.Map("allmap");
+// var point = new BMapGL.Point(119.175728, 28.846981);
+// map.centerAndZoom(point, 16);
+// map.enableScrollWheelZoom(true);
- document.querySelector(".detail").style.transformOrigin = "top left";
- document.querySelector(".detail").style.transform =
- "scale(" + width / 1920 + "," + height / 1080 + ")";
-};
+// // Initialize circle but don't add it to map yet
+// circle = new BMapGL.Circle(point, 900, {
+// strokeColor: "yellow",
+// strokeWeight: 2,
+// strokeOpacity: 0.8,
+// fillOpacity: 0.1,
+// fillColor: "yellow",
+// strokeStyle: "dashed",
+// zIndex: 99,
+// });
+// }
+
+// window.onload = initializeMap;
onMounted(() => {
- // tools.data.set("token", "6b0e380b4a8f46baae4923f83faf670d");
reset_font();
initMap();
getData();
getDataBq();
BMAP();
- getFwq();
});
@@ -2995,7 +2730,7 @@ onMounted(() => {
);
box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
backdrop-filter: blur(3px);
- padding: 30px 15px;
+ padding: 30px 26px;
display: flex;
flex-direction: column;
z-index: 12;
@@ -3003,47 +2738,6 @@ onMounted(() => {
//人口数
.lyx {
- .content_item2 {
- color: #ffffff;
- cursor: pointer;
- box-sizing: border-box;
- display: flex;
- align-items: center;
- justify-content: space-between;
- padding: 18px;
- padding-left: 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;
- }
-
- .content_item_value {
- display: flex;
- .content_item_percent {
- margin-left: 2px;
- color: #6bfeff;
- text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
- }
- }
-
.content {
box-sizing: border-box;
margin-top: 20px;
@@ -3051,7 +2745,7 @@ onMounted(() => {
flex-flow: row wrap;
justify-content: space-between;
color: #ffffff;
- height: 300px;
+ height: 450px;
overflow: auto;
.content_item {
@@ -3060,17 +2754,13 @@ onMounted(() => {
display: flex;
align-items: center;
justify-content: space-between;
- padding: 18px;
- padding-left: 24px;
- padding-right: 5px;
+ padding: 24px;
width: 48%;
- position: relative;
- // height: 57px;
+ height: 57px;
background-image: url(@/assets/images/map/unchoose.png);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 12px;
- font-size: 18px;
}
.content_item:first-child {
@@ -3078,67 +2768,52 @@ onMounted(() => {
display: flex;
align-items: center;
justify-content: space-between;
- padding: 18px;
- padding-left: 24px;
+ padding: 24px;
width: 100%;
- // height: 57px;
+ height: 57px;
background-image: url(@/assets/images/map/unchoose.png);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 12px;
}
- // .content_item:nth-child(2) {
- // box-sizing: border-box;
- // display: flex;
- // align-items: center;
- // justify-content: space-between;
- // padding: 18px;
- // padding-left: 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:nth-child(2) {
+ 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 {
+ 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;
- // }
+ .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;
+ }
- // .content_item_value {
- // display: flex;
- // .content_item_percent {
- // margin-left: 2px;
- // color: #6bfeff;
- // text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
- // }
- // }
-
- // .choose {
- // background-image: url(@/assets/images/map/choose.png) !important;
- // background-repeat: no-repeat !important;
- // background-size: 100% 100% !important;
- // }
- }
- .choose {
- background-image: url(@/assets/images/map/choose.png) !important;
- background-repeat: no-repeat !important;
- background-size: 100% 100% !important;
+ .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;
}
@@ -3146,7 +2821,7 @@ onMounted(() => {
//特殊标签
.tsbq {
- margin-top: 30px;
+ margin-top: 40px;
.content {
box-sizing: border-box;
@@ -3164,15 +2839,13 @@ onMounted(() => {
display: flex;
align-items: center;
justify-content: space-between;
- padding: 18px;
- padding-left: 24px;
+ padding: 24px;
width: 48%;
- // height: 57px;
+ height: 57px;
background-image: url(@/assets/images/map/unchoose.png);
background-repeat: no-repeat;
background-size: 100% 100%;
margin-bottom: 12px;
- font-size: 18px;
}
// .content_item:last-child {
@@ -3239,7 +2912,7 @@ onMounted(() => {
);
box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
backdrop-filter: blur(3px);
- padding: 30px 15px;
+ padding: 30px 26px;
display: flex;
flex-direction: column;
z-index: 12;
@@ -3336,7 +3009,7 @@ onMounted(() => {
.zyys_content_item {
width: 110px;
- height: 54px;
+ height: 52px;
cursor: pointer;
margin-bottom: 20px;
color: #ffffff;
@@ -3371,14 +3044,11 @@ onMounted(() => {
}
.title {
- background-image: url(@/assets/images/map/map_title_bg.png);
- background-repeat: no-repeat;
- background-size: 100% 100%;
.title_name {
cursor: pointer;
display: flex;
font-family: YouSheBiaoTiHei;
- font-size: 30px;
+ font-size: 34px;
font-weight: 900;
// line-height: 44px;
letter-spacing: 4px;
@@ -3389,15 +3059,15 @@ onMounted(() => {
/* 为了兼容性,添加渐变背景到IE */
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
- padding-left: 23px;
+
span {
display: block;
font-family: YouSheBiaoTiHei;
- font-size: 30px;
+ font-size: 34px;
font-weight: 900;
// line-height: 44px;
letter-spacing: 4px;
- margin-bottom: 18px;
+ margin-bottom: 15px;
background: linear-gradient(
180deg,
#ffffff 0%,
@@ -3412,163 +3082,11 @@ onMounted(() => {
}
}
- // .title_line {
- // height: 4px;
- // width: 100%;
- // border-top: 1px solid #ffffff;
- // border-bottom: 2px dashed #ffffff;
- // }
-}
-
-.age-container {
- position: relative;
- left: 10px;
- width: 450px;
- height: 120px;
- display: flex;
- align-items: center;
- margin-top: 4px;
-
- .progress-wrapper {
- display: flex;
- align-items: center;
- position: relative;
+ .title_line {
+ height: 4px;
width: 100%;
+ border-top: 1px solid #ffffff;
+ border-bottom: 2px dashed #ffffff;
}
-
- .progress-container {
- position: relative;
- transition: width 0.3s ease;
- height: 10px;
- background-color: rgba(255, 255, 255, 0.2);
-
- &.above-line {
- .dot {
- top: -20px;
- }
-
- .age-line {
- top: -30px;
- }
-
- span {
- &.above-line1 {
- top: -55px;
- }
- }
-
- &:nth-child(even) {
- .dot {
- top: -20px;
- }
-
- .age-line {
- top: -18px;
- }
-
- span {
- top: -40px;
- }
- }
- }
-
- &.below-line {
- .dot {
- top: 20px;
- }
-
- .age-line {
- top: 5px;
- }
-
- span {
- &.below-line1 {
- top: 40px;
- }
- }
-
- &:nth-child(odd) {
- .dot {
- top: 20px;
- }
-
- .age-line {
- top: 5px;
- }
-
- span {
- top: 30px;
- }
- }
- }
-
- .dot {
- width: 10px;
- height: 10px;
- border-radius: 50%;
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- }
-
- .age-line {
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- width: 1px;
- height: 20px;
- }
-
- span {
- position: absolute;
- left: 50%;
- transform: translateX(-50%);
- font-size: 14px;
-
- &.above-line1 {
- top: -50px;
- }
-
- &.below-line1 {
- top: 50px;
- }
- &.above-line2 {
- top: -55px !important; //上面百分比
- }
-
- &.below-line2 {
- top: 45px !important ; //下面百分比
- }
- }
- }
-
- .progress-container:first-child {
- border-radius: 5px 0 0 5px;
- }
-
- .progress-container:last-child {
- border-radius: 0 5px 5px 0;
- }
-}
-:deep(.el-table) {
- background: rgba(32, 64, 115, 1);
-
- --el-table-border-color: none;
- border: 1px solid #7aceff;
-}
-
-:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
- background-color: #2f4b74;
-}
-
-:deep(.el-table__empty-block) {
- background-color: #122560;
-}
-
-:deep(.el-table .el-table__row) {
- border-bottom: none;
-}
-.detail {
- z-index: 9998;
}