<template>
<MapBox
:initJson="props.initJson"
:loadCallback="getModalData"
@map-click="mapClickEvt"
v-show="MapShow"
>
</MapBox>
<PopupInfo>
{{item?.aaa}}
</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 ws_routeGeoJSON from "../../../public/static/libs/mapbox/json/ws_flow.json";
// import ws_pointGeoJSON from "../../../public/static/libs/mapbox/json/ws_point.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: "排水分区",
text_key:"排水分区_text",
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;
})();
const _keys = ["rain_water_pump_station_info1", "sewage_pump_station_info1",'rainwater_pipeline_quality_area1','clickPoint','temporary','sewage_pipeline_quality1'];
console.log("properties", properties, layerId);
// 图层点击事件
if (properties) {
if(properties.type == _keys[4])properties.type = properties.pointType
bus.emit("FenQuClick", {properties,layerId:layerId.split('_')[0]});
}
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;
(() => {
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]: () => {
['污水系统流向1','雨水系统流向','雨水系统流向1','污水系统流向1','污水系统流向'].forEach(k => busEmit(setLayerVisible.key, {layername:k, isCheck: false}));
properties.type == 'YS' && ["outlet_info2",'排口流向','排口流向1','rainwater_pipeline_quality1',_keys[2]].forEach(k => busEmit(setLayerVisible.key, {layername:k, isCheck: true}));
areaToMap(properties);
},
[psfq.text_key]: () => {
['污水系统流向1','雨水系统流向','雨水系统流向1','污水系统流向1','污水系统流向'].forEach(k => busEmit(setLayerVisible.key, {layername:k, isCheck: false}));
properties.type == 'YS' && ["outlet_info2",'排口流向','排口流向1','rainwater_pipeline_quality1',_keys[2]].forEach(k => busEmit(setLayerVisible.key, {layername:k, isCheck: true}));
areaToMap({...properties,geometry:Terraformer.WKT.convert(JSON.parse(properties.geometrys))});
},
[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) {
let isYS = properties.type == 'YS';
clearRouteMethod();
districtMask(properties);
({
"1":()=>{
!layerId && newfiberMap.map.easeTo(newfiberMap.config_.params.init);
!isYS && wsRouteToMapByName(properties);
},
"2":()=>{
[
() => wsRouteToMapByName(properties),
() => showOutletInfo(properties)
][Number(isYS)]();
},
"3":()=>{
[
()=> {
wsRouteToMapByName(properties);
},
() => {
ys_flow({...properties, c_layer: `排水分区_${properties.type}_${properties.level}`}, true);
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));
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]});
}][Number(isYS)]();
},
"4":()=>{}
})[properties.level]();
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 wsRouteToMapByName(properties) {
const _keys_ = ['污水系统流向1','污水系统流向',"1_泵站","1_污水处理厂"];
_keys_.forEach(k => busEmit(setLayerVisible.key, {layername:k, isCheck: true}));
busEmit(removeMapDatas.key, _keys_);
let features = _.cloneDeep(ws_routeGeoJSON.features.filter(i => i.properties.bind.split(',').includes(properties.name)));
let geojson = turf.featureCollection(features.map(i => Object.assign(i,{properties:{name:i.properties.name,type:i.properties._type || '污水系统流向1',color:'rgb(255,74,25)',width:[0,7,5,3][properties.level]}})));
newfiberMap.getLayers().filter(i => i.newfiberId == _keys_[1])[0].setData(geojson);
busEmit(setGeoJSON.key, {json: geojson, key: _keys_[0]});
if(['2','3'].includes(properties.level)){
let polygon = turf.flatten(Terraformer.WKT.parse(properties.geometry)).features[0];
let features_point = _.cloneDeep(newfiberMap.map.getSource("point")._data.features.filter(i => _keys[5].includes(i.properties.type)).filter(o => turf.booleanPointInPolygon(o, polygon)));
let features_point1 = _.cloneDeep(newfiberMap.map.getSource("point")._data.features.filter(i => _keys[1].includes(i.properties.type)).filter(o => turf.booleanPointInPolygon(o, polygon)));
let geojson1 = turf.featureCollection(
[
...features_point.map(i => ({...i,properties: {...i.properties, type: _keys[5]}})),
...features_point1.map(i => ({...i,properties: {...i.properties, type: _keys[1]}}))
].flat().filter(Boolean));
busEmit(setGeoJSON.key, {json: geojson1, key: _keys[5]});
}
}
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','污水系统流向',"1_泵站","1_污水处理厂",'排口流向', '排口流向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 (point1,feature,layerId) => {
console.log('周边街景经纬度1', point1);
let point = _.cloneDeep(point1);
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.stName = positionAddress;
bus.emit('popupcontent', {
popupShow: true,
point: turf.getCoords(clickPoint),
popupInfo: data,
});
console.log('周边街景经纬度2', turf.getCoords(clickPoint));
}
}
]})
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) => {
let isUp=Object.keys(obj).includes('isUp')?obj.isUp:true; //是否触发地图点击事件 默认触发
// 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('feature.properties.p_type&&isUp',feature.properties.p_type&&isUp);
if(feature.properties.p_type && isUp) 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);
if(k == keys[0]) {
appStore.SET_MapData(filterGeometryNotEmpty(data));
appStore.SET_MapData_COUNT(_.assign({},...g_keys.map(a => ({[a]:groups[a].length}))));
}
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",'clickPoint','sewage_pipeline_quality1','rainwater_pipeline_quality_area1'
];
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>
