ggfwjsc/src/view/sy_map.vue

<template>
  <div class="module">
    <div id="map" style="width: 100%; height: 100%"></div>
    <div class="left">
      <div class="lyx">
        <div class="title">
          <div class="title_name">{{ title_choose }}</div>
          <div class="title_line"></div>
        </div>
        <div class="content">
          <div
            class="content_item"
            v-for="(item, index) in personTotal"
            :class="{ choose: item.id == choose.person }"
            @click="changeRs(item.id)"
            :key="index"
          >
            <div class="content_item_name">{{ item.name }}</div>
            <div class="content_item_value">{{ item.value }}</div>
          </div>
        </div>
      </div>
      <div class="tsbq">
        <div class="title">
          <div class="title_name">特殊标签</div>
          <div class="title_line"></div>
        </div>
        <div class="content">
          <div
            class="content_item"
            v-for="(item, index) in tsbqTotal"
            :class="{ choose: item.id == choose.bq }"
            @click="changebq(item.id)"
            :key="index"
          >
            <div class="content_item_name">{{ item.name }}</div>
            <div class="content_item_value">{{ item.value }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="right">
      <div class="jbggfwq">
        <div class="title">
          <div class="title_name">基本公共服务圈</div>
          <div class="title_line"></div>
        </div>
        <div class="jbggfwq_content">
          <div
            class="jbggfwq_content_item"
            v-for="(item, index) in jbfwqTotal"
            :key="index"
          >
            <div class="jbggfwq_content_item_left">{{ item.name }}</div>
            <div class="jbggfwq_content_item_right">
              <div
                class="jbggfwq_content_item_right_item"
                v-for="itemm in item.child"
                :class="{ choose: itemm.id == choose.fwq }"
                @click="changeFwq(itemm.id, itemm.fwqList, itemm.center)"
              >
                {{ itemm.name }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="zyys">
        <div class="title">
          <div class="title_name">资源要素</div>
          <div class="title_line"></div>
        </div>
        <div class="zyys_content">
          <div
            class="zyys_content_item"
            v-for="(item, index) in yaosuTotal"
            :class="{ choose: item.id == choose.yaosu, wz: item.wz == true }"
            @click="changeys(item.id)"
            :key="index"
          >
            <img :src="item.img" class="zyys_content_item_left" />
            <div class="zyys_content_item_right">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {
  ref,
  reactive,
  onMounted,
  onBeforeMount,
  onBeforeUnmount,
  computed,
  defineProps,
  watch,
  nextTick,
} from "vue";
import mapTown from "@/assets/json/ly.json";
import xkz from "@/assets/json/xkz.json";
import j0 from "@/assets/images/map/j0.png";
import j1 from "@/assets/images/map/j1.png";
import j2 from "@/assets/images/map/j2.png";
import j3 from "@/assets/images/map/j3.png";
import j4 from "@/assets/images/map/j4.png";
import j5 from "@/assets/images/map/j5.png";
import j6 from "@/assets/images/map/j6.png";
import j7 from "@/assets/images/map/j7.png";
import j8 from "@/assets/images/map/j8.png";
import j9 from "@/assets/images/map/j9.png";
import j10 from "@/assets/images/map/j10.png";
import m1 from "@/assets/images/map/m1.png";
import m2 from "@/assets/images/map/m2.png";
import dwd from "@/assets/images/map/dwd.png";
import fwqbg1 from "@/assets/images/map/qlv.png";
import fwqbg2 from "@/assets/images/map/qlan.png";
import fwqbg3 from "@/assets/images/map/slan.png";
import fwqbg4 from "@/assets/images/map/slv.png";
import fwqbg5 from "@/assets/images/map/shuang.png";
import fwqbg6 from "@/assets/images/map/qqlv.png";
import b1 from "@/assets/images/map/bb1.png";
import b2 from "@/assets/images/map/b2.png";
import b3 from "@/assets/images/map/b3.png";
import b4 from "@/assets/images/map/b4.png";
import b5 from "@/assets/images/map/b5.png";
import b6 from "@/assets/images/map/b6.png";
const title_choose = 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 mapTownCount = reactive([
  {
    name: "龙洲街道",
    center: [119.1573083, 28.9799445],
    number: "1000",
  },
  {
    name: "东华街道",
    center: [119.209592, 28.9799445],
    number: "1000",
  },
  {
    name: "小南海镇",
    center: [119.119616, 29.07309],
    number: "1000",
  },
  {
    name: "湖镇镇",
    center: [119.2906892, 29.0386151],
    number: "1000",
  },
  {
    name: "溪口镇",
    center: [119.1859408, 28.8879474],
    number: "1000",
  },
  {
    name: "詹家镇",
    center: [119.1201732, 29.005175],
    number: "1000",
  },
  {
    name: "塔石镇",
    center: [119.1256669, 29.1373072],
    number: "1000",
  },
  {
    name: "横山镇",
    center: [119.1876111, 29.1903275],
    number: "1000",
  },
  {
    name: "模环乡",
    center: [119.237015, 29.120862],
    number: "1000",
  },
  {
    name: "石佛乡",
    center: [119.1002998, 29.2018674],
    number: "1000",
  },
  {
    name: "沐尘畲族乡",
    center: [119.1837169, 28.8014116],
    number: "1000",
  },
  {
    name: "罗家乡",
    center: [119.2453273, 28.9130851],
    number: "1000",
  },
  {
    name: "庙下乡",
    center: [119.1037175, 28.8089885],
    number: "1000",
  },
  {
    name: "大街乡",
    center: [119.2664362, 28.8432149],
    number: "1000",
  },
  {
    name: "社阳乡",
    center: [119.3109367, 28.9074754],
    number: "1000",
  },
]);

//默认龙游县灰色地块
const mapTownDataDK = reactive([]);
//社区地块
const xkzDk = reactive([]);
//社区中心点
const xkzCenter = reactive([
  {
    name: "溪口村",
    center: [119.175728, 28.846981],
    number: "50",
  },
  {
    name: "扁石村",
    center: [119.158971, 28.856232],
    number: "50",
  },
  {
    name: "大垅村",
    center: [119.175309, 28.862776],
    number: "50",
  },
  {
    name: "枫林村",
    center: [119.205442, 28.862981],
    number: "50",
  },
  {
    name: "双港口村",
    center: [119.211353, 28.872576],
    number: "50",
  },
  {
    name: "灵上村",
    center: [119.175805, 28.868218],
    number: "50",
  },
  {
    name: "灵下村",
    center: [119.168797, 28.871674],
    number: "50",
  },
  {
    name: "下徐村",
    center: [119.175667, 28.878136],
    number: "50",
  },
  {
    name: "大沃口村",
    center: [119.17661, 28.880171],
    number: "50",
  },
  {
    name: "寺下村",
    center: [119.1648, 28.90016],
    number: "50",
  },
  {
    name: "大阳家村",
    center: [119.176573, 28.898746],
    number: "50",
  },
  {
    name: "石角村",
    center: [119.125078, 28.912612],
    number: "50",
  },
  {
    name: "红罗村",
    center: [119.184318, 28.913218],
    number: "50",
  },
  {
    name: "冷水村",
    center: [119.193226, 28.93395],
    number: "50",
  },
  {
    name: "新溪社区",
    center: [119.184555, 28.853068],
    number: "50",
  },
]);
var map = null;

const BMAP = () => {
  // 添加鼠标点击事件监听器
  map.addEventListener("click", function (e) {
    console.log(e.point, 666);
    // console.log(e.latlng, 666);
    var pt = e.point; // 获取点击的坐标
    var marker = new BMapGL.Marker(pt); // 创建标注
    map.addOverlay(marker); // 将标注添加到地图中
  });
};

const initMap = () => {
  map = new BMapGL.Map("map", { minZoom: 11, maxZoom: 20 });
  map.enableScrollWheelZoom(true);
  map.setMapType(BMAP_EARTH_MAP);
  goMapCenter([119.178783, 29.034583], 12);
  BMAP();
  //加载乡镇信息
  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) => {
    //地区的坐标范围
    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,
      });
      map.addOverlay(polygon);
    }
  });
  // mapTownCount.map((item) => {
  //   createCustomOverlayJd(item);
  // });
};
//添加街道名
const addJd = () => {
  mapTownCount.map((item) => {
    createCustomOverlayJd(item);
  });
};
//添加街道名2含数量
const addJd2 = () => {
  goMapCenter([119.178783, 29.034581], 12);
  mapTownCount.map((item) => {
    createCustomOverlayJd2(item);
  });
  goMapCenter([119.178783, 29.034583], 12);
};
//加载村社信息
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) {
      //创建面
      let polygonCs = new BMapGL.Polygon(points, {
        strokeColor: fillColor,
        strokeWeight: 2,
        strokeOpacity: 0.8,
        fillColor: fillColor,
        fillOpacity: 0.7,
        name: item.name,
      });
      map.addOverlay(polygonCs);
    }
  });
};
// 添加地图上的街道名
const createCustomOverlayJd = (polygon) => {
  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);

    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 = "16px";
    title.style.fontWeight = "600";
    title.style.color = "#000000";
    div.appendChild(title);
    title.appendChild(document.createTextNode(this.properties.title));
    content.appendChild(div);
    div.onclick = function () {
      let jdCenter = [];
      if (polygon.name == "溪口镇") {
        title_choose.value = title_choose.value + `>${polygon.name}`;
        console.log(title_choose.value);
        loadCs();
        addPolygonCountyCs();
        mapTownCount.map((item) => {
          if (item.name == "溪口镇") {
            jdCenter = item.center;
          }
        });
        addCs();
        goMapCenter(jdCenter, 14);
      }
    };
    return content;
  }
  var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, {
    point: new BMapGL.Point(...polygon.center),
    opacity: 0.5,
    offsetY: -10,
    properties: {
      title: polygon.name,
      type: "customOverlay",
    },
  });
  map.addOverlay(customOverlay);
};
// 添加地图上的街道名+(人数,标签)
const createCustomOverlayJd2 = (polygon) => {
  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);

    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 = "16px";
    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 = "16px";
    number.style.fontWeight = "600";
    number.style.color = "rgba(0, 255, 189, 1)";
    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}`;
        console.log(title_choose.value);
        loadCs();
        addPolygonCountyCs();
        mapTownCount.map((item) => {
          if (item.name == "溪口镇") {
            jdCenter = item.center;
          }
        });
        addCs2();
        goMapCenter(jdCenter, 14);
      }
    };
    return content;
  }
  var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, {
    point: new BMapGL.Point(...polygon.center),
    opacity: 0.5,
    offsetY: 0,
    properties: {
      title: polygon.name,
      number: polygon.number,
      type: "customOverlay",
    },
  });
  map.addOverlay(customOverlay);
};
//创建村社
const addCs = () => {
  xkzCenter.map((item) => {
    createCs(item);
  });
};
//创建村社
const addCs2 = () => {
  xkzCenter.map((item) => {
    createCs2(item);
  });
};
//添加村社+(人数,标签)
const createCs2 = (polygon) => {
  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);

    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 = "10px";
    div.style.backgroundColor = "red";
    div.style.borderRadius = "20%";
    div.style.transform = "translateY(50px)";
    div.setAttribute("name", this.properties.title);

    var title = document.createElement("div");
    title.style.fontSize = "16px";
    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 = "16px";
    number.style.fontWeight = "600";
    number.style.color = "rgba(0, 255, 189, 1)";
    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 = "20px";
    img2.src = this.properties.imgSrc2;

    content.appendChild(div);
    content.appendChild(img2);
    // div.onclick = function () {
    //   let jdCenter = [];
    //   if (polygon.name == "溪口镇") {
    //     title_choose.value = title_choose.value + `>${polygon.name}`;
    //     console.log(title_choose.value);
    //     loadCs();
    //     addPolygonCountyCs();
    //     mapTownCount.map((item) => {
    //       if (item.name == "溪口镇") {
    //         jdCenter = item.center;
    //       }
    //     });
    //     goMapCenter(jdCenter, 14);
    //   }
    // };
    return content;
  }
  var customOverlay = new BMapGL.CustomOverlay(createLabelDOM, {
    point: new BMapGL.Point(...polygon.center),
    opacity: 0.5,
    offsetY: 0,
    properties: {
      title: polygon.name,
      number: polygon.number,
      imgSrc2: dwd,
      type: "customOverlay",
    },
  });
  map.addOverlay(customOverlay);
};
//添加村社
const createCs = (polygon) => {
  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);

    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 = "16px";
    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 = "20px";
    img2.src = this.properties.imgSrc2;

    content.appendChild(div);
    content.appendChild(img2);
    return content;
  }
  var customOverlay = 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(customOverlay);
};
//创建公共服务圈
const addggfwq = () => {
  fwqList.value.map((item) => {
    createCustomOverlay(item);
  });
};
// 添加公共服务圈的图标
const createCustomOverlay = (polygon) => {
  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);

    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;
  }
  var customOverlay = 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(customOverlay);
};

//地图中点
const goMapCenter = (point, zoom) => {
  map.centerAndZoom(new BMapGL.Point(point[0], point[1]), zoom);
};
const removeAllPolygon = (e) => {
  let allOverlay = map.getOverlays();
  console.log("allOverlay", allOverlay);
  for (let i = 0; i < allOverlay.length; i++) {
    map.removeOverlay(allOverlay[i]);
  }
  // if (e == "fwq") {
  //   addPolygonCounty();
  //   nextTick(() => {
  //     addJd();
  //   });
  // } else {
  //   addPolygonCounty();
  //   nextTick(() => {
  //     addJd2();
  //   });
  // }
};
//选项设置
//选中
const chooseArr = ref([]);
const xuanran = () => {
  addPolygonCounty();
  if (chooseArr.value.includes("person")) {
    console.log(3434);
    addJd2();
  } else {
    addJd();
  }
  if (chooseArr.value.includes("fwq")) {
    console.log(5656);
    addggfwq();
  }
  // if (!chooseArr.value.includes("person")) {
  //   addJd();
  // }
};
const choose = ref({
  person: 9999,
  bq: 9999,
  fwq: 9999,
  yaosu: 9999,
});
const changeRs = (id) => {
  if (choose.value.person == id) {
    console.log(111111);
    chooseArr.value = chooseArr.value.filter((item) => item !== "person");
    choose.value.person = 9999;
    removeAllPolygon("person");
    xuanran();
    addJd();
  } else {
    console.log(2222222);
    chooseArr.value.push("person");
    choose.value.person = id;
    choose.value.bq = 9999;
    removeAllPolygon("person");
    xuanran();
  }
};
const changebq = (id) => {
  choose.value.bq = id;
  choose.value.person = 9999;
};
const changeFwq = (id, list, center) => {
  if (choose.value.fwq == id) {
    console.log(7878);
    chooseArr.value = chooseArr.value.filter((item) => item !== "fwq");
    choose.value.fwq = 9999;
    removeAllPolygon("fwq");
    xuanran();
  } else {
    console.log(9999);
    chooseArr.value.push("fwq");
    choose.value.fwq = id;
    fwqList.value = list;
    removeAllPolygon("fwq");
    xuanran();
    console.log(1111111111, center);
    setTimeout(() => {
      goMapCenter(center, 17);
    }, 500);

    // addggfwq()
  }

  // choose.value.fwq = id;
  // removeAllPolygon("fwq");
  // fwqList.value = list;
  // goMapCenter(center, 17);
  // fwqList.value.map((item) => {
  //   createCustomOverlay(item);
  // });
  // console.log(fwqList.value);
};
const changeys = (id) => {
  choose.value.yaosu = id;
};
//人口数
const personTotal = ref([
  {
    id: 0,
    name: "总人口",
    value: "1724114",
  },
  {
    id: 1,
    name: "1岁",
    value: "26737",
  },
  {
    id: 2,
    name: "2岁",
    value: "26737",
  },
  {
    id: 3,
    name: "3岁",
    value: "26737",
  },
  {
    id: 4,
    name: "4岁",
    value: "26737",
  },
  {
    id: 5,
    name: "5岁",
    value: "26737",
  },
  {
    id: 6,
    name: "6岁",
    value: "26737",
  },
  {
    id: 7,
    name: "7岁",
    value: "26737",
  },
  {
    id: 8,
    name: "8岁",
    value: "26737",
  },
  {
    id: 9,
    name: "9岁",
    value: "26737",
  },
  {
    id: 10,
    name: "10岁",
    value: "26737",
  },
  {
    id: 11,
    name: "11岁",
    value: "26737",
  },
  {
    id: 12,
    name: "12岁",
    value: "26737",
  },
  {
    id: 13,
    name: "13岁",
    value: "26737",
  },
]);

//特殊标签
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,
  },
]);
onMounted(() => {
  initMap();
});
</script>
<style lang="scss" scoped>
::v-deep .anchorBL {
  display: none;
}

.module {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
}

#id {
  z-index: 10;
}

//左侧弹框
.left {
  box-sizing: border-box;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 520px;
  height: 960px;
  background: linear-gradient(
      270deg,
      rgba(0, 52, 131, 0.69) 0%,
      rgba(0, 32, 83, 0.77) 50%,
      rgba(0, 60, 131, 0.74) 100%
    ),
    radial-gradient(
      128% 99% at 100% 46%,
      rgba(0, 48, 125, 0.29) 0%,
      rgba(0, 61, 134, 0.42) 100%
    );
  box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
  backdrop-filter: blur(3px);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  z-index: 12;
  overflow: hidden;

  //人口数
  .lyx {
    .content {
      box-sizing: border-box;
      margin-top: 20px;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      color: #ffffff;
      height: 450px;
      overflow: auto;

      .content_item {
        cursor: pointer;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24px;
        width: 48%;
        height: 57px;
        background-image: url(@/assets/images/map/unchoose.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-bottom: 12px;
      }

      .content_item:first-child {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24px;
        width: 100%;
        height: 57px;
        background-image: url(@/assets/images/map/unchoose.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-bottom: 12px;
      }

      .content_item_name {
        position: relative;
      }

      .content_item_name::before {
        content: "";
        position: absolute;
        width: 3px;
        height: 3px;
        background: #29ffc1;
        border: 3px solid rgba(0, 255, 189, 0.31);
        border-radius: 6px;
        top: 7.5px;
        left: -13px;
      }

      .choose {
        background-image: url(@/assets/images/map/choose.png) !important;
        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
      }
    }

    .content::-webkit-scrollbar {
      display: none;
    }
  }

  //特殊标签
  .tsbq {
    margin-top: 40px;

    .content {
      box-sizing: border-box;
      margin-top: 20px;
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      color: #ffffff;
      height: 220px;
      overflow: auto;

      .content_item {
        cursor: pointer;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24px;
        width: 48%;
        height: 57px;
        background-image: url(@/assets/images/map/unchoose.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-bottom: 12px;
      }

      .content_item:last-child {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 24px;
        width: 100%;
        height: 57px;
        background-image: url(@/assets/images/map/unchoose.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin-bottom: 12px;
      }

      .content_item_name {
        position: relative;
      }

      .content_item_name::before {
        content: "";
        position: absolute;
        width: 3px;
        height: 3px;
        background: #ffe229;
        border: 3px solid rgba(255, 226, 41, 0.31);
        border-radius: 6px;
        top: 7.5px;
        left: -13px;
      }

      .choose {
        background-image: url(@/assets/images/map/choose.png) !important;
        background-repeat: no-repeat !important;
        background-size: 100% 100% !important;
      }
    }

    .content::-webkit-scrollbar {
      display: none;
    }
  }
}

//右侧弹框
.right {
  box-sizing: border-box;
  position: absolute;
  right: 0;
  bottom: 0;
  width: 520px;
  height: 960px;
  background: linear-gradient(
      270deg,
      rgba(0, 52, 131, 0.69) 0%,
      rgba(0, 32, 83, 0.77) 50%,
      rgba(0, 60, 131, 0.74) 100%
    ),
    radial-gradient(
      128% 99% at 100% 46%,
      rgba(0, 48, 125, 0.29) 0%,
      rgba(0, 61, 134, 0.42) 100%
    );
  box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
  backdrop-filter: blur(3px);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  z-index: 12;
  overflow: hidden;

  .jbggfwq {
    .jbggfwq_content {
      height: 550px;
      overflow: auto;
      margin-top: 15px;
      display: flex;
      flex-direction: column;

      .jbggfwq_content_item {
        margin-bottom: 5px;
        display: flex;
        // align-items: center;
        color: #ffffff;

        .jbggfwq_content_item_left {
          margin-right: 10px;
          width: 80px;
          height: 48px;
          line-height: 48px;
        }

        .jbggfwq_content_item_right {
          width: 370px;
          display: flex;
          flex-flow: row wrap;

          .jbggfwq_content_item_right_item {
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            box-sizing: border-box;
            width: 92px;
            height: 48px;
            font-weight: 500;
            text-align: center;
            font-size: 16px;
            line-height: 28px;
            background: rgba(124, 151, 180, 0.8);
            // padding: 10px;
            margin-bottom: 4px;
            position: relative; /* 必须设置 position 属性以便伪元素定位 */
          }
          .jbggfwq_content_item_right_item::after {
            content: "";
            display: block;
            width: 1px;
            height: 18px;
            background-color: #fff;
            position: absolute;
            top: 14px;
            right: 0px;
          }
          :nth-child(4n).jbggfwq_content_item_right_item::after {
            opacity: 0;
          }

          .choose {
            background-image: url(@/assets/images/map/choose.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }
        }
      }
    }

    .jbggfwq_content::-webkit-scrollbar {
      display: none;
    }
  }

  .zyys {
    .zyys_content {
      margin-top: 20px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      flex-flow: row wrap;

      .zyys_content_item {
        cursor: pointer;
        margin-bottom: 15px;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 110px;
        height: 42px;
        background: rgba(124, 151, 180, 0.8);

        .zyys_content_item_left {
          width: 18px;
          height: 18px;
          margin-right: 3px;
        }

        .zyys_content_item_right {
          font-weight: 500;
          font-size: 16px;
        }
      }

      .wz {
        width: 150px;
      }

      .choose {
        background-image: url(@/assets/images/map/choose.png);
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
    }
  }
}

.title {
  .title_name {
    font-family: YouSheBiaoTiHei;
    font-size: 34px;
    font-weight: 900;
    // line-height: 44px;
    letter-spacing: 4px;
    margin-bottom: 15px;
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 40%, #00ffff 100%);
    /* 使文字没有背景颜色的背景 */
    background-clip: text;
    /* 为了兼容性，添加渐变背景到IE */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  .title_line {
    height: 4px;
    width: 100%;
    border-top: 1px solid #ffffff;
    border-bottom: 2px dashed #ffffff;
  }
}
</style>