- <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>