<template>
  <MapBox
          :initJson="props.initJson"
          :loadCallback="getModalData"
          @map-click="mapClickEvt"
          v-show="MapShow"
  >
  </MapBox>

  <PopupInfo></PopupInfo>
  <!-- <div id="trajectory-popup" ref="trajectory">1111</div> -->
  <!-- <div style="width: 700px; height: 350px" ref="streetSpace1" id="streetSpace1">
    <streetSpace :location="datas.location"></streetSpace>
  </div> -->
</template>

<script setup name="Map">
  import bus from "@/bus";
  import request from "@/utils/request";
  import MapBox from "@/components/Map/Map";
  import { getBaseListPoint } from "@/api/MonitorAssetsOnMap";
  import { supervisionRealinformationList } from "@/api/internetVehicles";
  import useUserStore from "@/store/modules/user";
  import { reactive, onMounted, onBeforeUnmount, nextTick, defineProps, watch } from "vue";
  import streetSpace from "@/components/Map/streetSpace";
  import gq_line from "../../../public/static/libs/mapbox/json/gq_line.json";
  import ys_flow1 from "../../../public/static/libs/mapbox/json/ys_flow_2.json";
  import line from "../../../public/static/libs/mapbox/json/line.json";
  import point from "../../../public/static/libs/mapbox/json/point.json";

  import outlet_route from "../../../public/static/libs/mapbox/json/outlet_route.json";
  import outlet_site from "../../../public/static/libs/mapbox/json/outlet_site.json";

  import PopupInfo from "@/components/Map/popup.vue";
  import { MapboxOverlay } from "@deck.gl/mapbox";
  import { LineLayer, GeoJsonLayer } from "@deck.gl/layers";
  import { TripsLayer, Tile3DLayer } from "@deck.gl/geo-layers";
  import { Tiles3DLoader } from "@loaders.gl/3d-tiles";
  const appStore = useUserStore();
  const MapShow = ref(true);
  const props = defineProps({
    // 数据id
    initJson: {
      type: String,
      default: () => "/static/libs/mapbox/style/wh_dhgx.json",
    },
    loadCallback: {
      type: Function,
      default: () => function () {},
    },
  });
  const datas = reactive({
    location: [],
    isOpenPanorama: false,
  });
  const { proxy } = getCurrentInstance();
  const refreshTimer = ref(null);
  const default_params = {
    point: {
      key: "point",
      prevId: null,
      children:{
        outlet_info2:{
          key:"outlet_info2"
        }
      }
    },
    sx_wn_hm_monitoring: {
      key: "sx_wn_hm_monitoring",
      prevId: null,
    },
    town: {
      key: "乡镇",
      c_key: "村",
      prevId: null,
    },
    hupo: {
      key: "湖泊",
      prevId: null,
    },
    gangqu: {
      key: "港渠",
      prevId: null,
    },
    psfq: {
      key: "排水分区",
      prevIds: [],
      children: {
        WS: { key: "污水分区" },
        YS: { key: "雨水分区" },
      },
    },
    hb_wh_dhgx_merge: {
      key: "hb_wh_dhgx_merge",
      children: {
        psfq: { key: "排水分区" },
      },
      prevId: null,
    },
    海绵型水系: { color: "rgba(35,184,153,1)" },
    海绵建筑与社区: { color: "rgba(255,119,125,1)" },
    海绵型道路广场: { color: "rgba(255,152,4,1)" },
    管网及泵站: { color: "rgba(0,153,68,1)" },
    海绵型公园绿地: { color: "rgba(223,214,20,1)" },
    flow: { color: "rgba(255,255,255,1)" },
    rain: { color: "rgba(255,255,255,1)" },

    water_level: { color: "rgba(255,255,255,1)" },
    waterlogging: { color: "rgba(255,255,255,1)" },

    rain_bz: { color: "rgba(255,255,255,1)" },
    sxt: { color: "rgba(255,255,255,1)" },
    WSCLC: { color: "rgba(255,255,255,1)" },
    overflow_outfall: { color: "rgba(255,255,255,1)" },

    rainfall: { color: "rgba(223,214,20,1)" },
    pipeline: { color: "rgba(223,214,20,1)" },
    drain_outlet: { color: "rgba(223,214,20,1)" },
  };
  window.mapInitBusName = "mapInitBusName";
  const mapClickEvt = (lngLat, properties, layerId) => {
    datas.isOpenPanorama &&
    (() => {
      setPopupDom("proxy.$refs.streetSpace1", 2);
      newfiberMap.popup1.setLngLat(lngLat).addTo(newfiberMap.map);
      datas.location = lngLat;
    })();

    console.log("properties", properties, layerId);
    // 图层点击事件
    if (properties) bus.emit("FenQuClick", {properties,layerId});
    clearTrajectory();
    // clearTemporaryData();
    proxy.$emit("map-click1", lngLat, properties, layerId);
    const { town, hupo, gangqu, hb_wh_dhgx_merge,psfq,point } = default_params;
    const { setLayerVisible, setHighlight, setGeoJSON, removeMapDatas } = events_params;
    const _keys = ["rain_water_pump_station_info1", "sewage_pump_station_info1",'rainwater_pipeline_quality_area1','clickPoint'];

    (() => {
      setHighlight_(properties);
      ysFlow();
      newfiberMap.getLayers().filter((i) => i.newfiberId == "村域边界")[0].setData(turf.featureCollection([]));
      busEmit(removeMapDatas.key, _keys.filter(i => i != (properties || {}).type));

      if (town.prevId) {
        busEmit(setLayerVisible.key, { layername: town.key, isCheck: true });
        busEmit(setLayerVisible.key, { layername: town.prevId, isCheck: false });
        town.prevId = null;
      }

/*      if (psfq.prevIds.length &&  !([psfq.key,point.key].includes(layerId))) {
        districtMask();
        const isOne = psfq.prevIds.length == 1?1:2
        let properties = psfq.prevIds[psfq.prevIds.length -1];
        areaToMap(properties);
        psfq.prevIds =_.dropRight(psfq.prevIds);
        clearRouteMethod();
        ys_flow(properties,false);
        showOutletInfo(properties);
      }*/
    })();
    ((
            {
              [point.key]: () => {
                const {outlet_info2} = point.children;
                (({
                  [outlet_info2.key]:(properties)=>    { clearRouteMethod();outletRouteMethod(properties)}
                })[properties.type] || function(){})(properties);
              },
              [psfq.key]: () => {
                ["outlet_info2",'排口流向','排口流向1','rainwater_pipeline_quality1',_keys[2]].forEach(k => busEmit(setLayerVisible.key, {layername:k, isCheck: true}));
                areaToMap(properties);
              },
              [town.key]: () => {
                newfiberMap.getLayers().filter((i) => i.newfiberId == "村域边界")[0].setData(turf.featureCollection(newfiberMap.map.getSource("hb_wh_gxq_cun2")._data.features.filter((i) => i.properties.type == properties.name)));
                busEmit(setLayerVisible.key, { layername: town.key, isCheck: false });
                busEmit(setLayerVisible.key, { layername: properties.name, isCheck: true });
                town.prevId = properties.name;
              },
              [hupo.key]: () => {
                if (hupo.prevId) {
                  busEmit(setLayerVisible.key, {
                    layername: hupo.prevId,
                    isCheck: false,
                    values: [hupo.prevId, ["严东湖", "严西湖"].join(",")],
                  });
                  hupo.prevId = null;
                  bus.emit("removeMapDatas", ["outlet_info1"]);
                }
                const keys = ["outlet_info", "村域边界", "lake"];
                const specialKeys = ["严东湖", "严西湖"];
                newfiberMap
                        .getLayers()
                        .filter((i) => i.newfiberId == keys[1])[0]
                        .setData(
                                turf.featureCollection(
                                        gq_line.features.filter((i) => i.properties.w_id == properties.name)
                                )
                        );
                let features = newfiberMap.map
                        .getSource("point")
                        ._data.features.filter(
                                (i) =>
                                        i.properties.type == keys[0] &&
                                        i.properties.waterBodyType == keys[2] &&
                                        i.properties.waterBodyId == properties.pid
                        )
                        .map((i) => _.cloneDeep(i));
                features.forEach((i) => (i.properties.type = i.properties.type + "1"));
                busEmit(events_params.setGeoJSON.key, {
                  json: turf.featureCollection(features),
                  key: keys[0] + 1,
                });
                const values = [
                  specialKeys.includes(properties.name) ? specialKeys.join(",") : properties.name,
                ];
                busEmit(setLayerVisible.key, {
                  layername: properties.name,
                  isCheck: true,
                  values,
                });
                hupo.prevId = properties.name;
              },
              [gangqu.key]: () => {
                if (gangqu.prevId) {
                  gangqu.prevId = null;
                  bus.emit("removeMapDatas", ["outlet_info1"]);
                }
                const keys = ["outlet_info", "村域边界", "channel"];
                newfiberMap
                        .getLayers()
                        .filter((i) => i.newfiberId == keys[1])[0]
                        .setData(
                                turf.featureCollection(
                                        gq_line.features.filter((i) => i.properties.name == properties.name)
                                )
                        );
                let features = newfiberMap.map
                        .getSource("point")
                        ._data.features.filter(
                                (i) =>
                                        i.properties.type == keys[0] &&
                                        i.properties.waterBodyType == keys[2] &&
                                        i.properties.waterBodyId == properties.pid
                        )
                        .map((i) => _.cloneDeep(i));
                features.forEach((i) => (i.properties.type = i.properties.type + "1"));
                busEmit(events_params.setGeoJSON.key, {
                  json: turf.featureCollection(features),
                  key: keys[0] + 1,
                });
                gangqu.prevId = properties.name;
              },
              [hb_wh_dhgx_merge.key]: () => {
                if (properties.layer == hb_wh_dhgx_merge.children.psfq.key) {
                  const layerSplit = properties.c_layer.split("_");
                  let geometry = Terraformer.WKT.parse(properties.geometry);

                  busEmit(setHighlight.key, []);
                  const type = _.chunk(layerSplit[1], 2)[0].join("");
                  let pType = type == "雨水" ? "YS" : "WS";
                  pType == "YS" ? ys_flow(properties, true) : ws_flow(properties);
                  districtMask(properties);
                  if (layerSplit[2] != 3) return mapCenterByData(turf.bbox(geometry));
                  /*         let features = newfiberMap.map.getSource("hb_wh_dhgx_pipe_line_n_y_w")._data.features.filter((i) => i.properties[type + "系统"] == properties.name && i.properties["管段类型"] == pType);
                           let pFeatures = newfiberMap.map.getSource("point")._data.features.filter((i) => _keys.includes(i.properties.type) && (i.properties.pointTypeName || "").includes(type));
                           let p_features = turf.pointsWithinPolygon(turf.featureCollection(pFeatures), geometry);
                           p_features.features.forEach((i) => (i.properties.type = i.properties.type + 1));
                           busEmit(setGeoJSON.key, { json: p_features });
                           console.log("features", p_features, pFeatures);
                           busEmit(setHighlight.key, turf.flatten(turf.featureCollection(features)).features);*/
                }
              },
            }[layerId] ||
            function () {
              //newfiberMap.map.easeTo(newfiberMap.config_.params.init);
            }
    )());

    function areaToMap(properties) {
      clearRouteMethod();
      properties.level == '1' && !layerId ? newfiberMap.map.easeTo(newfiberMap.config_.params.init) : districtMask(properties);
      properties.level == '2' && showOutletInfo(properties);
      if(properties.level == '3' && properties.type == 'YS'){
        ys_flow({...properties,c_layer:`排水分区_${properties.type}_${properties.level}`}, true);
        let ids = newfiberMap.map.getSource(newfiberMap.map.getLayer("排水分区").source)._data.features.filter(i => i.properties.p_type == properties.type+properties.name).map(i => i.properties.id);
        let p_feature =  turf.flatten(turf.feature(Terraformer.WKT.parse(properties.geometry))).features[0];

        let features =  newfiberMap.map.getSource("point")._data.features.filter(i =>  _keys[2].includes(i.properties.type)).filter(o => turf.booleanPointInPolygon(o,p_feature));
        // .filter(i => ids.includes(Number(i.properties.waterRegionId)));
        features = features.map(i => Object.assign(_.cloneDeep(i),{properties:{...i.properties,type:i.properties.type+1}}));
        busEmit(setGeoJSON.key, {json: turf.featureCollection(features), key: _keys[2]});
      }
      let [closeLayer, openLayer] = layerId ? [properties.type + properties.p_name, properties.type + properties.name] : [properties.type + properties.name, properties.p_type];
      busEmit(setLayerVisible.key, {layername: psfq.children[properties.type].key, isCheck: false, values: Array.from(new Set(newfiberMap.map.getSource("hb_wh_dhgx_psfq_geometrys")._data.features.map(i => i.properties.p_type)))});
      busEmit(setLayerVisible.key, {layername: psfq.children[properties.type].key, isCheck: true, values: [openLayer]});
      if(layerId && psfq.prevIds.filter(i => i.id == properties.id).length == 0)psfq.prevIds.push(properties);
    }

    function showOutletInfo(properties) {
      const key = 'outlet_info';
      busEmit(setLayerVisible.key, {layername: key+properties.w_id,isCheck: Boolean(layerId)});
    }

    function outletRouteMethod(properties) {
      const _keys = ['排口流向', '排口流向1', 'rainwater_pipeline_quality1'];
      _keys.forEach(k => busEmit(setLayerVisible.key, {layername: k,isCheck: true}));
      let sites = turf.featureCollection(outlet_site.features.filter(i => (i.properties.outlet_id || '').split(',').includes(properties.id) && i.properties.connectType != 'area'));
      let routes = turf.featureCollection(outlet_route.features.filter(i => (i.properties.outlet_id || '').split(',').includes(properties.id)));
      newfiberMap.getLayers().filter(i => i.newfiberId == _keys[1])[0].setData(routes);
      busEmit(setGeoJSON.key, {json: routes, key: _keys[0]});
      busEmit(setGeoJSON.key, {json: sites, key: _keys[2]});
    }

    function districtMask(properties = {}) {
      let mb = turf.polygon([ [[-180, -90], [180, -90], [180, 90], [-180, 90], [-180, -90]]]);
      let feature = []
      if(properties.geometry) {
        let area = turf.feature(Terraformer.WKT.parse(properties.geometry));
        feature = [turf.difference(mb,area)];
        mapCenterByData(turf.bbox(area));
      }
      newfiberMap.getLayers().filter(i => i.newfiberId == '蒙版')[0].setData(turf.featureCollection(feature));
    }

    function ys_flow(properties, visible) {
      const keys = ["雨水系统流向", "雨水系统流向1"];
      if(!visible) return keys.forEach((key) => busEmit(setLayerVisible.key, { layername: key, isCheck: visible }));
      const layerSplit = properties.c_layer.split("_");
      const level = layerSplit[2];
      let features = ys_flow1.features.filter(i => (i.properties.level_ == level && (level == '1' || i.properties['area_'+level] == properties.name)));
      const p = properties.name.substr(0,2);
      let feature = level == '3'?  ys_flow1.features.filter(i => (i.properties.bind || '').includes(properties.name)): ys_flow1.features.filter(i => i.properties.level_ < level && i.properties.area_2.includes(p))
      ysFlow(turf.featureCollection(features.concat(feature)));
      keys.forEach((key) => busEmit(setLayerVisible.key, { layername: key, isCheck: visible }));
      setHighlight_(properties);
    }

    function ws_flow(properties) {
      const keys_ = ["雨水", "污水"];
      const keys = ["1_泵站", "1_污水处理厂", "分区流向", "分区流向1"];
      bus.emit("removeMapDatas", keys);
      newfiberMap
              .getLayers()
              .filter((i) => i.newfiberId == keys[3])[0]
              .getSource()
              .setData(turf.featureCollection([]));
      let key = (properties.c_layer || "").includes(keys_[0]) ? keys_[0] : keys_[1];
      if (properties.pointTypeName) key = keys_[1];
      const nameKey = "龙王咀" || properties.name.substring(0, 2);
      let features = line.features.filter((i) => i.properties.area.includes(key));
      // let features1 = point.features.filter(i => i.properties.type.includes(key) );
      let points = _.groupBy(point.features, (a) => a.properties.type);
      features.forEach((i) => {
        i.properties.type = keys[2];
        i.properties.color = key == keys_[0] ? "rgba(21,127,176,1)" : "rgba(255,0,0,1)";
      });
      /*    Object.keys(points).map((key) =>
            bus.emit("setGeoJSON", {
              json: turf.featureCollection(
                points[key].map((i) => ({
                  type: i.type,
                  geometry: i.geometry,
                  properties: { ...i.properties, type: "1_" + key },
                }))
              ),
              key: "1_" + key,
            })
          );*/
      // bus.emit("setGeoJSON", { json: turf.featureCollection(features), key: keys[2] });
      /*  newfiberMap
          .getLayers()
          .filter((i) => i.newfiberId == keys[3])[0]
          .getSource()
          .setData(turf.featureCollection(features));*/
      setHighlight_(properties);
    }
  };

  function clearRouteMethod() {
    const { removeMapDatas } = events_params;
    const _keys = ['排口流向', '排口流向1', 'rainwater_pipeline_quality1'];
    busEmit(removeMapDatas.key, [_keys[2],_keys[0]]);
    newfiberMap.getLayers().filter(i => i.newfiberId == _keys[1])[0].setData(turf.featureCollection([]));
  }

  function setHighlight_(properties = {}) {
    const temporary = "temporary";
    bus.emit("removeMapDatas", [temporary]);
    if (!properties.geometry || properties.geometry.includes('POINT')) return;
    let geojson = turf.polygonToLine(Terraformer.WKT.parse(properties.geometry));
    geojson = geojson.features ? geojson : turf.featureCollection([geojson]);
    geojson.features.forEach((i) => (i.properties = { color: "rgba(255,255,0,1)", type: temporary }));
    bus.emit("setGeoJSON", { json: geojson, key: temporary });
 /*   newfiberMap
            .getLayers()
            .filter((i) => i.newfiberId == "村域边界")[0]
            .setData(geojson);*/
  }

  const getModalData = () => {
    isClockInRange();
    Object.keys(events_params)
            .filter((key) => events_params[key].method)
            .forEach((key) => busOn(events_params[key].key, events_params[key].method));
    // 获取地图项目数据
    dataToMap({});
    createPopup();
    busEmit(events_params.closeAllLayer.key);
    proxy.$emit("loadCallback");
    ww();
    ysFlow();

    newfiberMap.contextMenu = new mapboxgl1.ContextMenu({items: [
        {
          text: '街景',
          callback: async (point,feature,layerId) => {
            let clickPoint = turf.point(Object.values(point));
            let positionAddress = '';
            gcoord.transform(clickPoint, gcoord.WGS84, gcoord.BD09);
            let data = await request(`/bdApi//baiduservice/panorama?fov=180&height=256&width=512&location=${turf.getCoords(clickPoint).join(',')}`);
            data.data.base64  = (data && data.data) && 'data:image/jpeg;base64,' + data.data.base64;
            gcoord.transform(clickPoint, gcoord.BD09, gcoord.GCJ02);
            const regeodata = await geoRegeo({lngLat:turf.getCoords(clickPoint)});
            positionAddress = regeodata.info === 'OK' && regeodata.regeocode.formatted_address;
            gcoord.transform(clickPoint, gcoord.GCJ02, gcoord.WGS84);
            busEmit(events_params.setGeoJSON.key, { json: turf.featureCollection([clickPoint]), key: 'clickPoint' });
            data.roadName = positionAddress;
            bus.emit('popupcontent', {
              popupShow: true,
              point: Object.values(point),
              popupInfo: data,
            });
          }
        }
      ]})
    newfiberMap.contextMenu.addTo(newfiberMap.map);
  };

  const ysFlow = (geojson) => {
    const key = "雨水系统流向";
    const widths = ['',10,5,1];
    if(!geojson) {
      ys_flow1.features = ys_flow1.features.map(i => ({ ...i, properties: { ...i.properties, color:"rgba(10,170,249,1)" ,width: widths[i.properties.level_], name: undefined } }));
      geojson = turf.featureCollection(ys_flow1.features.filter(i => i.properties.level_ == 1));
    }
    bus.emit("removeMapDatas", [key+"1"]);
    newfiberMap.getLayers().filter((i) => i.newfiberId == key)[0].setData(geojson);
    busEmit(events_params.setGeoJSON.key, { json: geojson, key: key + 1 });
  };

  const ww = () => {
    const keys = ["尾水路径"];
    let features = newfiberMap.map
            .getSource("hb_wh_dhgx_merge")
            ._data.features.filter(
                    (i) => i.properties.c_layer.includes(keys[0]) && i.properties.geometry_type == 2
            );
    busEmit(events_params.setGeoJSON.key, {
      json: turf.featureCollection(features),
      key: keys[0],
    });
  };

  let prevObj = null;
  const panelDataToMap = (obj) => {
    // debugger
    const { setLayerVisible, setHighlight } = events_params;
    // if (prevObj != null) busEmit(setLayerVisible.key, { layername: prevObj.type, isCheck: false });
    busEmit(setHighlight.key, []);
    // busEmit(setLayerVisible.key, { layername: obj.type, isCheck: true });
    // debugger;
    let features = ["point", "linestring", "polygon","hb_wh_dhgx_psfq_geometrys", "hb_wh_dhgx_merge"].map((key) => newfiberMap.map.getSource(key)._options.data.features.filter((i) => (i.properties.name || "").includes(obj.name) || (obj.id ? obj.id == i.properties.pid : true))).flat();
    let feature = features.filter((i) => i.properties.p_type)[0] || features.filter((i) => i.properties.name == obj.name)[0] || features[_.random(0, features.length - 1)];
    console.log('panelDataToMap',feature);
    if(feature.properties.p_type) return mapClickEvt(undefined,feature.properties,"排水分区");
    if (!feature) return;
    busEmit(setHighlight.key, [feature]);
    mapCenterByData(turf.bbox(feature));
  };

  const mapCenterByData = (bbox) => {
    newfiberMap.map.fitBounds(
            [
              [bbox[0], bbox[1]],
              [bbox[2], bbox[3]],
            ],
            { padding: 50, offset: [100, 10], maxZoom: 18, pitch: 0, duration: 500 }
    );
  };
  const trajectoryToMap = (data) => {
    clearTrajectory();
    const fields = { lng: "l", lat: "a" };
    mapCenterByData([data[0]["l"], data[0]["a"], data[1]["l"], data[1]["a"]].map(Number));
    newfiberMap.map.trackLayer = new mapboxgl1.TrackLayer(
            newfiberMap.map,
            data,
            fields,
            (properties, index) => {
              const lng = properties[fields.lng];
              const lat = properties[fields.lat];
              if (!(index % 50)) {
                newfiberMap.map.flyTo({
                  center: [lng, lat],
                  bearing: newfiberMap.map.getBearing(),
                  pitch: newfiberMap.map.getPitch(),
                  zoom: newfiberMap.map.getZoom(),
                });
              }
              /*        setPopupDom('proxy.$refs.trajectory', 1);
                                    newfiberMap.popup.setLngLat([lng,lat]).addTo(newfiberMap.map);*/
            }
    );
  };

  const clearTrajectory = () => {
    if (newfiberMap.map.trackLayer) newfiberMap.map.trackLayer.destory();
    if (newfiberMap.popup) newfiberMap.popup.remove();
  };

  const dataToMap = async ({ params, callback }) => {
    const { setLayerVisible, beansToMap } = events_params;
    const data_default_params = {
      sites: {
        method: getBaseListPoint,
        fields: { geometry: "geometry", name: "name" },
        groupMethod: (data) => _.groupBy(data.map((i) => i.data).flat().filter((i) => i.geometry).map((item) => ({ ...item })), (v) => v.pointType + (v.connectType ? "_" + v.connectType : "")),
        others:{
          outlet_info:{
            method:(data)=> data.map(i => ({...i,type:i.pointType+i.waterBodyId}))
          }
        }
      },
      //车辆
      cheliang: {
        method: supervisionRealinformationList,
        fields: { lng: "longitude", lat: "latitude", name: "plateNumber" },
        groupMethod: (data) =>
                _.groupBy(
                        data.supervisionRealinformationList
                                .filter((i) => i.longitude && i.latitude)
                                .map((item) => ({ ...item, type: item.vehicleCategory + item.status })),
                        (v) => v.type
                ),
      },
    };
    const other_data_params = {

    }
    let keys = Object.keys(params || data_default_params);
    const results = await Promise.all(keys.map((k, idx) => data_default_params[k].method((params || {})[k] || data_default_params[k].mPrams)));
    results.forEach((result, idx) => {
      const data = result.data;
      const k = keys[idx];
      if (!data) return;
      if(k == keys[0]) appStore.SET_MapData(filterGeometryNotEmpty(data));
      bus.emit("changeData");
      const groups = data_default_params[k].groupMethod(data);
      const g_keys = Object.keys(groups);
      bus.emit("removeMapDatas", g_keys);
      g_keys.forEach((key) =>{
        busEmit(beansToMap.key, {beans: groups[key].map((i) => ({...i, color: (default_params[key] || {}).color,})), fields: data_default_params[k].fields, type: key});
        const other = (data_default_params[k].others || {})[key];
        other && busEmit(beansToMap.key, {beans: other.method(groups[key]), fields: data_default_params[k].fields, type: key});
      });
    });

    callback && callback();
  };

  const createPopup = () => {
    newfiberMap.popup = new mapboxgl1.Popup({
      closeButton: false,
      closeOnClick: false,
    });
    newfiberMap.popup1 = new mapboxgl1.Popup({
      closeButton: false,
      closeOnClick: false,
    });
  };

  const setPopupDom = (dom, offset) => {
    f();
    nextTick(f);
    function f() {
      console.log("eval(dom)", eval(dom));
      newfiberMap.popup1.setDOMContent(eval(dom));
      newfiberMap.popup1.setOffset(offset);
    }
  };

  function filterGeometryNotEmpty(inputData) {
    return inputData.map((item) => {
      // 过滤掉每个对象中的 data 数组里 geometry 为空的元素
      const filteredData = item.data.filter((dataPoint) => dataPoint.geometry !== "");
      return {
        ...item,
        data: filteredData,
      };
    });
  }

  //路径规划
  const pathPlanning = async (origin = "116.481028,39.989643", destination = "116.465302,40.004717", callback) => {
    const origin_ = origin.split(",").map(Number);
    const destination_ = destination.split(",").map(Number);
    if (origin_.length != 2 || destination_.length != 2) return console.log("输入参数错误：", origin, destination);
    const results = await request(`/amap/v3/direction/driving?origin=${origin}&destination=${destination}&extensions=all&output=json&key=f627fbb24176be73142eb0b5088d8683`);
    if (!results.route.paths[0]) return console.log("暂无路径！");
    callback && callback(turf.featureCollection(results.route.paths[0].steps.map((i) => turf.feature(Terraformer.WKT.parse(`LINESTRING(${i.polyline.split(";").map((i) => i.split(",").join(" ")).join(",")})`), i))));
  };

  //地理/逆地理编码
  const geoRegeo = async ({name,lngLat,callback}) => {
    let flag,params = null;
    if (name) flag = "geo", params = `address=${name}`;
    if (lngLat) flag = "regeo", params = `location=${lngLat.join(',')}`;
    if(!(flag || params)) console.log('name,lngLat is null!');
    const results = await request(`/amap/v3/geocode/${flag}?${params}&extensions=all&output=json&key=f627fbb24176be73142eb0b5088d8683&city=420111`);
    console.log('geoRegeo results',results);
    callback && callback(results);
    return results;
  };

  //判断是否在打卡点内
  const isClockInRange = (
          currentLocation = "POINT(109.41360117253636 34.49038724464877)",
          ranges = [
            "POINT(109.43167853335872 34.51345940211415)",
            "POINT(109.46797592891363 34.51145239795833)",
            "POINT(109.44903576574815 34.50165755773118)",
          ],
          rVal = 500
  ) => {
    const feature = { ...Terraformer.WKT.parse(currentLocation) };
    return (
            ranges
                    .map((i) => turf.buffer({ ...Terraformer.WKT.parse(i) }, rVal / 1000))
                    .map((i) => turf.booleanContains(i, feature))
                    .filter(Boolean)[0] || false
    );
  };

  const clearTemporaryData = () => {
    const { setLayerVisible, removeMapDatas } = events_params;
    const keys_ = [
      "问题管线",
      "1_泵站",
      "1_污水处理厂",
      "1_调蓄池",
      "分区流向",
      "分区流向1",
      "rainwater_pipeline_water_level",
      "rainwater_pipeline_water_level_GWGSWYX",
      "outlet_info1",
      "temporary",
      "highlight_linestring",
      "highlight_polygon",
      "highlight_point"
    ];
    clearRouteMethod();
    const hideKeys = ["雨水系统流向", "雨水系统流向1","排水分区_close"];
    bus.emit(removeMapDatas.key, keys_);
    const keys = newfiberMap.config_.l7.filter((i) => i.temporary).map((i) => i.key);
    newfiberMap
            .getLayers()
            .filter((i) => keys.includes(i.newfiberId))
            .forEach((i) => i.setData({ type: "FeatureCollection", features: [] }));
    hideKeys.forEach((i) => busEmit(setLayerVisible.key, { layername: i, isCheck: false }));

    setHighlight_();
  };

  const remove3Dtiles = () => {
    newfiberMap.map._controls
    newfiberMap.map._controls
            .filter((i) => i._deck)
            .forEach((i) => i.setProps({ layers: [] }));
  };

  const load3DTiles = ({ id, url }) => {
    remove3Dtiles();
    let deckOverlay = null;
    deckOverlay = newfiberMap.map._controls.filter((i) => i._deck)[0];
    if (!deckOverlay) {
      deckOverlay = new MapboxOverlay({
        interleaved: true,
        layers: [],
      });
      newfiberMap.map.addControl(deckOverlay);
    }
    const layers = deckOverlay._props.layers;
    deckOverlay.setProps({
      layers: [
        ...layers,
        new Tile3DLayer({
          id: id,
          name: id,
          data: url,
          loader: Tiles3DLoader,
          extruded: true, // 设置3D功能
          opacity: 1, // 设置透明度
          loadOptions: {
            "3d-tiles": {
              loadGLTF: true,
              decodeQuantizedPositions: false,
              isTileset: "auto",
              assetGltfUpAxis: null,
            },
          },
          pickable: true, // 设置可选取
          onTilesetLoad: (tileset) => {
            const { cartographicCenter, zoom } = tileset;
            deckOverlay.setProps({
              initialViewState: {
                longitude: cartographicCenter[0],
                latitude: cartographicCenter[1],
                zoom,
              },
            });
          },
          pointSize: 2,
        }),
      ],
    });
  };

  const busEmit = (event, params) => bus.emit(event, params);

  const busOn = (event, func) => bus.on(event, func);

  const busOff = (event) => bus.off(event);
  //添加临时动态线
  const addDynamicLine = (c_layer, c_layer1) => {
    if (newfiberMap.getLayerByName("dynamicLine")) {
      newfiberMap.removeLayer(newfiberMap.getLayerByName("dynamicLine"));
    }
    let dynamicLineJson = turf.featureCollection(
            newfiberMap.map
                    .getSource("sx_wn_hm_merge")
                    ._data.features.filter(
                    (feature) =>
                            feature.properties.c_layer.includes(c_layer) &&
                            feature.properties.c_layer.includes(c_layer1)
            )
    );
    console.log(c_layer, dynamicLineJson);
    let layer = new mapboxL7.LineLayer({
      name: "dynamicLine",
    })
            .source(dynamicLineJson)
            .size(3)
            .shape("line")
            .color("color")
            .animate({
              interval: 1,
              duration: 2,
              trailLength: 0.8,
            });
    newfiberMap.addLayer(layer);
  };
  const events_params = {
    removeMapDatas: { key: "removeMapDatas" },
    setGeoJSON: { key: "setGeoJSON" },
    setLayerVisible: { key: "setLayerVisible" },
    beansToMap: { key: "beansToMap" },
    closeAllLayer: { key: "closeAllLayer" },
    setHighlight: { key: "setHighlight" },
    geoRegeo: { key: "geoRegeo", method: geoRegeo },
    dataToMap: { key: "dataToMap", method: dataToMap },
    pathPlanning: { key: "pathPlanning", method: pathPlanning },
    panelDataToMap: { key: "panelDataToMap", method: panelDataToMap },
    trajectoryToMap: { key: "trajectoryToMap", method: trajectoryToMap },
    clearTrajectory: { key: "clearTrajectory", method: clearTrajectory },
    clearTemporaryData: { key: "clearTemporaryData", method: clearTemporaryData },
    load3DTiles: { key: "load3DTiles", method: load3DTiles },
    remove3Dtiles: { key: "remove3Dtiles", method: remove3Dtiles },
    isOpenPanorama: {
      key: "isOpenPanorama",
      method: (flag) => (datas.isOpenPanorama = flag),
    },
  };

  onMounted(() => {
    bus.on("YQ_head", (val) => {
      if (val == false) {
        MapShow.value = false;
      } else {
        MapShow.value = true;
      }
    });
  });

  onBeforeUnmount(() => {
    bus.off("YQ_head");
    Object.keys(events_params)
            .filter((key) => events_params[key].method)
            .forEach((key) => busOff(events_params[key].key));
    clearInterval(refreshTimer.value); // 清除定时器
    refreshTimer.value = null;
  });
</script>

<style lang="scss">
  #Map {
    width: 100%;
    height: 100%;
  }
</style>