+
![]()
{{ item.name }}
@@ -80,6 +115,9 @@ import {
watch,
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";
@@ -109,20 +147,21 @@ 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";
-
-//删除(存放渲染的地块及图标)
-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 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 title_choose = ref("");
+const title_jd = ref("");
+const title_cs = ref("");
//是否单点社区
const sfdd = ref(false);
const xuanzhongCs = ref([]);
@@ -130,196 +169,8 @@ const xuanzhongCs = ref([]);
const cfJd = ref("");
//存放村社
const cfCs = ref("");
-//村社颜色列表
-const colorList = [
- {
- bg: "RGBA(52, 231, 134, 1)",
- },
- {
- bg: "RGBA(255, 206, 0, 1)",
- },
- {
- bg: "RGBA(186, 232, 128, 1)",
- },
- {
- bg: "RGBA(35, 146, 223, 1)",
- },
- {
- bg: "RGBA(60, 144, 252, 1)",
- },
- {
- bg: "RGBA(255, 142, 0, 1)",
- },
- {
- bg: "RGBA(137, 128, 0, 1)",
- },
- {
- bg: "RGBA(0, 207, 249, 1)",
- },
- {
- bg: "RGBA(27, 91, 55, 1)",
- },
-];
-//存放特殊标签中文对应的简写
-const tsbq_id_total = ref([
- {
- name: "残疾人",
- id: "cjr",
- },
- {
- name: "低边",
- id: "dibian",
- },
- {
- name: "低保",
- id: "db",
- },
- {
- name: "高血压",
- id: "gxy",
- },
- {
- name: "糖尿病",
- id: "tnb",
- },
- {
- 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();
-};
-//选中社区
-const chooseCsList = ref([]);
-const unChooseList = ref([]);
-const sqname = ref();
-const townName = ref();
-//中心点坐标
-const center_now = ref([]);
-const center_center = ref([119.178783, 29.034583]);
-//地图设置
-const mapTownCount = reactive([
- {
- name: "龙洲街道",
- center: [119.1573083, 28.9799445],
- number: "1000",
- },
- {
- name: "东华街道",
- center: [119.209592, 28.9799445],
- number: "1000",
- },
- {
- name: "小南海镇",
- center: [119.119616, 29.07309],
- number: "1000",
- },
- {
- name: "湖镇镇",
- center: [119.2906892, 29.0386151],
- number: "1000",
- },
- {
- name: "溪口镇",
- center: [119.1859408, 28.8879474],
- number: "1000",
- },
- {
- name: "詹家镇",
- center: [119.1201732, 29.005175],
- number: "1000",
- },
- {
- name: "塔石镇",
- center: [119.1256669, 29.1373072],
- number: "1000",
- },
- {
- name: "横山镇",
- center: [119.1876111, 29.1903275],
- number: "1000",
- },
- {
- name: "模环乡",
- center: [119.237015, 29.120862],
- number: "1000",
- },
- {
- name: "石佛乡",
- center: [119.1002998, 29.2018674],
- number: "1000",
- },
- {
- name: "沐尘畲族乡",
- center: [119.1837169, 28.8014116],
- number: "1000",
- },
- {
- name: "罗家乡",
- center: [119.2453273, 28.9130851],
- number: "1000",
- },
- {
- name: "庙下乡",
- center: [119.1037175, 28.8089885],
- number: "1000",
- },
- {
- name: "大街乡",
- center: [119.2664362, 28.8432149],
- number: "1000",
- },
- {
- name: "社阳乡",
- center: [119.3109367, 28.9074754],
- number: "1000",
- },
-]);
-
+//地图
+var map = null;
//默认龙游县灰色地块
const mapTownDataDK = reactive([]);
//社区地块
@@ -402,1011 +253,157 @@ const xkzCenter = reactive([
number: "50",
},
]);
-var map = null;
-// 鼠标点击添加点位
-let currentMarker = null; // 用于保存当前标记的引用
-const markera = (e) => {
- // 检查并移除当前标记
- if (currentMarker !== null) {
- map.removeOverlay(currentMarker);
- }
- // 创建新标记
- let icons = new BMapGL.Icon(AED, new BMapGL.Size(24, 62));
- var marker = new BMapGL.Marker(new BMapGL.Point(e.latlng.lng, e.latlng.lat), {
- icon: icons,
- });
- // 将新标记添加到地图中并更新当前标记引用
- map.addOverlay(marker);
- currentMarker = marker;
-};
-const BMAP = () => {
- // 添加鼠标点击事件监听器
- map.addEventListener("click", markera);
-};
-// 添加服务圈
-var circle;
-const drawACircle = (v) => {
- if (!circle) {
- var point = new BMapGL.Point(119.184803, 28.853725);
- circle = new BMapGL.Circle(point, 900, {
- strokeColor: "yellow",
- strokeWeight: 2,
-
- strokeOpacity: 0.8,
- fillOpacity: 0.1,
- // fillColor: "yellow",
- strokeStyle: "dashed",
- zIndex: 99,
- });
- map.addOverlay(circle);
- }
-
- if (v === "hide") {
- circle.hide();
- } else {
- circle.show();
- map.addOverlay(circle);
- map.setViewport({
- center: new BMapGL.Point(119.184803, 28.853725),
- 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;
- console.log(11111, item.name, townName.value);
- // if(item.name !== "溪口镇"){
- // jrcs.value=false;
- // console.log( jrcs.value,'000');
- // }
- // if (jrcs.value && item.name != "溪口镇") {
- // console.log(1);
- // } else {
- // console.log(2);
-
- // jrcs.value=true;
- if (item.name == cfJd.value) {
- // console.log(2222);
- } else {
- // console.log(111);
- cfJd.value = item.name;
- let jdCenter = [];
- if (item.name == "溪口镇") {
- BMAP();
- if (choose.value.person == 0) {
- getDatas("溪口镇", "");
- getDataBq(cfJd.value, "");
- } else if (choose.value.person == "cjr" || choose.value.person == "dibian" || choose.value.person == "db" || choose.value.person == "gxy" || choose.value.person == "tnb" || choose.value.person == "tyjr" || choose.value.person == "kjer") {
- getDataBq(cfJd.value, "");
- getDataBqs2(cfJd.value, '', choose.value.person,);
- console.log(3);
- } else {
- console.log(4);
- getDatas("溪口镇", choose.value.person);
- }
-
- if (!title_choose.value.includes("溪口镇")) {
- title_choose.value = title_choose.value + `>${item.name}`;
- }
- loadCs();
- addPolygonCountyCs();
- mapTownCount.map((item) => {
- if (item.name == "溪口镇") {
- jdCenter = item.center;
- }
- });
- // if (choose.value.person == "") {
- // addCs();
- // } else {
- // addCs2();
- // }
- goMapCenter(jdCenter, 13);
- } else {
- map.removeEventListener("click", markera);
- if (currentMarker !== null) {
- map.removeOverlay(currentMarker);
- }
- cfJd.value = "";
- cfCs.value = "";
- xuanzhongCs.value = [];
- sfdd.value = false;
- title_choose.value = "";
- cs_un_choose_arr.value.forEach((item, index) => {
- map.removeOverlay(cs_un_choose_arr.value[index]);
- });
- cs_choose_arr.value.forEach((item, index) => {
- map.removeOverlay(cs_choose_arr.value[index]);
- });
- cs_number_name_arr.value.forEach((item, index) => {
- map.removeOverlay(cs_number_name_arr.value[index]);
- });
- cs_name_arr.value.forEach((item, index) => {
- map.removeOverlay(cs_name_arr.value[index]);
- });
- cs_qk_arr.value.forEach((item, index) => {
- map.removeOverlay(cs_qk_arr.value[index]);
- });
- cs_dd_arr.value.forEach((item, index) => {
- map.removeOverlay(cs_dd_arr.value[index]);
- });
- // jdm_arr.value = [];
- // jdm_number_arr.value = [];
- // fwq_list_arr.value = [];
- cs_qk_arr.value = [];
- cs_name_arr.value = [];
- cs_number_name_arr.value = [];
- cs_choose_arr.value = [];
- cs_un_choose_arr.value = [];
- cs_dd_arr.value = [];
- getData();
- }
- }
-
- // }
- });
- }
- });
-};
-//添加街道名
-
-const addJd = () => {
- mapTownCount.map((item, index) => {
- createCustomOverlayJd(item, index);
- });
-};
-//添加街道名2含数量
-const addJd2 = () => {
- 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}`;
- console.log(item.name);
- cs_qk_arr.value.forEach((item, index) => {
- map.removeOverlay(cs_qk_arr.value[index]);
- });
- cs_name_arr.value.forEach((item, index) => {
- map.removeOverlay(cs_name_arr.value[index]);
- });
- cs_number_name_arr.value.forEach((item, index) => {
- map.removeOverlay(cs_number_name_arr.value[index]);
- });
- if (choose.value.person == "") {
- cs_dd_arr.value.map((item, index) => {
- DGcreateCs(item, index);
- });
- } else {
- cs_dd_arr.value.map((item, index) => {
- DGcreateCs2(item, index);
- });
- }
- if (choose.value.person == "cjr" || choose.value.person == "dibian" || choose.value.person == "db" || choose.value.person == "gxy" || choose.value.person == "tnb" || choose.value.person == "tyjr" || choose.value.person == "kjer") {
- console.log(1, '溪口镇');
- getDataBqs2(cfJd.value, cfCs.value, '');
- } else {
- console.log(2, '溪口镇');
-
- getDatas2('溪口镇', choose.value.person, cfCs.value);
-
- }
- addCsChoose();
- addCsUnChoose();
- });
- }
- });
-};
-//添加选中社区
-const addCsChoose = () => {
- chooseCsList.value.map((item, index) => {
- sqname.value = item.name;
- let fillColor = "blue";
- //地区的坐标范围
- let points = [];
- item.point[0].map((p) => points.push(new BMapGL.Point(...p)));
- if (points.length) {
- //创建面
- cs_choose_arr.value[index] = new BMapGL.Polygon(points, {
- strokeColor: fillColor,
- strokeWeight: 2,
- strokeOpacity: 0.8,
- fillColor: fillColor,
- fillOpacity: 0.4,
- name: item.name,
- zIndex: 99,
- });
- map.addOverlay(cs_choose_arr.value[index]);
- }
- });
-};
-//添加未选中社区
-const addCsUnChoose = () => {
- unChooseList.value.map((item, index) => {
- let fillColor = "RGBA(125, 140, 154, 1)";
- //地区的坐标范围
- let points = [];
- item.point[0].map((p) => points.push(new BMapGL.Point(...p)));
- if (points.length) {
- //创建面
- cs_un_choose_arr.value[index] = new BMapGL.Polygon(points, {
- strokeColor: fillColor,
- strokeWeight: 2,
- strokeOpacity: 0.8,
- fillColor: fillColor,
- fillOpacity: 0.5,
- name: item.name,
- zIndex: 99,
- });
- map.addOverlay(cs_un_choose_arr.value[index]);
- cs_un_choose_arr.value[index].addEventListener("click", () => {
- title_choose.value = title_choose.value.slice(
- 0,
- -(cfCs.value.length + 1)
- );
-
- cfCs.value = item.name;
- title_choose.value = title_choose.value + `>${cfCs.value}`;
-
- sfdd.value = true;
-
- cs_dd_arr.value.forEach((item, index) => {
- map.removeOverlay(cs_dd_arr.value[index]);
- });
- cs_un_choose_arr.value.forEach((item, index) => {
- map.removeOverlay(cs_un_choose_arr.value[index]);
- });
- cs_choose_arr.value.forEach((item, index) => {
- map.removeOverlay(cs_choose_arr.value[index]);
- });
- chooseCsList.value.length = 0;
- unChooseList.value.length = 0;
- cs_dd_arr.value = [];
- xuanzhongCs.value = [];
- xkzCenter.forEach((a, b) => {
- if (a.name == item.name) {
- cs_dd_arr.value.push(a);
- xuanzhongCs.value.push(a);
- }
- });
- xkzDk.forEach((itemm, indexx) => {
- if (itemm.name == item.name) {
- chooseCsList.value.push(itemm);
- } else {
- unChooseList.value.push(itemm);
- }
- });
- cs_un_choose_arr.value.forEach((item, index) => {
- map.removeOverlay(cs_qk_arr.value[index]);
- });
- getDatas2(cfJd.value, choose.value.person, cfCs.value);
- 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 = "9px";
- number.style.fontWeight = "600";
- number.style.color = "#FEFF6C";
- number.style.textShadow = "0px 2px 4px rgba(0,0,0,0.5)";
- div.appendChild(number);
- number.appendChild(document.createTextNode(this.properties.number));
- content.appendChild(div);
- div.onclick = function () {
- let jdCenter = [];
- if (polygon.name == "溪口镇") {
- title_choose.value = title_choose.value + `>${polygon.name}`;
- loadCs();
- addPolygonCountyCs();
- mapTownCount.map((item) => {
- if (item.name == "溪口镇") {
- jdCenter = item.center;
- }
- });
- addCs2();
- goMapCenter(jdCenter, 14);
- }
- };
- return content;
- }
- let num = "";
- if (choose.value.person == "6666") {
- num = "swrs";
- } if (choose.value.person == "cjr" || choose.value.person == "dibian" || choose.value.person == "db" || choose.value.person == "gxy" || choose.value.person == "tnb" || choose.value.person == "tyjr" || choose.value.person == "kjer") {
- 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";
- 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";
- } 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";
- div.style.minWidth = "60px";
- div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
- div.style.transform = "translateY(50px)";
- div.setAttribute("name", this.properties.title);
-
- var title = document.createElement("div");
- title.style.fontSize = "10px";
- title.style.fontWeight = "600";
- title.style.color = "#000000";
- div.appendChild(title);
- title.appendChild(document.createTextNode(this.properties.title));
- content.appendChild(div);
- let img2 = document.createElement("img");
- img2.style.width = "20px";
- img2.style.height = "26px";
- img2.src = this.properties.imgSrc2;
-
- content.appendChild(div);
- content.appendChild(img2);
- return content;
- }
- cs_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
- point: new BMapGL.Point(...polygon.center),
- opacity: 0.5,
- offsetY: 0,
- properties: {
- title: polygon.name,
- imgSrc2: dwd,
- type: "customOverlay",
- },
- });
- map.addOverlay(cs_name_arr.value[indexx]);
-};
-//添加单个村社
-const DGcreateCs = (polygon, indexx) => {
- function createLabelDOM() {
- var content = document.createElement("div");
- content.style.display = "flex";
- content.style.flexDirection = "column";
- content.style.alignItems = "center";
- content.style.height = "60px";
- content.style.width = "60px";
- content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
-
- var div = document.createElement("div");
- div.style.color = "#333";
- div.style.whiteSpace = "nowrap";
- div.style.MozUserSelect = "none";
- div.style.display = "flex";
- div.style.justifyContent = "center";
- div.style.alignItems = "center";
- div.style.cursor = "pointer";
- div.style.padding = "5px";
- div.style.minWidth = "60px";
- div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
- div.style.transform = "translateY(50px)";
- div.setAttribute("name", this.properties.title);
-
- var title = document.createElement("div");
- title.style.fontSize = "10px";
- title.style.fontWeight = "600";
- title.style.color = "#000000";
- div.appendChild(title);
- title.appendChild(document.createTextNode(this.properties.title));
- content.appendChild(div);
- let img2 = document.createElement("img");
- img2.style.width = "20px";
- img2.style.height = "26px";
- img2.src = this.properties.imgSrc2;
-
- content.appendChild(div);
- content.appendChild(img2);
- return content;
- }
- cs_dd_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
- point: new BMapGL.Point(...polygon.center),
- opacity: 0.5,
- offsetY: 0,
- properties: {
- title: polygon.name,
- imgSrc2: dwd,
- type: "customOverlay",
- },
- });
- map.addOverlay(cs_dd_arr.value[indexx]);
-};
-const DGcreateCs2 = (polygon, indexx) => {
- 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 = "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";
- } 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";
- }
- console.log("单个", num);
- 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 || !fwqList.value) {
- fwqList.value.map((item, index) => {
- createCustomOverlay(item, index);
- });
- // return;
- // }
-};
-// 添加公共服务圈的图标
-const createCustomOverlay = (polygon, indexx) => {
- drawACircle();
- function createLabelDOM() {
- var content = document.createElement("div");
- content.style.display = "flex";
- content.style.flexDirection = "column";
- content.style.alignItems = "center";
- content.style.height = "40px";
- content.style.width = "40px";
- content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
-
- var div = document.createElement("div");
- div.style.color = "#ddd";
- div.style.padding = `${polygon.padding}`;
- div.style.whiteSpace = "nowrap";
- div.style.MozUserSelect = "none";
- div.style.fontSize = "12px";
- div.style.borderRadius = "10px";
- div.style.display = "flex";
- div.style.justifyContent = "center";
- div.style.alignItems = "center";
- div.style.background = `url(${polygon.img}) no-repeat 0/100% 100%`;
- div.style.cursor = "pointer";
- div.style.transform = `translate(${polygon.x}px,${polygon.y}px)`;
- div.setAttribute("name", this.properties.title);
-
- var title = document.createElement("div");
- title.style.fontSize = "14px";
- title.style.fontWeight = "700";
- title.style.marginLeft = "0px";
- title.style.color = `${polygon.textColor}`;
- div.appendChild(title);
- title.appendChild(document.createTextNode(this.properties.title));
-
- let img2 = document.createElement("img");
- img2.style.width = "20px";
- img2.style.height = "20px";
- img2.src = this.properties.imgSrc2;
-
- content.appendChild(div);
- content.appendChild(img2);
-
- // div.onclick = function () {
- // addPolygonTown(this.getAttribute('name'))
- // removeCustomOverlay()
- // addStage(this.getAttribute('name'))
- // state.mapStatus = 1
- // }
-
- return content;
- }
- fwq_list_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
- point: new BMapGL.Point(...polygon.point),
- opacity: 0.5,
- offsetY: 0,
- properties: {
- title: polygon.name,
- imgSrc2: polygon.img2,
- type: "customOverlay",
- },
- });
- // var labelopts = {
- // position: new BMapGL.Point(polygon.point[0], polygon.point[1]), // 指定文本标注所在的地理位置
- // offset: new BMapGL.Size(0, -97), // 设置文本偏移量
- // };
- // var label = new BMapGL.Label(polygon.name, labelopts);
- // label.setStyle({
- // color: "#fff",
- // borderRadius: "1px",
- // padding: "5px 13px",
- // // background: `url(${b1s}) no-repeat 0/100% 100%`,
- // fontSize: "15px",
- // lineHeight: "20px",
- // border: "0",
- // transform: "translateX(-50%)",
- // });
- map.addOverlay(fwq_list_arr.value[indexx]);
-};
-
-//地图中点
-const goMapCenter = (point, zoom) => {
- map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom);
-};
-const removeAllPolygon = (e) => {
- let allOverlay = map.getOverlays();
- for (let i = 0; i < allOverlay.length; i++) {
- map.removeOverlay(allOverlay[i]);
- }
- // if (e == "fwq") {
- // addPolygonCounty();
- // nextTick(() => {
- // addJd();
- // });
- // } else {
- // addPolygonCounty();
- // nextTick(() => {
- // addJd2();
- // });
- // }
-};
-//选项设置
+//村社颜色列表
+const 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 chooseArr = ref([]);
-
const choose = ref({
person: "",
- bq: 9999,
fwq: 9999,
yaosu: 9999,
});
-const changeRs = (id) => {
- if (choose.value.person == id) {
- choose.value.person = "";
- jdm_number_arr.value.forEach((item, index) => {
- map.removeOverlay(jdm_number_arr.value[index]);
- });
- 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) => {
- 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 = (id, list, center) => {
- if (choose.value.fwq == id) {
- // chooseArr.value = chooseArr.value.filter((item) => item !== "fwq");
- choose.value.fwq = 9999;
- console.log(11);
- csh();
- addPolygonCounty();
- setTimeout(() => {
- drawACircle("hide");
- }, 500);
- // 清空地图上所有的覆盖物
- fwq_list_arr.value.forEach((item, index) => {
- map.removeOverlay(fwq_list_arr.value[index]);
- });
- } else {
- choose.value.fwq = id;
- fwqList.value = list;
- // 清空地图上所有的覆盖物
- console.log(22);
- map.clearOverlays();
-
- setTimeout(() => {
- // drawACircle();
- addggfwq();
- goMapCenter(center, 16);
- }, 500);
- }
-
- // choose.value.fwq = id;
- // removeAllPolygon("fwq");
- // fwqList.value = list;
- // goMapCenter(center, 17);
- // fwqList.value.map((item) => {
- // createCustomOverlay(item);
- // });
-};
-
-const changeys = (id) => {
- choose.value.yaosu = id;
-};
//人口数
const personTotal = ref([
{
@@ -1416,107 +413,7 @@ const personTotal = ref([
ages: "总人口",
age: "1000",
},
- {
- id: 1,
- name: "0岁",
- value: "26737",
- ages: "0岁",
- age: "1000",
- },
- {
- id: 2,
- name: "1岁",
- value: "26737",
- ages: "1岁",
- age: "1000",
- },
- {
- id: 3,
- name: "2岁",
- value: "26737",
- ages: "2岁",
- age: "1000",
- },
- {
- id: 4,
- name: "3岁",
- value: "26737",
- ages: "3岁",
- age: "1000",
- },
-
- {
- id: 5,
- name: "4岁",
- value: "26737",
- ages: "4岁",
- age: "1000",
- },
- {
- id: 6,
- name: "5岁",
- value: "26737",
- ages: "5岁",
- age: "1000",
- },
- {
- id: 7,
- name: "6岁",
- value: "26737",
- ages: "6岁",
- age: "1000",
- },
- {
- id: 8,
- name: "7岁",
- value: "26737",
- ages: "7岁",
- age: "1000",
- },
- {
- id: 9,
- name: "8岁",
- value: "26737",
- ages: "8岁",
- age: "1000",
- },
- {
- id: 10,
- name: "9岁",
- value: "26737",
- ages: "9岁",
- age: "1000",
- },
- {
- id: 11,
- name: "10岁",
- value: "26737",
- ages: "10岁",
- age: "1000",
- },
- {
- id: 12,
- name: "11岁",
- value: "26737",
- ages: "11岁",
- age: "1000",
- },
- {
- id: 13,
- name: "12岁",
- value: "26737",
- ages: "12岁",
- age: "1000",
- },
- {
- id: 14,
- name: "死亡总人口",
- value: "5650",
- ages: "死亡总人口",
- age: "1000",
- },
]);
-
//特殊标签
const tsbqTotal = ref([
{
@@ -1565,7 +462,12 @@ const tsbqTotal = ref([
value: "26737",
},
]);
-
+const data = reactive({
+ serviceCircleList: [],
+ fwqCoordinates: "", //服务圈中心坐标
+ fwqCoordinates1: [], //服务圈中心坐标
+ fwqCoordinates2: [], //服务圈中心坐标
+});
//基本公共服务圈
const jbfwqTotal = ref([
{
@@ -1644,218 +546,7 @@ const jbfwqTotal = ref([
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",
- },
- ],
+ fwqList: [],
},
{
id: 42,
@@ -2048,7 +739,204 @@ const jbfwqTotal = ref([
],
},
]); //存放地图上服务圈数据
+//点击服务圈村
+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;
+ // drawACircle("hide"); //隐藏服务圈 圆
+ } else {
+ clear()
+ 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 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 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("无数据");
+ }
+};
+// 添加服务圈
+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, 1000, {
+ strokeColor: "yellow",
+ strokeWeight: 2,
+ strokeOpacity: 0.8,
+ fillOpacity: 0.1,
+ strokeStyle: "dashed",
+ zIndex: 99,
+ // fillColor: "yellow",
+ });
+ map.addOverlay(circle);
+ }
+};
const fwqList = ref([]);
+// 添加公共服务圈的图标
+const createCustomOverlay = (polygon, indexx) => {
+ // 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);
+
+ var div = document.createElement("div");
+ div.style.color = "#ddd";
+ div.style.padding = `${polygon.padding}`;
+ div.style.whiteSpace = "nowrap";
+ div.style.MozUserSelect = "none";
+ div.style.fontSize = "12px";
+ div.style.borderRadius = "10px";
+ div.style.display = "flex";
+ div.style.justifyContent = "center";
+ div.style.alignItems = "center";
+ div.style.background = `url(${polygon.img}) no-repeat 0/100% 100%`;
+ div.style.cursor = "pointer";
+ div.style.transform = `translate(${polygon.x}px,${polygon.y}px)`;
+ div.setAttribute("name", this.properties.title);
+
+ var title = document.createElement("div");
+ title.style.fontSize = "14px";
+ title.style.fontWeight = "700";
+ title.style.marginLeft = "0px";
+ title.style.color = `${polygon.textColor}`;
+ div.appendChild(title);
+ title.appendChild(document.createTextNode(this.properties.title));
+
+ let img2 = document.createElement("img");
+ img2.style.width = "20px";
+ img2.style.height = "20px";
+ img2.src = this.properties.imgSrc2;
+
+ content.appendChild(div);
+ content.appendChild(img2);
+
+ // div.onclick = function () {
+ // addPolygonTown(this.getAttribute('name'))
+ // removeCustomOverlay()
+ // addStage(this.getAttribute('name'))
+ // state.mapStatus = 1
+ // }
+
+ return content;
+ }
+ fwq_list_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
+ point: new BMapGL.Point(...polygon.point),
+ opacity: 0.5,
+ offsetY: 0,
+ properties: {
+ title: polygon.name,
+ imgSrc2: polygon.img2,
+ type: "customOverlay",
+ },
+ });
+ // var labelopts = {
+ // position: new BMapGL.Point(polygon.point[0], polygon.point[1]), // 指定文本标注所在的地理位置
+ // offset: new BMapGL.Size(0, -97), // 设置文本偏移量
+ // };
+ // var label = new BMapGL.Label(polygon.name, labelopts);
+ // label.setStyle({
+ // color: "#fff",
+ // borderRadius: "1px",
+ // padding: "5px 13px",
+ // // background: `url(${b1s}) no-repeat 0/100% 100%`,
+ // fontSize: "15px",
+ // lineHeight: "20px",
+ // border: "0",
+ // transform: "translateX(-50%)",
+ // });
+ map.addOverlay(fwq_list_arr.value[indexx]);
+};
+const updateFwqList = (data, townName, communityName) => {
+ let updatedFwqList = [];
+ jbfwqTotal.value.forEach((town) => {
+ if (town.name === townName) {
+ town.child.forEach((community) => {
+ if (community.name === communityName) {
+ updatedFwqList = data
+ .filter(
+ (item) => item.xzjd === townName && item.csq === communityName
+ )
+ .map((item) => ({
+ x: 53,
+ y: 0,
+ img: fwqbg1,
+ img2: b2,
+ name: item.zyysmc,
+ point: [item.jd, item.wd],
+ padding: "4px 8px 10px",
+ textColor: "#fff",
+ bgColor: "#00b050",
+ }));
+ community.fwqList = updatedFwqList;
+ }
+ });
+ }
+ });
+ fwqList.value = updatedFwqList;
+ // console.log(jbfwqTotal.value[4].child[0], "乡镇");
+};
//资源要素
const yaosuTotal = ref([
{
@@ -2119,18 +1007,116 @@ const yaosuTotal = ref([
wz: true,
},
]);
+// 鼠标点击添加点位
+let currentMarker = null; // 用于保存当前标记的引用
+//--------定义方法----------------------------------------
+//地图初始化
+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 csh = () => {
+ clear();
+
+ 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 = "";
+ 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) => {
+ // 检查并移除当前标记
+ if (currentMarker !== null) {
+ map.removeOverlay(currentMarker);
+ }
+ // 创建新标记
+ let icons = new BMapGL.Icon(AED, new BMapGL.Size(24, 62));
+ var marker = new BMapGL.Marker(new BMapGL.Point(e.latlng.lng, e.latlng.lat), {
+ icon: icons,
+ });
+ // 将新标记添加到地图中并更新当前标记引用
+ map.addOverlay(marker);
+ currentMarker = marker;
+};
+//点击人口数
const 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 getData = async (i, e) => {
+ if (e == "9999") {
+ e = "";
+ }
await http
.get(`/api/ggfwyth/ysyzt/getXzjdrksl?age=${e || ""}`)
.then((res) => {
@@ -2138,34 +1124,38 @@ const getData = async (i, e) => {
if (cfJd.value == "") {
personTotal.value = [
{
- id: "0",
+ id: "9999",
ages: "总人口",
age: "",
value: "res.data.total",
},
{
id: "6666",
- name: "死亡总人口",
+ name: "近一年死亡",
value: "5650",
- ages: "死亡总人口",
+ ages: "近一年死亡",
age: "1000",
+ 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].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,
});
});
}
+ // console.log("人口", personTotal.value);
mapTownCount.map((item) => {
- // item.number = 0;
+ item.swrs = 0;
res.data.townWwrs.map((items) => {
if (items.xzjd == item.name) {
item.swrs = items.swrs;
@@ -2187,6 +1177,9 @@ const getData = async (i, e) => {
}
};
const getDatas = async (e, i) => {
+ if (i == "9999") {
+ i = "";
+ }
await http
.get(`/api/ggfwyth/ysyzt/getCssrksl?town=${e}&age=${i || ""}`)
.then((res) => {
@@ -2195,39 +1188,35 @@ const getDatas = async (e, i) => {
} else if (cfJd.value !== "") {
personTotal.value = [
{
- id: "0",
+ id: "9999",
ages: "总人口",
age: "",
value: "res.data.total",
},
{
id: "6666",
- name: "死亡总人口",
+ name: "近一年死亡",
value: "5650",
- ages: "死亡总人口",
+ ages: "近一年死亡",
age: "1000",
+ 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].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,
});
});
}
- // 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) => {
@@ -2252,8 +1241,11 @@ const getDatas = async (e, i) => {
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 == "") {
+ if (title_jd.value == "") {
} else {
if (sfdd.value) {
if (choose.value.person == "") {
@@ -2286,8 +1278,16 @@ const getDatas = async (e, i) => {
});
};
const getDatas2 = async (e, i, cs) => {
- if (i == "cjr" || i == "dibian" || i == "db" || i == "gxy" || i == "tnb" || i == "tyjr" || i == "kjer") {
- i = ''
+ if (
+ i == "cjr" ||
+ i == "dibian" ||
+ i == "db" ||
+ i == "gxy" ||
+ i == "tnb" ||
+ i == "tyjr" ||
+ i == "kjer"
+ ) {
+ i = "";
}
await http
.get(
@@ -2297,29 +1297,31 @@ const getDatas2 = async (e, i, cs) => {
if (res.code == 200) {
personTotal.value = [
{
- id: "0",
+ id: "9999",
ages: "总人口",
age: "",
value: "res.data.total",
},
{
id: "6666",
- name: "死亡总人口",
+ name: "近一年死亡",
value: "5650",
- ages: "死亡总人口",
+ 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 = "死亡";
+ 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,
});
});
xkzCenter.map((item) => {
@@ -2333,7 +1335,9 @@ const getDatas2 = async (e, i, cs) => {
}
});
};
+//特殊标签
//获取特殊标签
+//特殊标签列表数据请求
const getDataBq = async (jd, cs) => {
await http
.get(`/api/ggfwyth/ysyzt/getTsbq?csq=${cs || ""}&xzjd=${jd || ""}`)
@@ -2350,55 +1354,31 @@ const getDataBq = async (jd, cs) => {
tsbqTotal.value.push({
id: idd,
name: name,
- rksl: res.data[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 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;
- }
- });
- });
- console.log(mapTownCount, 'mapTownCount');
- changeRs2(bq);
- if (jd) {
- addCs2();
- }
-
- }
- });
+ 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) => {
+//特殊标签获取街道内部人数
+const getDataBqs2 = async (jd, cs, bq, f = true) => {
+ //f用来判断执不执行changeRs2
let data = {};
let vv = 0;
if (cs == "" && jd == "") {
@@ -2422,16 +1402,6 @@ const getDataBqs2 = async (jd, cs, bq) => {
}
await http.get(`/api/ggfwyth/ysyzt/getTsbqByXzjdOrCsq`, data).then((res) => {
if (res.code == 200) {
- // if (cfJd.value == "") {
- // res.data.forEach((item, index) => {
- // tsbqTotal.value.push({
- // id: index + 1,
- // rksl: item.rksl,
- // age: item.age + "",
- // ages: item.age + "岁",
- // });
- // });
- // }
xkzCenter.map((item) => {
item.numbers = 0;
res.data.map((items) => {
@@ -2440,12 +1410,905 @@ const getDataBqs2 = async (jd, cs, bq) => {
}
});
});
- console.log(mapTownCount);
- changeRs2(bq);
- addCs2();
+ 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 {
+ // console.log("hhhhh", xkzCenter);
+ 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 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 = [];
+ if (item_name == "溪口镇") {
+ BMAP();
+ if (choose.value.person == "") {
+ 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"
+ ) {
+ getDataBqs2(cfJd.value, cfCs.value, choose.value.person, false);
+ getDatas("溪口镇", "");
+ } else if (choose.value.person != "") {
+ if (choose.value.person == "9999") {
+ getDatas("溪口镇", "");
+ } else {
+ if (choose.value.person == 1) {
+ getDatas("溪口镇", "0"); //0岁传字符串
+ } else {
+ getDatas("溪口镇", choose.value.person - 1);
+ }
+ }
+ }
+ loadCs();
+ addPolygonCountyCs();
+ mapTownCount.map((item) => {
+ if (item.name == item_name) {
+ jdCenter = item.center;
+ }
+ });
+ goMapCenter(jdCenter, 13);
+ }
+ // }
+};
+//------------------------------
+//-------乡镇街道级别---------
+//加载乡镇信息
+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 {
+ cfJd.value = item.name;
+ let jdCenter = [];
+ if (item.name == "溪口镇") {
+ console.log(444444444, choose.value.person);
+ BMAP();
+
+ getDataBq(cfJd.value, "");
+ if (choose.value.person == "") {
+ getDatas("溪口镇", "");
+ }
+ 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("溪口镇", "");
+ } else if (choose.value.person != "") {
+ if (choose.value.person == "9999") {
+ getDatas("溪口镇", "");
+ } else {
+ if (choose.value.person == 1) {
+ getDatas("溪口镇", "0"); //0岁传字符串
+ } else {
+ getDatas("溪口镇", choose.value.person - 1);
+ }
+ }
+ }
+ if (title_jd.value == item.name) {
+ } else {
+ title_jd.value = item.name;
+ }
+
+ loadCs();
+ addPolygonCountyCs();
+ mapTownCount.map((item) => {
+ if (item.name == "溪口镇") {
+ jdCenter = item.center;
+ }
+ });
+ goMapCenter(jdCenter, 13);
+ } else {
+ 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 = "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 = "12px";
+ 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 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;
+ 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);
+ }
+ });
+ 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]);
+ });
+ 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 {
+ // 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", () => {
+ 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);
+ } 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"
+ // ) {
+ // 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"
+ ) {
+ getDataBqs2(cfJd.value, cfCs.value, choose.value.person, false);
+ } else {
+ setTimeout(() => {
+ cs_dd_arr.value.map((item, index) => {
+ DGcreateCs2(item, index);
+ });
+ }, 400);
+ }
+ addCsChoose();
+ addCsUnChoose();
+ });
+ }
+ });
+};
+//创建村社
+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);
+
+ var div = document.createElement("div");
+ div.style.color = "#333";
+ div.style.whiteSpace = "nowrap";
+ div.style.MozUserSelect = "none";
+ div.style.display = "flex";
+ div.style.justifyContent = "center";
+ div.style.alignItems = "center";
+ div.style.cursor = "pointer";
+ div.style.padding = "5px";
+ div.style.minWidth = "60px";
+ div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
+ div.style.transform = "translateY(50px)";
+ div.setAttribute("name", this.properties.title);
+
+ var title = document.createElement("div");
+ title.style.fontSize = "10px";
+ title.style.fontWeight = "600";
+ title.style.color = "#000000";
+ div.appendChild(title);
+ title.appendChild(document.createTextNode(this.properties.title));
+ content.appendChild(div);
+ let img2 = document.createElement("img");
+ img2.style.width = "20px";
+ img2.style.height = "26px";
+ img2.src = this.properties.imgSrc2;
+
+ content.appendChild(div);
+ content.appendChild(img2);
+ return content;
+ }
+ cs_name_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
+ point: new BMapGL.Point(...polygon.center),
+ opacity: 0.5,
+ offsetY: 0,
+ properties: {
+ title: polygon.name,
+ imgSrc2: dwd,
+ type: "customOverlay",
+ },
+ });
+ map.addOverlay(cs_name_arr.value[indexx]);
+};
+//添加村社+(人数,标签)
+const createCs2 = (polygon, indexx) => {
+ function createLabelDOM() {
+ var content = document.createElement("div");
+ content.style.display = "flex";
+ content.style.flexDirection = "column";
+ content.style.alignItems = "center";
+ content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
+ content.style.height = "60px";
+ content.style.width = "60px";
+ var div = document.createElement("div");
+ div.style.color = "#333";
+ div.style.whiteSpace = "nowrap";
+ div.style.MozUserSelect = "none";
+ div.style.display = "flex";
+ div.style.justifyContent = "space-between";
+ div.style.alignItems = "center";
+ div.style.cursor = "pointer";
+ div.style.padding = "5px";
+ div.style.minWidth = "90px";
+ div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
+ div.style.transform = "translateY(50px)";
+ div.setAttribute("name", this.properties.title);
+
+ var title = document.createElement("div");
+ title.style.fontSize = "10px";
+ title.style.fontWeight = "600";
+ title.style.color = "#000000";
+ div.appendChild(title);
+ title.appendChild(document.createTextNode(this.properties.title));
+ content.appendChild(div);
+
+ var number = document.createElement("div");
+ number.style.fontSize = "10px";
+ number.style.fontWeight = "600";
+ number.style.color = "black";
+ div.appendChild(number);
+ number.appendChild(document.createTextNode(this.properties.number));
+ // content.appendChild(div);
+ let img2 = document.createElement("img");
+ img2.style.width = "20px";
+ img2.style.height = "26px";
+ img2.src = this.properties.imgSrc2;
+
+ content.appendChild(div);
+ content.appendChild(img2);
+ return content;
+ }
+ 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 DGcreateCs = (polygon, indexx) => {
+ function createLabelDOM() {
+ var content = document.createElement("div");
+ content.style.display = "flex";
+ content.style.flexDirection = "column";
+ content.style.alignItems = "center";
+ content.style.height = "60px";
+ content.style.width = "60px";
+ content.style.zIndex = BMapGL.Overlay.getZIndex(this.point.lat);
+
+ var div = document.createElement("div");
+ div.style.color = "#333";
+ div.style.whiteSpace = "nowrap";
+ div.style.MozUserSelect = "none";
+ div.style.display = "flex";
+ div.style.justifyContent = "center";
+ div.style.alignItems = "center";
+ div.style.cursor = "pointer";
+ div.style.padding = "5px";
+ div.style.minWidth = "60px";
+ div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
+ div.style.transform = "translateY(50px)";
+ div.setAttribute("name", this.properties.title);
+
+ var title = document.createElement("div");
+ title.style.fontSize = "10px";
+ title.style.fontWeight = "600";
+ title.style.color = "#000000";
+ div.appendChild(title);
+ title.appendChild(document.createTextNode(this.properties.title));
+ content.appendChild(div);
+ let img2 = document.createElement("img");
+ img2.style.width = "20px";
+ img2.style.height = "26px";
+ img2.src = this.properties.imgSrc2;
+
+ content.appendChild(div);
+ content.appendChild(img2);
+ return content;
+ }
+ cs_dd_arr.value[indexx] = new BMapGL.CustomOverlay(createLabelDOM, {
+ point: new BMapGL.Point(...polygon.center),
+ opacity: 0.5,
+ offsetY: 0,
+ properties: {
+ title: polygon.name,
+ imgSrc2: dwd,
+ type: "customOverlay",
+ },
+ });
+ map.addOverlay(cs_dd_arr.value[indexx]);
+};
+//添加单个村社(+数量)
+const DGcreateCs2 = (polygon, indexx) => {
+ 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 = "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 reset_font = () => {
let width = document.documentElement.clientWidth || document.body.clientWidth;
let height =
@@ -2462,26 +2325,8 @@ const reset_font = () => {
"scale(" + width / 1920 + "," + height / 1080 + ")";
}
};
-// function initializeMap() {
-// map = new BMapGL.Map("allmap");
-// var point = new BMapGL.Point(119.175728, 28.846981);
-// map.centerAndZoom(point, 16);
-// map.enableScrollWheelZoom(true);
-
-// // 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();
@@ -2515,13 +2360,17 @@ onMounted(() => {
bottom: 0;
width: 520px;
height: 960px;
- background: linear-gradient(270deg,
+ background: linear-gradient(
+ 270deg,
rgba(0, 52, 131, 0.69) 0%,
rgba(0, 32, 83, 0.77) 50%,
- rgba(0, 60, 131, 0.74) 100%),
- radial-gradient(128% 99% at 100% 46%,
+ rgba(0, 60, 131, 0.74) 100%
+ ),
+ radial-gradient(
+ 128% 99% at 100% 46%,
rgba(0, 48, 125, 0.29) 0%,
- rgba(0, 61, 134, 0.42) 100%);
+ rgba(0, 61, 134, 0.42) 100%
+ );
box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
backdrop-filter: blur(3px);
padding: 30px 26px;
@@ -2548,23 +2397,36 @@ onMounted(() => {
display: flex;
align-items: center;
justify-content: space-between;
- padding: 24px;
+ padding: 18px;
+ padding-left: 24px;
+ padding-right: 5px;
width: 48%;
- height: 57px;
+ position: relative;
+ // 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_bg {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 40%;
+ height: 100%;
+ background: RGBA(53, 85, 114, 0.8);
+ z-index: -1;
}
-
.content_item:first-child {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
- padding: 24px;
+ padding: 18px;
+ padding-left: 24px;
width: 100%;
- height: 57px;
+ // height: 57px;
background-image: url(@/assets/images/map/unchoose.png);
background-repeat: no-repeat;
background-size: 100% 100%;
@@ -2576,9 +2438,10 @@ onMounted(() => {
display: flex;
align-items: center;
justify-content: space-between;
- padding: 24px;
+ padding: 18px;
+ padding-left: 24px;
width: 100%;
- height: 57px;
+ // height: 57px;
background-image: url(@/assets/images/map/unchoose.png);
background-repeat: no-repeat;
background-size: 100% 100%;
@@ -2600,6 +2463,14 @@ onMounted(() => {
top: 7.5px;
left: -13px;
}
+ .content_item_value {
+ display: flex;
+ .content_item_percent {
+ margin-right: 5px;
+ color: #6bfeff;
+ text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
+ }
+ }
.choose {
background-image: url(@/assets/images/map/choose.png) !important;
@@ -2633,13 +2504,15 @@ onMounted(() => {
display: flex;
align-items: center;
justify-content: space-between;
- padding: 24px;
+ padding: 18px;
+ padding-left: 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 {
@@ -2693,13 +2566,17 @@ onMounted(() => {
bottom: 0;
width: 520px;
height: 960px;
- background: linear-gradient(270deg,
+ background: linear-gradient(
+ 270deg,
rgba(0, 52, 131, 0.69) 0%,
rgba(0, 32, 83, 0.77) 50%,
- rgba(0, 60, 131, 0.74) 100%),
- radial-gradient(128% 99% at 100% 46%,
+ rgba(0, 60, 131, 0.74) 100%
+ ),
+ radial-gradient(
+ 128% 99% at 100% 46%,
rgba(0, 48, 125, 0.29) 0%,
- rgba(0, 61, 134, 0.42) 100%);
+ rgba(0, 61, 134, 0.42) 100%
+ );
box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
backdrop-filter: blur(3px);
padding: 30px 26px;
@@ -2789,6 +2666,7 @@ onMounted(() => {
}
.zyys {
+ margin-top: 25px;
.zyys_content {
margin-top: 20px;
box-sizing: border-box;
@@ -2857,10 +2735,12 @@ onMounted(() => {
// line-height: 44px;
letter-spacing: 4px;
margin-bottom: 15px;
- background: linear-gradient(180deg,
- #ffffff 0%,
- #ffffff 40%,
- #00ffff 100%);
+ background: linear-gradient(
+ 180deg,
+ #ffffff 0%,
+ #ffffff 40%,
+ #00ffff 100%
+ );
/* 使文字没有背景颜色的背景 */
background-clip: text;
/* 为了兼容性，添加渐变背景到IE */