<template>
  <MapBox
    :initJson="props.initJson"
    :loadCallback="getModalData"
    @map-click="mapClickEvt"
    v-show="MapShow"
  >
  </MapBox>
  <!-- <div id="trajectory-popup" ref="trajectory">1111</div> -->
  <div style="width: 700px; height: 350px" ref="streetSpace1" id="streetSpace">
    <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_flow from "../../../public/static/libs/mapbox/json/ys_flow.json";
import line from "../../../public/static/libs/mapbox/json/line.json";
import point from "../../../public/static/libs/mapbox/json/point.json";
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,
  },
  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,
  },
  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);
  clearTrajectory();
  clearTemporaryData();
  proxy.$emit("map-click1", lngLat, properties, layerId);
  const { town, hupo, gangqu, hb_wh_dhgx_merge } = default_params;
  const { setLayerVisible, setHighlight, setGeoJSON, removeMapDatas } = events_params;
  const _keys = ["rain_water_pump_station_info", "sewage_pump_station_info"];

  (() => {
    setHighlight_(properties);
    newfiberMap
      .getLayers()
      .filter((i) => i.newfiberId == "村域边界")[0]
      .setData(turf.featureCollection([]));
    if (town.prevId) {
      busEmit(setLayerVisible.key, { layername: town.key, isCheck: true });
      busEmit(setLayerVisible.key, { layername: town.prevId, isCheck: false });
      town.prevId = null;
    }
    busEmit(
      removeMapDatas.key,
      _keys.map((k) => k + 1)
    );
  })();
  ((
    {
      [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);
          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 ys_flow(properties, visible) {
    const keys = ["雨水系统流向", "雨水系统流向1"];
    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) && i.properties.name.includes(nameKey)
    );
    let features1 = point.features.filter(
      (i) => i.properties.area.includes(key) && i.properties.system.includes(nameKey)
    );
    let points = _.groupBy(features1, (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 setHighlight_(properties = {}) {
  const temporary = "temporary";
  bus.emit("removeMapDatas", [temporary]);
  if (!properties.geometry) 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();
  const { setLayerVisible, setHighlight } = events_params;
  Object.keys(events_params)
    .filter((key) => events_params[key].method)
    .forEach((key) => busOn(events_params[key].key, events_params[key].method));
  // 获取地图项目数据
  dataToMap({});
  //5分钟刷新一次实时数据1000 * 60 * 5)
  /*  refreshTimer.value = setInterval(() => {
    dataToMap({ params: { rainfall: {}, pipeline: {}, drainUutlet: {} } });
  }, 1000 * 60 * 5);*/
  createPopup();
  busEmit(events_params.closeAllLayer.key);
  proxy.$emit("loadCallback");
  ww();
  ysFlow();
};

const ysFlow = () => {
  const key = "雨水系统流向";
  // let features = line.features.filter(i => key.includes(i.properties.area));
  // ys_flow.features = ys_flow.features.concat(features).map(i => ({ ...i, properties: { ...i.properties, color: 'rgba(49,254,223,1)', name: undefined } }));
  newfiberMap
    .getLayers()
    .filter((i) => i.newfiberId == key)[0]
    .setData(ys_flow);
  busEmit(events_params.setGeoJSON.key, { json: ys_flow, 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_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.name == obj.name)[0] ||
    features[_.random(0, features.length - 1)];
  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:'')
        ),
    },
    //车辆
    /*    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),
    },*/
  };
  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;
    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,
      })
    );
  });

  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=74f1b47f7fea1971354edb2dfacb3982`
  );
  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 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",
    "rainwater_pipeline_water_level",
    "rainwater_pipeline_water_level_GWGSWYX",
    "outlet_info1",
    "temporary",
    "highlight_linestring",
    "highlight_polygon",
    "highlight_point",
  ];
  const hideKeys = ["雨水系统流向", "雨水系统流向1"];
  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.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' },
  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>