<template>
<div class="mapPage">
<div id="cesiumContainer"></div>
</div>
</template>
<script>
import { reactive, toRefs, onBeforeMount, onMounted, nextTick, onBeforeUnmount } from 'vue';
import bus from '@/bus';
import axios from 'axios';
import buildingGeojson from '@/assets/yanAnBuilding.json';
import yanAnRoad from '@/assets/yanAnRoad.json';
import yanAnWater from '@/assets/yanAnWater.json';
import { buffer } from 'ol/size';
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,
};
const initeMap = async () => {
config = (await axios.get(props.initJson)).data;
const { basemap } = config.params;
const { style, localStyle } = config.params.init;
let styleJson = (
await axios.get(
localStyle ? localStyle : (style.includes('http') ? '' : location.origin + basemap) + config.params.init.style
)
).data;
styleJson.glyphs = styleJson.glyphs.includes('http') ? styleJson.glyphs : location.origin + styleJson.glyphs;
styleJson.sprite = styleJson.sprite.includes('http') ? styleJson.sprite : location.origin + styleJson.sprite;
window.newfiberMapbox = new mapboxL7.Scene({
id: 'cesiumContainer',
map: new mapboxL7.Mapbox({
style: styleJson,
// style: localStyle?localStyle:(style.includes('http')?'':location.origin + config.params.basemap) + config.params.init.style,
center: config.params.init.center,
zoom: config.params.init.zoom,
}),
});
map = newfiberMapbox.map;
map.ogcLayers = [];
map.setMaxZoom(18);
newfiberMapbox.unLoadLayers = [];
map.on('load', async () => {
const mouseLocation = new mapboxL7.MouseLocation({
transform: position => {
return position;
},
});
newfiberMapbox.addControl(mouseLocation);
let { sprites, l7 } = config.params;
(sprites || []).forEach(url =>
map.style._loadSprite(url.includes('http') ? url : window.location.origin.split('#')[0] + url)
);
((l7 || []).images || []).forEach(item =>
newfiberMapbox.addImage(
item.name,
item.url.includes('http') ? item.url : window.location.origin.split('#')[0] + item.url
)
);
addYanAnBuilding();
addYanAnRiverFlow();
// addYanAnRoad();
await getGeoJSON();
await loadData();
props.loadCallback && props.loadCallback();
// getLayerIdByClick();
newfiberMapbox.getLayers().filter(i => highlightLayers[i.newfiberId] && (highlightLayers[i.newfiberId] = i));
let timeout = setTimeout(() => {
let { pitch, center } = config.params.init;
pitch && newfiberMapbox.map.setPitch(pitch);
center && newfiberMapbox.map.setCenter(center);
(config.orders || []).forEach(item => setLayerOrder(...item));
clearTimeout(timeout);
}, 1000);
// 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];
setHighlight(feature);
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 } = 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}`);
return config.params.mvt + `/v1/geojson/${key}?` + 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] = results[index].data));
}
};
const loadData = async () => {
let { mapbox, l7, ogc } = config;
if (mapbox) initMapBoxLayer();
if (l7)
l7.forEach(item => {
let { id, columns, filter } = item;
let params = [];
if (columns) params.push(`columns=${columns}`);
if (filter) params.push(`filter=${filter}`);
id
? axios
.get(config.params.mvt + `/v1/geojson/${id}?` + params.join('&'))
.then(({ data: geojson }) => initMapBoxL7Class(item, geojson))
: initMapBoxL7Class(item, geojson[item.key] || turf.featureCollection([]));
});
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);
});
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;
if (!show) return newfiberMapbox.unLoadLayers.push(layer);
newfiberMapbox.addLayer(layer);
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 + `/v1/${mType}/${key}/{z}/{x}/{y}?` + params.join('&')],
tileSize: 512,
scheme: 'xyz',
maxzoom: 14,
minzoom: 1,
}
: {
type: 'geojson',
data: config.geojsonMvts[config.params.mvt + `/v1/geojson/${key}?` + params.join('&')],
}),
});
}
map.addLayer({ ...item, source: sourceID });
map.moveLayer(id, undefined);
allData.layerIds.push(id);
});
}
};
const setLayerVisible = ({ layername, isCheck, values = [] }) => {
if (!!!layername) return;
if (((config || {}).filter || [])[layername]) {
config.filter[layername].layerName.forEach((name, index) => {
let layer = newfiberMapbox.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 (!fValues.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);
}
});
return config.filter[layername].easeTo && isCheck && map.easeTo(config.filter[layername].easeTo);
}
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 = newfiberMapbox.getLayers().filter(i => i.newfiberId == layername)[0];
if (!!!layer) {
layer = newfiberMapbox.unLoadLayers.filter(i => i.newfiberId == layername)[0];
isCheck && layer && newfiberMapbox.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.ogcLayers.filter(i => i.id == layername)[0];
layer && (layer.map ? layer[isCheck ? 'show' : 'hide']() : layer.addTo(map));
};
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 } = newfiberMapbox;
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 removeMapDatas = 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)))
);
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;
if (a.properties.name && !turf.getType(a).toLocaleLowerCase().includes('point')) {
let center = turf.pointOnFeature(a);
center.properties = { ...a.properties, minzoom: 10 };
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 = () => {
Object.keys(geojson).forEach(key => map.getSource(key) && map.getSource(key).setData(geojson[key]));
map.triggerRepaint();
};
const setGeoJSON = ({ json, key }) => {
let layer = newfiberMapbox.getLayers().filter(i => i.newfiberId == key)[0];
console.log('layer----', layer);
if (!!!layer) {
layer = newfiberMapbox.unLoadLayers.filter(i => i.newfiberId == key)[0];
layer && layer.setData(json);
layer && newfiberMapbox.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],
});
return feature;
})
.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) || !feature.properties.geometry) return;
let geometry = Terraformer.WKT.parse(feature.properties.geometry);
let geoFeature = turf.feature(geometry, feature.properties);
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(geoFeature);
});
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 addYanAnBuilding = () => {
map.addLayer({
id: 'buildingLayer',
type: 'fill-extrusion',
source: {
type: 'geojson',
data: buildingGeojson,
},
// //绘画功能
paint: {
// Get the fill-extrusion-color from the source 'color' property. 从source 'color'属性获取fill- extrusive -color。
// 'fill-extrusion-color':'rgba(200, 100, 240, 0.4)',
// "fill-extrusion-color":['get','color'],//加载数据中的颜色
'fill-extrusion-color': {
//根据数值中加载相对应颜色
property: 'height_3', // this will be your density property form you geojson
stops: [
[10, '#009bdd'],
[20, '#009bdd'],
[30, '#009bdd'],
[80, '#00a8de'],
[100, '#24edff'],
[125, '#24edff'],
[300, '#24edff'],
],
},
// 从source 'height'属性获取填充-挤出-高度。
'fill-extrusion-height': ['get', 'height_3'],
'fill-extrusion-opacity': 1,
},
});
};
//添加延安水系
const addYanAnRiverFlow = () => {
let layer = new mapboxL7.LineLayer({
name: 'waterLake',
})
.source(yanAnWater)
.size(4)
.shape('line')
.texture('arrow')
.color('aqua')
.animate({
interval: 2, // 间隔
duration: 3, // 持续时间，延时
trailLength: 3, // 流线长度
})
.style({
opacity: 0.8,
lineTexture: true, // 开启线的贴图功能
iconStep: 200, // 设置贴图纹理的间距
borderWidth: 0.4, // 默认文 0，最大有效值为 0.5
borderColor: '#fff', // 默认为 #ccc
});
newfiberMapbox.addLayer(layer);
};
//添加延安路网
const addYanAnRoad = () => {
let layer = new mapboxL7.LineLayer({
name: 'dynamicRoad',
})
.source(yanAnRoad)
.size(1.3)
.shape('line')
.color('rgb(184, 184, 184)')
.animate({
interval: 1, // 间隔
duration: 1.5, // 持续时间，延时
trailLength: 2, // 流线长度
})
.style({
opacity: 0.6,
});
newfiberMapbox.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);
});
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');
if (newfiberMapbox) {
newfiberMapbox.destroy();
newfiberMapbox = null;
}
});
return {
...toRefs(allData),
};
},
};
</script>
<style>
.mapPage {
width: 100%;
height: 100%;
position: absolute;
left: 0px;
top: 0px;
z-index: 0;
background: lavender;
}
#cesiumContainer {
width: 100%;
height: 100%;
position: absolute;
}
.l7-control-mouse-location {
background: none;
}
.l7-control-mouse-location {
color: #ffffff;
}
</style>
