- <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",
- "",
- "rainwater_pipeline_quality_area1",
- "clickPoint",
- "temporary",
- ];
-
- 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;
- }
-
- // clearRouteMethod();
- /* 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;
- let kk = _.replace(outlet_info2.key, /\d+/g, "");
- if (properties.type.includes(kk)) {
- clearRouteMethod();
- outletRouteMethod(properties);
- }
- },
- [psfq.key]: () => {
- [
- "污水系统流向1",
- "雨水系统流向",
- "雨水系统流向1",
- "污水系统流向1",
- "污水系统流向",
- ].forEach((k) => busEmit(setLayerVisible.key, { layername: k, isCheck: false }));
- properties.type == "YS" &&
- [
- "排口流向",
- "排口流向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" &&
- [
- "排口流向",
- "排口流向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);
- [() => wsRouteToMapByName([properties]), () => showOutletInfo(properties)][
- Number(isYS)
- ]();
- },
- 2: () => {
- [() => wsRouteToMapByName([properties]), () => showOutletInfo(properties)][
- Number(isYS)
- ]();
- },
- 3: () => {
- [
- () => {
- wsRouteToMapByName([properties]);
- },
- () => {
- const _keys_ = [
- "rainwater_pipeline_quality_area1",
- "rainwater_pipeline_quality1",
- ];
- let kk = _.replace(_keys_[1], /\d+/g, "");
- 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) => i.properties.type.includes(kk))
- .filter((o) => turf.booleanPointInPolygon(o, p_feature));
- features = features.map((i) =>
- Object.assign(_.cloneDeep(i), {
- properties: {
- ...i.properties,
- type: i.properties.type.includes(_keys_[0]) ? _keys_[0] : _keys_[1],
- },
- })
- );
- // debugger;
- busEmit(setGeoJSON.key, {
- json: turf.featureCollection(features),
- key: _keys_[0],
- });
- },
- ][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 showOutletInfo(properties) {
- const key = "outlet_info";
- busEmit(removeMapDatas.key, [key + 2]);
- let polygon = turf.flatten(Terraformer.WKT.parse(properties.geometry)).features[0];
- let features = _.cloneDeep(
- newfiberMap.map
- .getSource("point")
- ._data.features.filter((i) => i.properties.type.includes(key))
- .filter((o) => turf.booleanPointInPolygon(o, polygon))
- );
- let geojson1 = turf.featureCollection(
- [...features.map((i) => ({ ...i, properties: { ...i.properties, type: key + 2 } }))]
- .flat()
- .filter(Boolean)
- );
- busEmit(setGeoJSON.key, { json: geojson1, key: key + 2 });
- busEmit(setLayerVisible.key, { layername: key + 2, isCheck: true });
- }
-
- function outletRouteMethod(properties) {
- const _keys = ["排口流向", "排口流向1", "rainwater_pipeline_quality1"];
- let kk = _.replace(_keys[2], /\d+/g, "");
- let routes = turf.featureCollection(
- outlet_route.features.filter((i) =>
- (i.properties.outlet_id || "").split(",").includes(properties.id)
- )
- );
- let polygon = turf.bboxPolygon(turf.bbox(routes));
- // let polygon = turf.flatten(Terraformer.WKT.parse(properties.geometry)).features[0];
- let sites = turf.featureCollection(
- newfiberMap.map
- .getSource("point")
- ._data.features.filter(
- (i) => i.properties.type.includes(kk) && i.properties.connectType == "city"
- )
- .filter((i) => turf.booleanPointInPolygon(i, polygon))
- .map((i) => ({ ...i, properties: { ...i.properties, type: undefined } }))
- );
- // debugger;
- 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] });
- _keys.forEach((k) => busEmit(setLayerVisible.key, { layername: k, isCheck: true }));
- }
-
- 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 wsRouteToMapByName(properties) {
- const { setLayerVisible, setHighlight, setGeoJSON, removeMapDatas } = events_params;
- const _keys_ = ["污水系统流向1", "污水系统流向", "1_泵站", "1_污水处理厂", "sewage_pipeline_quality1", "sewage_pump_station_info1", "storage_tank_info1"];
- _keys_.forEach((k) => busEmit(setLayerVisible.key, { layername: k, isCheck: true }));
- busEmit(removeMapDatas.key, _keys_);
- if(!properties) properties = newfiberMap.map.getSource("hb_wh_dhgx_psfq_geometrys")._data.features.filter(i => i.properties.p_type == 'WS1').map(i => i.properties);
- let geojson = turf.featureCollection([]);
- properties.forEach(p => {
- let features = _.cloneDeep(ws_routeGeoJSON.features.filter((i) => i.properties.bind.split(",").includes(p.name)));
- geojson.features = geojson.features.concat(features.map((i) => Object.assign(i, {properties: {...i.properties, name: i.properties.name, type: i.properties._type || "污水系统流向1", color: "rgb(255,74,25)", width: [0, 7, 5, 3][p.level]},})));
- busEmit(setGeoJSON.key, { json: geojson, key: _keys_[0] });
- })
- newfiberMap.getLayers().filter((i) => i.newfiberId == _keys_[1])[0].setData(geojson);
- if(properties.length != 1) return;
- let [features_point, features_point1, features_point2] = [[], [], []];
- let polygon = turf.flatten(Terraformer.WKT.parse(properties[0].geometry)).features[0];
- if (["2", "3"].includes(properties[0].level)) {
- let kk = _.replace(_keys_[4], /\d+/g, "");
- features_point = _.cloneDeep(newfiberMap.map.getSource("point")._data.features.filter((i) => i.properties.type.includes(kk)).filter((o) => turf.booleanPointInPolygon(o, polygon)));
- features_point1 = _.cloneDeep(newfiberMap.map.getSource("point")._data.features.filter((i) => _keys_[5].includes(i.properties.type)).filter((o) => turf.booleanPointInPolygon(o, polygon)));
- }
- features_point2 = _.cloneDeep(newfiberMap.map.getSource("point")._data.features.filter((i) => _keys_[6].includes(i.properties.type)).filter((o) => turf.booleanPointInPolygon(o, polygon)));
- let geojson1 = turf.featureCollection([
- ...features_point.map((i) => ({...i, properties: { ...i.properties, type: _keys_[4] },})),
- ...features_point1.map((i) => ({...i, properties: { ...i.properties, type: _keys_[5] },})),
- ...features_point2.map((i) => ({...i, properties: { ...i.properties, type: _keys_[6] },}))
- ].flat().filter(Boolean)
- );
- busEmit(setGeoJSON.key, { json: geojson1, key: _keys_[4] });
- }
- function clearRouteMethod() {
- const { removeMapDatas } = events_params;
- const _keys = [
- "污水系统流向1",
- "污水系统流向",
- "1_泵站",
- "1_污水处理厂",
- "排口流向",
- "排口流向1",
- "rainwater_pipeline_quality1",
- "sewage_pump_station_info1",
- "storage_tank_info1",
- "outlet_info1",
- ];
- busEmit(removeMapDatas.key, [
- _keys[2],
- _keys[0],
- _keys[4],
- _keys[6],
- _keys[8],
- _keys[9],
- ]);
- newfiberMap
- .getLayers()
- .filter((i) => [_keys[1], _keys[5]].includes(i.newfiberId))
- .forEach((i) => i.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);
-
- bus.emit(mapInitBusName);
- };
-
- 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, _image: (item.warnList || [])[0] })), (v) => v.pointType + (v.connectType ? "_" + v.connectType : "")+(v.name.includes('停用')?"_stop":"")),
- others: {
- outlet_info: {
- method: (data) =>
- data.map((i) => ({
- ...i,
- type: `${i.pointType}_${i.waterBodyType}_${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",
- "outlet_info2",
- "temporary",
- "highlight_linestring",
- "highlight_polygon",
- "highlight_point",
- "clickPoint",
- "sewage_pipeline_quality1",
- "rainwater_pipeline_quality_area1",
- "sewage_pump_station_info1",
- ];
- 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,
- refinementStrategy: "best-available",
- opacity: 1, // 支持鼠标拾取
- extruded: true, // 设置3D功能
- 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 },
- wsRouteToMapByName: { key: "wsRouteToMapByName", method: wsRouteToMapByName },
- 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>