<template>
<div class="mapPage">
<div id="mapbox-map"></div>
<div id="maptalks-map"></div>
</div>
</template>
<script>
import {reactive, toRefs, onBeforeMount, onMounted, nextTick, onBeforeUnmount} from "vue";
import bus from "@/bus";
import axios from "axios";
const baseUrl = import.meta.env.VITE_APP_MAP_BASE_API || "";
export default {
components: {},
props: {
initJson: {
type: String,
default: () => "/static/libs/mapbox/style/floodOneMap.json",
},
loadCallback: {
type: Function,
default: () => function () {},
},
},
setup(props, event) {
const allData = reactive({
layerIds: [],
});
let geojson = {
point: { type: "FeatureCollection", features: [] },
polygon: { type: "FeatureCollection", features: [] },
linestring: { type: "FeatureCollection", features: [] },
};
let map = null;
let config = null;
let highlightLayers = {
highlight_point: 1,
highlight_polygon: 1,
highlight_linestring: 1,
};
let isMvtCache = null;
let isGeojsonCache = null;
const initeMap = async () => {
console.log("baseUrl", baseUrl);
config = (await axios.get(baseUrl + props.initJson)).data;
isMvtCache = config.params.mvt[0].includes("/v1/mvt");
isGeojsonCache = config.params.geojson.includes("/v1/geojson");
const { basemap } = config.params;
const { style, localStyle } = config.params.init;
let styleJson = (await axios.get(localStyle ? baseUrl + localStyle : (style.includes("http") ? "" : location.origin + basemap) + config.params.init.style)).data;
styleJson.glyphs = styleJson.glyphs.includes("http") ? styleJson.glyphs : location.origin + baseUrl + styleJson.glyphs;
styleJson.sprite = styleJson.sprite.includes("http") ? styleJson.sprite : location.origin + baseUrl + styleJson.sprite;
config.params.mapbox.models && (styleJson.models = config.params.mapbox.models)
window.newfiberMap = new mapboxL7.Scene({
id: "mapbox-map",
map: new mapboxL7.Mapbox({
// style: localStyle?localStyle:(style.includes('http')?'':location.origin + config.params.basemap) + config.params.init.style,
...config.params.init,
style: styleJson,
}),
});
newfiberMap.config_ = config;
map = newfiberMap.map;
map.ogcLayers = [];
newfiberMap.unLoadLayers = [];
map.on("load", async () => {
let { sprites, l7, mapbox } = config.params;
(sprites || []).forEach((url) =>
map.style._loadSprite(
url.includes("http")
? baseUrl + url
: window.location.origin.split("#")[0] + url
)
);
((l7 || []).images || []).forEach((item) =>
newfiberMap.addImage(
item.name,
item.url.includes("http")
? baseUrl + item.url
: window.location.origin.split("#")[0] + item.url
)
);
((mapbox || []).images || []).forEach((item) =>
item.url.includes("gif")
? setGifImage(item)
: newfiberMap.map.loadImage(
item.url.includes("http")
? item.url
: baseUrl + item.url,
(error, image) => newfiberMap.map.addImage(item.name, image)
)
);
await getGeoJSON();
await loadData();
newfiberMap
.getLayers()
.filter(
(i) => highlightLayers[i.newfiberId] && (highlightLayers[i.newfiberId] = i)
);
props.loadCallback && props.loadCallback();
getLayerIdByClick();
let timeout = setTimeout(() => {
let { pitch, center } = config.params.init;
pitch && newfiberMap.map.setPitch(pitch);
center && newfiberMap.map.setCenter(center);
(config.orders || []).forEach((item) => setLayerOrder(...item));
clearTimeout(timeout);
}, 2000);
// three();
// getLayerIdByClick();
let layerIds = (config.mapbox || []).map((i) => i.id);
map.on("click", (e)=>{
Object.values(highlightLayers).forEach((layer) => {if (layer.setData) layer.setData({ type: "FeatureCollection", features: [] });});
const feature = (map.queryRenderedFeatures([[e.point.x - 10 / 2, e.point.y - 10 / 2], [e.point.x + 10 / 2, e.point.y + 10 / 2],]) || []).filter((i) => layerIds.includes(i.layer.id))[0];
if (feature && feature.properties.geometry) setHighlight(turf.feature(Terraformer.WKT.parse(feature.properties.geometry), feature.properties));
event.emit("map-click", Object.values(e.lngLat), (feature || {}).properties, ((feature || {}).layer || {}).id);
});
});
async function getGeoJSON() {
config.geojsonMvts = {};
let url = config.mapbox.filter((i) => i.mType == "geojsonMvt").map((item) => {
let { mType, columns, geom_column, id, key,isNotCache } = item;
let sourceID = geom_column ? key + "_" + (geom_column || "") : key;
let params = [];
if (columns) params.push(`columns=${columns}`);
if (geom_column) params.push(`geom_column=${geom_column}`);
if(isNotCache) params.push(`t=${new Date().getTime()}`);
return (config.params.geojson + `/${key}${!isGeojsonCache ? "_" + (geom_column || "geometrys") + ".geojson" : ""}?` + params.join("&"));
});
url = Array.from(new Set(url));
let fetchs = url.map((url) => axios.get(url));
let results = await Promise.all(fetchs);
url.forEach((url, index) => (config.geojsonMvts[url.split((url.includes('&t=')?'&':'')+'t=')[0]] = {...results[index].data, features: results[index].data.features && results[index].data.features.map((i) => ({...i, properties: {...i.properties, name: i.properties.name ? i.properties.name.replaceAll("\\n", "\n") : undefined}}))}));
}
async function setGifImage(item) {
const arrayBuffer = await fetchImageAsArrayBuffer(item.url);
const canvasIcon = new mapboxgl1.CanvasIcon(
item.width || 512,
item.height || 512,
{
autoPixelRatio: true,
onAdd(ctx) {
ctx.gif = mapboxgl1.AnimatedGIF.fromBuffer(arrayBuffer, ctx.context, {});
},
renderCallback(ctx) {
ctx.gif.update(performance.now() / 1000);
ctx.gif.updateFrame();
},
postRender(ctx) {
map.triggerRepaint();
},
}
);
if (!map.hasImage(item.name)) map.addImage(item.name, canvasIcon);
async function fetchImageAsArrayBuffer(url) {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error("Network response was not ok");
}
const arrayBuffer = await response.arrayBuffer();
return arrayBuffer;
} catch (error) {
console.error("There has been a problem with your fetch operation:", error);
}
}
}
};
const loadData = async () => {
let { mapbox, l7, ogc } = config;
if (ogc)
ogc.forEach((item) => {
let { id, type, params, methods } = item;
Object.keys(params).forEach((i) => (params[i] = typeof params[i] == "string" ? params[i].includes("||") ? eval(params[i]) : params[i] : params[i]));
let layer = new mapboxgl1[type](params);
layer.newfiberId = id;
methods.forEach((method) => {
let ms = method.params.map((i) => typeof i == "string" ? (i.includes("||") ? eval(i) : i) : i);
layer[method.name](...ms);
});
map.ogcLayers.push(layer);
});
if (l7)
l7.forEach((item) => {
let { id, columns, filter } = item;
let params = [];
if (columns) params.push(`columns=${columns}`);
if (filter) params.push(`filter=${filter}`);
let urlKey = config.params.geojson + `/${id}${!isGeojsonCache ? "_" + "geometrys" + ".geojson" : ""}?` + params.join("&");
let _geojson = config.geojsonMvts[urlKey];
id ? _geojson ? initMapBoxL7Class(item, _geojson) : axios.get(urlKey).then(({ data: geojson }) => initMapBoxL7Class(item, geojson)) : initMapBoxL7Class(item, geojson[item.key] || turf.featureCollection([]));
});
if (mapbox) initMapBoxLayer();
if (config.maptalks) initMapTalks();
function initMapBoxL7Class({ type, params, methods, id, show, key }, geojson) {
let layer = new mapboxL7[type](params).source(geojson);
methods.forEach((method) => {
let ms = method.params.map((i) => typeof i == "string" ? (i.includes("||") ? eval(i) : i) : i);
layer[method.name](...ms);
});
layer.newfiberId = key;
newfiberMap.addLayer(layer);
if (!show) layer.hide();
allData.layerIds.push(key);
}
function initMapBoxLayer() {
mapbox.forEach((item) => {
let { mType, columns, geom_column, id, key} = item;
let sourceID = geom_column ? key + "_" + (geom_column || "") : key;
let params = [];
if (columns) params.push(`columns=${columns}`);
if (geom_column) params.push(`geom_column=${geom_column}`);
if (!!!map.getSource(sourceID)) {
let flag = mType == "geojson";
flag
? map.addSource(sourceID, { type: mType, data: geojson[key] })
: map.addSource(sourceID, {
...(mType == "mvt"
? {
type: "vector",
tiles:config.params.mvt.map(i => i + `/${key}/{z}/{x}/{y}${!isMvtCache ? ".pbf" : ""}?` + params.join("&")),
/* tiles: [
config.params.mvt + `/${key}/{z}/{x}/{y}${!isMvtCache ? ".pbf" : ""}?` + params.join("&"),
],*/
tileSize: 512,
scheme: "xyz",
maxzoom: 14,
minzoom: 1,
}
: {type: "geojson", data: config.geojsonMvts[config.params.geojson + `/${key}${!isGeojsonCache ? "_" + (geom_column || "geometrys") + ".geojson" : ""}?` + params.join("&")],}),
});
}
map.addLayer({ ...item, source: sourceID });
map.moveLayer(id);
allData.layerIds.push(id);
});
}
function initMapTalks() {
config.maptalks.options = Object.assign(config.maptalks.options || {},config.params.init);
let keys = Object.keys(config.geojsonMvts);
config.maptalks.layers.forEach(layer => layer.layers.filter(l => l.type == 'GeoJSONVectorTileLayer').flat(Infinity).forEach(l => keys.forEach(kk => kk.includes(l.options.data) && (l.options.data = config.geojsonMvts[kk]))));
newfiberMap.maptalks = maptalks.Map.fromJSON('maptalks-map', config.maptalks);
const SYNC_MAP_EVENTS = {
window: {
events: ['moving moveend', 'zooming zoomend', 'pitch', 'rotate'],
callback: (e,event) => {
e = e.target;
newfiberMap.map.setCenter(Object.values(e.getCenter()));
newfiberMap.map.setPitch(e.getPitch());
newfiberMap.map.setBearing(e.getBearing());
newfiberMap.map.setZoom(maptalks.MapboxglLayer.getMapBoxZoom(newfiberMap.maptalks.getResolution()));
}
},
operate:{
events:['click'],
callback: (e, event_key) => {
let results = newfiberMap.maptalks.getLayers()[0].getLayers().map(layer => layer.identify(Object.values(e.coordinate),{tolerance:2})).flat().filter(Boolean);
results.length?
event.emit("map-click", results[0].coordinate, results[0].data.feature.properties, results[0].data.tile.layer):
newfiberMap.getMapCanvasContainer().dispatchEvent(new MouseEvent(event_key, {clientX: e.containerPoint.x, clientY: e.containerPoint.y}))
}
}
};
Object.keys(SYNC_MAP_EVENTS).forEach(key => SYNC_MAP_EVENTS[key].events.forEach(event => newfiberMap.maptalks.on(event,(e) => SYNC_MAP_EVENTS[key].callback(e,event))));
SYNC_MAP_EVENTS.window.callback({target:newfiberMap.maptalks});
newfiberMap.map.easeTo = (view)=> newfiberMap.maptalks.setView(view)
newfiberMap.map.flyTo = (view)=> newfiberMap.maptalks.setView(view)
}
};
const setLayerVisible = ({ layername, isCheck, values = [] }) => {
if (!!!layername) return;
if (((config || {}).filter || [])[layername]) {
config.filter[layername].layerName.forEach((name, index) => {
let layer = newfiberMap.getLayers().filter((i) => i.newfiberId == name)[0];
let fValues = config.filter[layername].filter[index] || [];
if (layer) {
let geojson = layer.getSource().originData;
geojson.features.forEach(
(i) =>
fValues.includes(i.properties.type) && (i.properties.visible = isCheck)
);
layer.setData(geojson);
}
if (map.getLayer(name)) {
fValues = fValues.filter(Boolean);
let filter = map.getFilter(name);
if (filter) {
if (values.length) fValues = values;
if (filter[0] == "in") {
isCheck
? filter.push(...fValues)
: (filter = filter.filter((i) => !fValues.includes(i)));
} else {
let _filter =
filter[filter.length - 1][filter[filter.length - 1].length - 1][
filter[filter.length - 1][filter[filter.length - 1].length - 1]
.length - 1
];
isCheck
? filter[filter.length - 1][filter[filter.length - 1].length - 1][
filter[filter.length - 1][filter[filter.length - 1].length - 1]
.length - 1
].push(...fValues)
: (filter[filter.length - 1][filter[filter.length - 1].length - 1][
filter[filter.length - 1][filter[filter.length - 1].length - 1]
.length - 1
] = _filter.filter((i) => !fValues.includes(i)));
}
map.setFilter(name, filter);
}
}
});
config.filter[layername].easeTo &&
isCheck &&
map.easeTo({ ...config.filter[layername].easeTo, pitch: 51 });
}
newfiberMap.maptalks && newfiberMap.maptalks.getLayers().forEach(i => i.getLayers().forEach(o => o._getStyleIndex(layername) != -1 && o.updateSymbol(layername,{visible:isCheck})))
let features = Object.values(geojson)
.map((i) => i.features)
.flat(Infinity)
.filter((i) => i.properties.type == layername);
if (features.length) {
let types = Array.from(
new Set(features.map((i) => i.geometry.type.toLocaleLowerCase()))
);
types.forEach((type1) => {
let filter = map.getFilter(type1);
if (filter[0] == "in") {
isCheck
? filter.push(layername)
: (filter = filter.filter((i) => i != layername));
} else {
let _filter =
filter[filter.length - 1][filter[filter.length - 1].length - 1][
filter[filter.length - 1][filter[filter.length - 1].length - 1].length - 1
];
isCheck
? filter[filter.length - 1][filter[filter.length - 1].length - 1][
filter[filter.length - 1][filter[filter.length - 1].length - 1].length -
1
].push(layername)
: (filter[filter.length - 1][filter[filter.length - 1].length - 1][
filter[filter.length - 1][filter[filter.length - 1].length - 1].length -
1
] = _filter.filter((i) => i != layername));
}
map.setFilter(type1, filter);
});
}
let layer = newfiberMap.getLayers().filter((i) => i.newfiberId == layername)[0];
if (!!!layer) {
layer = newfiberMap.unLoadLayers.filter((i) => i.newfiberId == layername)[0];
isCheck && layer && newfiberMap.addLayer(layer);
}
layer && layer[["hide", "show"][Number(isCheck)]]();
layer = map.getLayer(layername);
layer &&
map.setLayoutProperty(layername, "visibility", isCheck ? "visible" : "none");
layer = map.getLayer(layername + "_text");
layer &&
map.setLayoutProperty(
layername + "_text",
"visibility",
isCheck ? "visible" : "none"
);
layer = map.getLayer(layername + "_top");
layer &&
map.setLayoutProperty(
layername + "_top",
"visibility",
isCheck ? "visible" : "none"
);
layer = map.ogcLayers.filter((i) => i.id == layername)[0];
layer && (layer.map ? layer[isCheck ? "show" : "hide"]() : layer.addTo(map));
map.triggerRepaint();
};
window.setLayerVisible = setLayerVisible;
const getGeojsonByType = ({ type, callback }) => {
let geojs = turf.featureCollection(
Object.values(geojson)
.map((i) => i.features)
.flat(Infinity)
.filter((i) => i.properties.type == type)
);
callback && callback(geojs);
};
const removeLayers = (ids) => {
let { getLayers, removeAllLayer, removeLayer: removeLayerL7 } = newfiberMap;
let { getLayer, removeLayer } = map;
if (!!!ids) {
allData.layerIds.forEach((id) => getLayer(id) && removeLayer(id));
return removeAllLayer();
}
ids.forEach((id) => {
getLayer(id) && removeLayer(id);
getLayers().forEach((layer) => layer.newfiberId == id && removeLayerL7(layer));
});
};
const closeAllLayer = () => {
if (newfiberMap.getLayerByName("dynamicLine")) {
newfiberMap.removeLayer(newfiberMap.getLayerByName("dynamicLine"));
}
if (newfiberMap && newfiberMap.RainsLayer) {
newfiberMap.RainsLayer.destroy();
}
if(newfiberMap.maptalks){
let names = newfiberMap.maptalks.getLayers().map(i => i.getLayers()).flat(Infinity).map(o => o._vtStyle.map(i => i.name)).flat(Infinity);
names.forEach(layername => newfiberMap.maptalks.getLayers().forEach(i => i.getLayers().forEach(o => o._getStyleIndex(layername) != -1 && o.updateSymbol(layername,{visible:false}))))
}
if (newfiberMap.popup) newfiberMap.popup.remove();
let point = (newfiberMap.map.getFilter("point") || []).flat(Infinity);
let line = (newfiberMap.map.getFilter("linestring") || []).flat(Infinity);
let polygon = (newfiberMap.map.getFilter("polygon") || []).flat(Infinity);
if (point.concat(line).concat(polygon).length == 0) return;
config.ogc.map((i) => i.id).concat(config.l7.filter((i) => i.id).map((i) => i.key)).concat(Object.keys(config.filter)).concat(Array.from(new Set([point, line, polygon].map((i) => _.slice(i, i.indexOf(""))).flat().filter(Boolean)))).forEach((i) => setLayerVisible({ layername: i, isCheck: false }));
bus.emit("openMapPopup", {});
bus.emit("setHighlight", []);
bus.emit("clearTuLiCheck", false);
};
const removeMapDatas = (types) => {
types = types.map(i => i+'_text').concat(types);
!!!types
? Object.keys(geojson).forEach((key) => (geojson[key].features.length = 0))
: Object.keys(geojson).forEach(
(key) =>
(geojson[key].features = geojson[key].features.filter(
(feature) => !types.includes(feature.properties.type)
))
);
newfiberMap.getLayers().filter(k => types.includes(k.newfiberId)).forEach(k => k.setData(turf.featureCollection([])))
return refreshGeoJSON();
};
const setLegendData = (list) => {
list.forEach((i) => {
let points = [];
if (!i.data) return;
i.data.features.forEach((a) => {
if (!!!a || !!!a.properties) return;
(a.properties.minzoom = a.properties.minzoom || 0),
(a.properties.color = a.properties.color || "rgba(0,0,0,1)"),
(a.properties.type = a.properties.type || i.layername);
a.properties.name = a.properties.name || a.properties.Name || a.properties.stName || a.properties.pointNumber || a.properties.sewageName || a.properties.sectionName || a.properties.pumpName;
a.properties._image = a.properties._image || a.properties.type;
if (a.properties.name && !turf.getType(a).toLocaleLowerCase().includes("point")) {
let center = turf.center(a);
center.properties = { ...a.properties, minzoom: 10,type:a.properties.type +"_text" };
center.properties.geometry = Terraformer.WKT.convert(center.geometry);
points.push(center);
}
});
i.data.features = i.data.features.concat(points);
});
let types = {};
list
.map((i) => i.data && i.data.features)
.filter(Boolean)
.flat(Infinity)
.forEach((feature) => {
if (!!!feature || !!!feature.properties) return;
feature.properties.geometry = Terraformer.WKT.convert(feature.geometry);
let type = feature.geometry.type.toLocaleLowerCase();
let flag = type.includes("multi");
type = type.replaceAll("multi", "");
let features = null;
if (flag) features = turf.flatten(feature).features;
!!!types[type] && (types[type] = []);
types[type].push(...(features ? features : [feature]));
});
Object.keys(types).forEach((key) => geojson[key].features.push(...types[key]));
refreshGeoJSON();
};
const refreshGeoJSON = () => {
const cacheKeys = Object.keys(newfiberMap.map.style._sourceCaches);
Object.keys(geojson).forEach((key) => {
map.getSource(key) && map.getSource(key).setData(geojson[key]);
// cacheKeys.filter(k => k.includes(key)).forEach(k => newfiberMap.map.style._sourceCaches[k].clearTiles());
});
map.triggerRepaint();
};
const setGeoJSON = ({ json, key }) => {
let layer = newfiberMap.getLayers().filter((i) => i.newfiberId == key)[0];
if (!!!layer) {
layer = newfiberMap.unLoadLayers.filter((i) => i.newfiberId == key)[0];
layer && layer.setData(json);
layer && newfiberMap.addLayer(layer);
}
if (layer) return layer.setData(json);
setLegendData([{ data: json, layername: key, type: "point" }]);
};
const beansToMap = ({beans, fields = { geometry: "geometry", lng: "lng", lat: "lat", name: "name"}, type, isConvert,}) => {
let geojson = turf.featureCollection(
beans.filter((i) => i[fields.geometry] || (Boolean(Number(i[fields.lng])) && Boolean(Number(i[fields.lat])))).map((i) => {
let feature = null;
if (i[fields.geometry]) feature = turf.feature(Terraformer.WKT.parse(i[fields.geometry]), {...i, name: i[fields.name],});
if (i[fields.lng]) feature = turf.point([i[fields.lng], i[fields.lat]].map(Number), {...i, name: i[fields.name],});
feature.properties.visible = false;
if ( feature.properties.name && !turf.getType(feature).toLocaleLowerCase().includes("point")) {
let center = turf.pointOnFeature(feature);
center.properties = { ...feature.properties, minzoom: 10,type:feature.properties.type };
center.properties.geometry = Terraformer.WKT.convert(center.geometry);
return [feature,center];
}
return feature;
}).flat().filter(Boolean));
isConvert && (geojson = gcoord.transform(geojson, gcoord.AMap, gcoord.WGS84));
setGeoJSON({ json: geojson, key: type });
};
const setHighlight = (features = {}) => {
let array = {};
features = features.forEach ? features : [features];
Object.values(highlightLayers).forEach(
(layer) =>
layer.setData && layer.setData({ type: "FeatureCollection", features: [] })
);
features.forEach((feature) => {
if (!!!feature || !Boolean(Object.keys(feature).length)) return;
let geometry = feature.geometry;
let type = geometry.type.toLocaleLowerCase().replaceAll("multi", "");
let key = Object.keys(highlightLayers).filter(
(key) => key.lastIndexOf(type) > -1
)[0];
if (!array[key]) array[key] = [];
array[key].push(feature);
});
Object.keys(array).forEach(
(key) =>
highlightLayers[key] &&
highlightLayers[key].setData({
type: "FeatureCollection",
features: array[key],
})
);
};
const setLayerOrder = (sourceLayer, targetLayer) => {
map.moveLayer(sourceLayer, targetLayer);
};
const getLayerIdByClick = () => {
map.getStyle().layers.forEach((i) =>
map.on("click", i.id, (a, b, c, d) => {
console.log("layer-id", a.features[0].layer.id);
})
);
};
const updateStyle = (styleJson) => {
styleJson.glyphs = styleJson.glyphs.includes("http")
? styleJson.glyphs
: location.origin + styleJson.glyphs;
styleJson.sprite = styleJson.sprite.includes("http")
? styleJson.sprite
: location.origin + styleJson.sprite;
const currentStyle = map.getStyle();
styleJson.sources = Object.assign({}, currentStyle.sources, styleJson.sources);
let labelIndex = styleJson.layers.findIndex((el) => {
return el.id == "waterway-label";
});
if (labelIndex === -1) {
labelIndex = styleJson.layers.length;
}
const appLayers = currentStyle.layers.filter((el) => {
return (
el.source &&
el.source != "mapbox://mapbox.satellite" &&
el.source != "mapbox" &&
el.source != "composite"
);
});
styleJson.layers = [
...styleJson.layers.slice(0, labelIndex),
...appLayers,
...styleJson.layers.slice(labelIndex, -1),
];
map.setStyle(styleJson);
};
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);
};
onMounted(() => {
initeMap();
bus.on("beansToMap", beansToMap);
bus.on("setLayerVisible", setLayerVisible);
bus.on("setLegendData", setLegendData);
bus.on("setGeoJSON", setGeoJSON);
bus.on("getGeojsonByType", getGeojsonByType);
bus.on("removeLayers", removeLayers);
bus.on("removeMapDatas", removeMapDatas);
bus.on("setHighlight", setHighlight);
bus.on("updateStyle", updateStyle);
bus.on("closeAllLayer", closeAllLayer);
bus.on("addDynamicLine", addDynamicLine);
});
onBeforeUnmount(() => {
bus.off("beansToMap");
bus.off("setLayerVisible");
bus.off("setLegendData");
bus.off("setGeoJSON");
bus.off("getGeojsonByType");
bus.off("removeMapDatas");
bus.off("setHighlight");
bus.off("updateStyle");
bus.off("closeAllLayer");
bus.off("addDynamicLine");
if (newfiberMap) {
if (newfiberMap.RainsLayer) newfiberMap.RainsLayer.destroy();
newfiberMap.destroy();
newfiberMap = null;
}
});
return {
...toRefs(allData),
};
},
};
</script>
<style>
.mapPage {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
background: lavender;
}
#maptalks-map,#mapbox-map {
width: 100%;
height: 100%;
position: absolute;
}
.l7-control-mouse-location {
background: none;
}
.l7-control-mouse-location {
color: #ffffff;
}
.maptalks-attribution,.l7-control-logo-link{
display: none !important;
}
</style>
