Newer
Older
DH_Apicture / src / components / Map / MapBox.vue
@wudi wudi 17 days ago 38 KB 1
  1. <template>
  2. <MapBox
  3. :initJson="props.initJson"
  4. :loadCallback="getModalData"
  5. @map-click="mapClickEvt"
  6. v-show="MapShow"
  7. >
  8. </MapBox>
  9.  
  10. <PopupInfo>
  11. {{ item?.aaa }}
  12. </PopupInfo>
  13. <!-- <div id="trajectory-popup" ref="trajectory">1111</div> -->
  14. <!-- <div style="width: 700px; height: 350px" ref="streetSpace1" id="streetSpace1">
  15. <streetSpace :location="datas.location"></streetSpace>
  16. </div> -->
  17. </template>
  18.  
  19. <script setup name="Map">
  20. import bus from "@/bus";
  21. import request from "@/utils/request";
  22. import MapBox from "@/components/Map/Map";
  23. import { getBaseListPoint } from "@/api/MonitorAssetsOnMap";
  24. import { supervisionRealinformationList } from "@/api/internetVehicles";
  25. import useUserStore from "@/store/modules/user";
  26. import { reactive, onMounted, onBeforeUnmount, nextTick, defineProps, watch } from "vue";
  27. import streetSpace from "@/components/Map/streetSpace";
  28. import gq_line from "../../../public/static/libs/mapbox/json/gq_line.json";
  29. import ys_flow1 from "../../../public/static/libs/mapbox/json/ys_flow_2.json";
  30. import line from "../../../public/static/libs/mapbox/json/line.json";
  31. import point from "../../../public/static/libs/mapbox/json/point.json";
  32.  
  33. import outlet_route from "../../../public/static/libs/mapbox/json/outlet_route.json";
  34. import outlet_site from "../../../public/static/libs/mapbox/json/outlet_site.json";
  35.  
  36. import ws_routeGeoJSON from "../../../public/static/libs/mapbox/json/ws_flow.json";
  37. // import ws_pointGeoJSON from "../../../public/static/libs/mapbox/json/ws_point.json";
  38.  
  39. import PopupInfo from "@/components/Map/popup.vue";
  40. import { MapboxOverlay } from "@deck.gl/mapbox";
  41. import { LineLayer, GeoJsonLayer } from "@deck.gl/layers";
  42. import { TripsLayer, Tile3DLayer } from "@deck.gl/geo-layers";
  43. import { Tiles3DLoader } from "@loaders.gl/3d-tiles";
  44. const appStore = useUserStore();
  45. const MapShow = ref(true);
  46. const props = defineProps({
  47. // 数据id
  48. initJson: {
  49. type: String,
  50. default: () => "/static/libs/mapbox/style/wh_dhgx.json",
  51. },
  52. loadCallback: {
  53. type: Function,
  54. default: () => function () {},
  55. },
  56. });
  57. const datas = reactive({
  58. location: [],
  59. isOpenPanorama: false,
  60. });
  61. const { proxy } = getCurrentInstance();
  62. const refreshTimer = ref(null);
  63. const default_params = {
  64. point: {
  65. key: "point",
  66. prevId: null,
  67. children: {
  68. outlet_info2: {
  69. key: "outlet_info2",
  70. },
  71. },
  72. },
  73. sx_wn_hm_monitoring: {
  74. key: "sx_wn_hm_monitoring",
  75. prevId: null,
  76. },
  77. town: {
  78. key: "乡镇",
  79. c_key: "村",
  80. prevId: null,
  81. },
  82. hupo: {
  83. key: "湖泊",
  84. prevId: null,
  85. },
  86. gangqu: {
  87. key: "港渠",
  88. prevId: null,
  89. },
  90. psfq: {
  91. key: "排水分区",
  92. text_key: "排水分区_text",
  93. prevIds: [],
  94. children: {
  95. WS: { key: "污水分区" },
  96. YS: { key: "雨水分区" },
  97. },
  98. },
  99. hb_wh_dhgx_merge: {
  100. key: "hb_wh_dhgx_merge",
  101. children: {
  102. psfq: { key: "排水分区" },
  103. },
  104. prevId: null,
  105. },
  106. 海绵型水系: { color: "rgba(35,184,153,1)" },
  107. 海绵建筑与社区: { color: "rgba(255,119,125,1)" },
  108. 海绵型道路广场: { color: "rgba(255,152,4,1)" },
  109. 管网及泵站: { color: "rgba(0,153,68,1)" },
  110. 海绵型公园绿地: { color: "rgba(223,214,20,1)" },
  111. flow: { color: "rgba(255,255,255,1)" },
  112. rain: { color: "rgba(255,255,255,1)" },
  113.  
  114. water_level: { color: "rgba(255,255,255,1)" },
  115. waterlogging: { color: "rgba(255,255,255,1)" },
  116.  
  117. rain_bz: { color: "rgba(255,255,255,1)" },
  118. sxt: { color: "rgba(255,255,255,1)" },
  119. WSCLC: { color: "rgba(255,255,255,1)" },
  120. overflow_outfall: { color: "rgba(255,255,255,1)" },
  121.  
  122. rainfall: { color: "rgba(223,214,20,1)" },
  123. pipeline: { color: "rgba(223,214,20,1)" },
  124. drain_outlet: { color: "rgba(223,214,20,1)" },
  125. };
  126. window.mapInitBusName = "mapInitBusName";
  127. const mapClickEvt = (lngLat, properties, layerId) => {
  128. datas.isOpenPanorama &&
  129. (() => {
  130. setPopupDom("proxy.$refs.streetSpace1", 2);
  131. newfiberMap.popup1.setLngLat(lngLat).addTo(newfiberMap.map);
  132. datas.location = lngLat;
  133. })();
  134.  
  135. const _keys = [
  136. "rain_water_pump_station_info1",
  137. "",
  138. "rainwater_pipeline_quality_area1",
  139. "clickPoint",
  140. "temporary",
  141. ];
  142.  
  143. console.log("properties", properties, layerId);
  144. // 图层点击事件
  145. if (properties) {
  146. if (properties.type == _keys[4]) properties.type = properties.pointType;
  147. bus.emit("FenQuClick", { properties, layerId: layerId.split("_")[0] });
  148. }
  149. clearTrajectory();
  150. // clearTemporaryData();
  151. proxy.$emit("map-click1", lngLat, properties, layerId);
  152. const { town, hupo, gangqu, hb_wh_dhgx_merge, psfq, point } = default_params;
  153. const { setLayerVisible, setHighlight, setGeoJSON, removeMapDatas } = events_params;
  154.  
  155. (() => {
  156. setHighlight_(properties);
  157. // ysFlow();
  158. newfiberMap
  159. .getLayers()
  160. .filter((i) => i.newfiberId == "村域边界")[0]
  161. .setData(turf.featureCollection([]));
  162. busEmit(
  163. removeMapDatas.key,
  164. _keys.filter((i) => i != (properties || {}).type)
  165. );
  166.  
  167. if (town.prevId) {
  168. busEmit(setLayerVisible.key, { layername: town.key, isCheck: true });
  169. busEmit(setLayerVisible.key, { layername: town.prevId, isCheck: false });
  170. town.prevId = null;
  171. }
  172.  
  173. // clearRouteMethod();
  174. /* if (psfq.prevIds.length && !([psfq.key,point.key].includes(layerId))) {
  175. districtMask();
  176. const isOne = psfq.prevIds.length == 1?1:2
  177. let properties = psfq.prevIds[psfq.prevIds.length -1];
  178. areaToMap(properties);
  179. psfq.prevIds =_.dropRight(psfq.prevIds);
  180. clearRouteMethod();
  181. ys_flow(properties,false);
  182. showOutletInfo(properties);
  183. }*/
  184. })();
  185. ((
  186. {
  187. [point.key]: () => {
  188. const { outlet_info2 } = point.children;
  189. let kk = _.replace(outlet_info2.key, /\d+/g, "");
  190. if (properties.type.includes(kk)) {
  191. clearRouteMethod();
  192. outletRouteMethod(properties);
  193. }
  194. },
  195. [psfq.key]: () => {
  196. [
  197. "污水系统流向1",
  198. "雨水系统流向",
  199. "雨水系统流向1",
  200. "污水系统流向1",
  201. "污水系统流向",
  202. ].forEach((k) => busEmit(setLayerVisible.key, { layername: k, isCheck: false }));
  203. properties.type == "YS" &&
  204. [
  205. "排口流向",
  206. "排口流向1",
  207. "rainwater_pipeline_quality1",
  208. _keys[2],
  209. ].forEach((k) => busEmit(setLayerVisible.key, { layername: k, isCheck: true }));
  210. areaToMap(properties);
  211. },
  212. [psfq.text_key]: () => {
  213. [
  214. "污水系统流向1",
  215. "雨水系统流向",
  216. "雨水系统流向1",
  217. "污水系统流向1",
  218. "污水系统流向",
  219. ].forEach((k) => busEmit(setLayerVisible.key, { layername: k, isCheck: false }));
  220. properties.type == "YS" &&
  221. [
  222. "排口流向",
  223. "排口流向1",
  224. "rainwater_pipeline_quality1",
  225. _keys[2],
  226. ].forEach((k) => busEmit(setLayerVisible.key, { layername: k, isCheck: true }));
  227. areaToMap({
  228. ...properties,
  229. geometry: Terraformer.WKT.convert(JSON.parse(properties.geometrys)),
  230. });
  231. },
  232. [town.key]: () => {
  233. newfiberMap
  234. .getLayers()
  235. .filter((i) => i.newfiberId == "村域边界")[0]
  236. .setData(
  237. turf.featureCollection(
  238. newfiberMap.map
  239. .getSource("hb_wh_gxq_cun2")
  240. ._data.features.filter((i) => i.properties.type == properties.name)
  241. )
  242. );
  243. busEmit(setLayerVisible.key, { layername: town.key, isCheck: false });
  244. busEmit(setLayerVisible.key, { layername: properties.name, isCheck: true });
  245. town.prevId = properties.name;
  246. },
  247. [hupo.key]: () => {
  248. if (hupo.prevId) {
  249. busEmit(setLayerVisible.key, {
  250. layername: hupo.prevId,
  251. isCheck: false,
  252. values: [hupo.prevId, ["严东湖", "严西湖"].join(",")],
  253. });
  254. hupo.prevId = null;
  255. bus.emit("removeMapDatas", ["outlet_info1"]);
  256. }
  257. const keys = ["outlet_info", "村域边界", "lake"];
  258. const specialKeys = ["严东湖", "严西湖"];
  259. newfiberMap
  260. .getLayers()
  261. .filter((i) => i.newfiberId == keys[1])[0]
  262. .setData(
  263. turf.featureCollection(
  264. gq_line.features.filter((i) => i.properties.w_id == properties.name)
  265. )
  266. );
  267. let features = newfiberMap.map
  268. .getSource("point")
  269. ._data.features.filter(
  270. (i) =>
  271. i.properties.type == keys[0] &&
  272. i.properties.waterBodyType == keys[2] &&
  273. i.properties.waterBodyId == properties.pid
  274. )
  275. .map((i) => _.cloneDeep(i));
  276. features.forEach((i) => (i.properties.type = i.properties.type + "1"));
  277. busEmit(events_params.setGeoJSON.key, {
  278. json: turf.featureCollection(features),
  279. key: keys[0] + 1,
  280. });
  281. const values = [
  282. specialKeys.includes(properties.name) ? specialKeys.join(",") : properties.name,
  283. ];
  284. busEmit(setLayerVisible.key, {
  285. layername: properties.name,
  286. isCheck: true,
  287. values,
  288. });
  289. hupo.prevId = properties.name;
  290. },
  291. [gangqu.key]: () => {
  292. if (gangqu.prevId) {
  293. gangqu.prevId = null;
  294. bus.emit("removeMapDatas", ["outlet_info1"]);
  295. }
  296. const keys = ["outlet_info", "村域边界", "channel"];
  297. newfiberMap
  298. .getLayers()
  299. .filter((i) => i.newfiberId == keys[1])[0]
  300. .setData(
  301. turf.featureCollection(
  302. gq_line.features.filter((i) => i.properties.name == properties.name)
  303. )
  304. );
  305. let features = newfiberMap.map
  306. .getSource("point")
  307. ._data.features.filter(
  308. (i) =>
  309. i.properties.type == keys[0] &&
  310. i.properties.waterBodyType == keys[2] &&
  311. i.properties.waterBodyId == properties.pid
  312. )
  313. .map((i) => _.cloneDeep(i));
  314. features.forEach((i) => (i.properties.type = i.properties.type + "1"));
  315. busEmit(events_params.setGeoJSON.key, {
  316. json: turf.featureCollection(features),
  317. key: keys[0] + 1,
  318. });
  319. gangqu.prevId = properties.name;
  320. },
  321. [hb_wh_dhgx_merge.key]: () => {
  322. if (properties.layer == hb_wh_dhgx_merge.children.psfq.key) {
  323. const layerSplit = properties.c_layer.split("_");
  324. let geometry = Terraformer.WKT.parse(properties.geometry);
  325.  
  326. busEmit(setHighlight.key, []);
  327. const type = _.chunk(layerSplit[1], 2)[0].join("");
  328. let pType = type == "雨水" ? "YS" : "WS";
  329. pType == "YS" ? ys_flow(properties, true) : ws_flow(properties);
  330. districtMask(properties);
  331. if (layerSplit[2] != 3) return mapCenterByData(turf.bbox(geometry));
  332. /* 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);
  333. let pFeatures = newfiberMap.map.getSource("point")._data.features.filter((i) => _keys.includes(i.properties.type) && (i.properties.pointTypeName || "").includes(type));
  334. let p_features = turf.pointsWithinPolygon(turf.featureCollection(pFeatures), geometry);
  335. p_features.features.forEach((i) => (i.properties.type = i.properties.type + 1));
  336. busEmit(setGeoJSON.key, { json: p_features });
  337. console.log("features", p_features, pFeatures);
  338. busEmit(setHighlight.key, turf.flatten(turf.featureCollection(features)).features);*/
  339. }
  340. },
  341. }[layerId] ||
  342. function () {
  343. //newfiberMap.map.easeTo(newfiberMap.config_.params.init);
  344. }
  345. )());
  346.  
  347. function areaToMap(properties) {
  348. let isYS = properties.type == "YS";
  349. clearRouteMethod();
  350. districtMask(properties);
  351. ({
  352. 1: () => {
  353. !layerId && newfiberMap.map.easeTo(newfiberMap.config_.params.init);
  354. [() => wsRouteToMapByName([properties]), () => showOutletInfo(properties)][
  355. Number(isYS)
  356. ]();
  357. },
  358. 2: () => {
  359. [() => wsRouteToMapByName([properties]), () => showOutletInfo(properties)][
  360. Number(isYS)
  361. ]();
  362. },
  363. 3: () => {
  364. [
  365. () => {
  366. wsRouteToMapByName([properties]);
  367. },
  368. () => {
  369. const _keys_ = [
  370. "rainwater_pipeline_quality_area1",
  371. "rainwater_pipeline_quality1",
  372. ];
  373. let kk = _.replace(_keys_[1], /\d+/g, "");
  374. ys_flow(
  375. {
  376. ...properties,
  377. c_layer: `排水分区_${properties.type}_${properties.level}`,
  378. },
  379. true
  380. );
  381. let p_feature = turf.flatten(
  382. turf.feature(Terraformer.WKT.parse(properties.geometry))
  383. ).features[0];
  384. let features = newfiberMap.map
  385. .getSource("point")
  386. ._data.features.filter((i) => i.properties.type.includes(kk))
  387. .filter((o) => turf.booleanPointInPolygon(o, p_feature));
  388. features = features.map((i) =>
  389. Object.assign(_.cloneDeep(i), {
  390. properties: {
  391. ...i.properties,
  392. type: i.properties.type.includes(_keys_[0]) ? _keys_[0] : _keys_[1],
  393. },
  394. })
  395. );
  396. // debugger;
  397. busEmit(setGeoJSON.key, {
  398. json: turf.featureCollection(features),
  399. key: _keys_[0],
  400. });
  401. },
  402. ][Number(isYS)]();
  403. },
  404. 4: () => {},
  405. }[properties.level]());
  406.  
  407. let [closeLayer, openLayer] = layerId
  408. ? [properties.type + properties.p_name, properties.type + properties.name]
  409. : [properties.type + properties.name, properties.p_type];
  410. busEmit(setLayerVisible.key, {
  411. layername: psfq.children[properties.type].key,
  412. isCheck: false,
  413. values: Array.from(
  414. new Set(
  415. newfiberMap.map
  416. .getSource("hb_wh_dhgx_psfq_geometrys")
  417. ._data.features.map((i) => i.properties.p_type)
  418. )
  419. ),
  420. });
  421. busEmit(setLayerVisible.key, {
  422. layername: psfq.children[properties.type].key,
  423. isCheck: true,
  424. values: [openLayer],
  425. });
  426. if (layerId && psfq.prevIds.filter((i) => i.id == properties.id).length == 0)
  427. psfq.prevIds.push(properties);
  428. }
  429.  
  430.  
  431.  
  432. function showOutletInfo(properties) {
  433. const key = "outlet_info";
  434. busEmit(removeMapDatas.key, [key + 2]);
  435. let polygon = turf.flatten(Terraformer.WKT.parse(properties.geometry)).features[0];
  436. let features = _.cloneDeep(
  437. newfiberMap.map
  438. .getSource("point")
  439. ._data.features.filter((i) => i.properties.type.includes(key))
  440. .filter((o) => turf.booleanPointInPolygon(o, polygon))
  441. );
  442. let geojson1 = turf.featureCollection(
  443. [...features.map((i) => ({ ...i, properties: { ...i.properties, type: key + 2 } }))]
  444. .flat()
  445. .filter(Boolean)
  446. );
  447. busEmit(setGeoJSON.key, { json: geojson1, key: key + 2 });
  448. busEmit(setLayerVisible.key, { layername: key + 2, isCheck: true });
  449. }
  450.  
  451. function outletRouteMethod(properties) {
  452. const _keys = ["排口流向", "排口流向1", "rainwater_pipeline_quality1"];
  453. let kk = _.replace(_keys[2], /\d+/g, "");
  454. let routes = turf.featureCollection(
  455. outlet_route.features.filter((i) =>
  456. (i.properties.outlet_id || "").split(",").includes(properties.id)
  457. )
  458. );
  459. let polygon = turf.bboxPolygon(turf.bbox(routes));
  460. // let polygon = turf.flatten(Terraformer.WKT.parse(properties.geometry)).features[0];
  461. let sites = turf.featureCollection(
  462. newfiberMap.map
  463. .getSource("point")
  464. ._data.features.filter(
  465. (i) => i.properties.type.includes(kk) && i.properties.connectType == "city"
  466. )
  467. .filter((i) => turf.booleanPointInPolygon(i, polygon))
  468. .map((i) => ({ ...i, properties: { ...i.properties, type: undefined } }))
  469. );
  470. // debugger;
  471. newfiberMap
  472. .getLayers()
  473. .filter((i) => i.newfiberId == _keys[1])[0]
  474. .setData(routes);
  475. busEmit(setGeoJSON.key, { json: routes, key: _keys[0] });
  476. busEmit(setGeoJSON.key, { json: sites, key: _keys[2] });
  477. _keys.forEach((k) => busEmit(setLayerVisible.key, { layername: k, isCheck: true }));
  478. }
  479.  
  480. function districtMask(properties = {}) {
  481. let mb = turf.polygon([
  482. [
  483. [-180, -90],
  484. [180, -90],
  485. [180, 90],
  486. [-180, 90],
  487. [-180, -90],
  488. ],
  489. ]);
  490. let feature = [];
  491. if (properties.geometry) {
  492. let area = turf.feature(Terraformer.WKT.parse(properties.geometry));
  493. feature = [turf.difference(mb, area)];
  494. mapCenterByData(turf.bbox(area));
  495. }
  496. newfiberMap
  497. .getLayers()
  498. .filter((i) => i.newfiberId == "蒙版")[0]
  499. .setData(turf.featureCollection(feature));
  500. }
  501.  
  502. function ys_flow(properties, visible) {
  503. const keys = ["雨水系统流向", "雨水系统流向1"];
  504. if (!visible)
  505. return keys.forEach((key) =>
  506. busEmit(setLayerVisible.key, { layername: key, isCheck: visible })
  507. );
  508. const layerSplit = properties.c_layer.split("_");
  509. const level = layerSplit[2];
  510. let features = ys_flow1.features.filter(
  511. (i) =>
  512. i.properties.level_ == level &&
  513. (level == "1" || i.properties["area_" + level] == properties.name)
  514. );
  515. const p = properties.name.substr(0, 2);
  516. let feature =
  517. level == "3"
  518. ? ys_flow1.features.filter((i) =>
  519. (i.properties.bind || "").includes(properties.name)
  520. )
  521. : ys_flow1.features.filter(
  522. (i) => i.properties.level_ < level && i.properties.area_2.includes(p)
  523. );
  524. ysFlow(turf.featureCollection(features.concat(feature)));
  525. keys.forEach((key) =>
  526. busEmit(setLayerVisible.key, { layername: key, isCheck: visible })
  527. );
  528. setHighlight_(properties);
  529. }
  530.  
  531. function ws_flow(properties) {
  532. const keys_ = ["雨水", "污水"];
  533. const keys = ["1_泵站", "1_污水处理厂", "分区流向", "分区流向1"];
  534. bus.emit("removeMapDatas", keys);
  535. newfiberMap
  536. .getLayers()
  537. .filter((i) => i.newfiberId == keys[3])[0]
  538. .getSource()
  539. .setData(turf.featureCollection([]));
  540. let key = (properties.c_layer || "").includes(keys_[0]) ? keys_[0] : keys_[1];
  541. if (properties.pointTypeName) key = keys_[1];
  542. const nameKey = "龙王咀" || properties.name.substring(0, 2);
  543. let features = line.features.filter((i) => i.properties.area.includes(key));
  544. // let features1 = point.features.filter(i => i.properties.type.includes(key) );
  545. let points = _.groupBy(point.features, (a) => a.properties.type);
  546. features.forEach((i) => {
  547. i.properties.type = keys[2];
  548. i.properties.color = key == keys_[0] ? "rgba(21,127,176,1)" : "rgba(255,0,0,1)";
  549. });
  550. /* Object.keys(points).map((key) =>
  551. bus.emit("setGeoJSON", {
  552. json: turf.featureCollection(
  553. points[key].map((i) => ({
  554. type: i.type,
  555. geometry: i.geometry,
  556. properties: { ...i.properties, type: "1_" + key },
  557. }))
  558. ),
  559. key: "1_" + key,
  560. })
  561. );*/
  562. // bus.emit("setGeoJSON", { json: turf.featureCollection(features), key: keys[2] });
  563. /* newfiberMap
  564. .getLayers()
  565. .filter((i) => i.newfiberId == keys[3])[0]
  566. .getSource()
  567. .setData(turf.featureCollection(features));*/
  568. setHighlight_(properties);
  569. }
  570. };
  571.  
  572. function wsRouteToMapByName(properties) {
  573. const { setLayerVisible, setHighlight, setGeoJSON, removeMapDatas } = events_params;
  574. const _keys_ = ["污水系统流向1", "污水系统流向", "1_泵站", "1_污水处理厂", "sewage_pipeline_quality1", "sewage_pump_station_info1", "storage_tank_info1"];
  575. _keys_.forEach((k) => busEmit(setLayerVisible.key, { layername: k, isCheck: true }));
  576. busEmit(removeMapDatas.key, _keys_);
  577. if(!properties) properties = newfiberMap.map.getSource("hb_wh_dhgx_psfq_geometrys")._data.features.filter(i => i.properties.p_type == 'WS1').map(i => i.properties);
  578. let geojson = turf.featureCollection([]);
  579. properties.forEach(p => {
  580. let features = _.cloneDeep(ws_routeGeoJSON.features.filter((i) => i.properties.bind.split(",").includes(p.name)));
  581. 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]},})));
  582. busEmit(setGeoJSON.key, { json: geojson, key: _keys_[0] });
  583. })
  584. newfiberMap.getLayers().filter((i) => i.newfiberId == _keys_[1])[0].setData(geojson);
  585. if(properties.length != 1) return;
  586. let [features_point, features_point1, features_point2] = [[], [], []];
  587. let polygon = turf.flatten(Terraformer.WKT.parse(properties[0].geometry)).features[0];
  588. if (["2", "3"].includes(properties[0].level)) {
  589. let kk = _.replace(_keys_[4], /\d+/g, "");
  590. features_point = _.cloneDeep(newfiberMap.map.getSource("point")._data.features.filter((i) => i.properties.type.includes(kk)).filter((o) => turf.booleanPointInPolygon(o, polygon)));
  591. features_point1 = _.cloneDeep(newfiberMap.map.getSource("point")._data.features.filter((i) => _keys_[5].includes(i.properties.type)).filter((o) => turf.booleanPointInPolygon(o, polygon)));
  592. }
  593. features_point2 = _.cloneDeep(newfiberMap.map.getSource("point")._data.features.filter((i) => _keys_[6].includes(i.properties.type)).filter((o) => turf.booleanPointInPolygon(o, polygon)));
  594. let geojson1 = turf.featureCollection([
  595. ...features_point.map((i) => ({...i, properties: { ...i.properties, type: _keys_[4] },})),
  596. ...features_point1.map((i) => ({...i, properties: { ...i.properties, type: _keys_[5] },})),
  597. ...features_point2.map((i) => ({...i, properties: { ...i.properties, type: _keys_[6] },}))
  598. ].flat().filter(Boolean)
  599. );
  600. busEmit(setGeoJSON.key, { json: geojson1, key: _keys_[4] });
  601. }
  602. function clearRouteMethod() {
  603. const { removeMapDatas } = events_params;
  604. const _keys = [
  605. "污水系统流向1",
  606. "污水系统流向",
  607. "1_泵站",
  608. "1_污水处理厂",
  609. "排口流向",
  610. "排口流向1",
  611. "rainwater_pipeline_quality1",
  612. "sewage_pump_station_info1",
  613. "storage_tank_info1",
  614. "outlet_info1",
  615. ];
  616. busEmit(removeMapDatas.key, [
  617. _keys[2],
  618. _keys[0],
  619. _keys[4],
  620. _keys[6],
  621. _keys[8],
  622. _keys[9],
  623. ]);
  624. newfiberMap
  625. .getLayers()
  626. .filter((i) => [_keys[1], _keys[5]].includes(i.newfiberId))
  627. .forEach((i) => i.setData(turf.featureCollection([])));
  628. }
  629.  
  630. function setHighlight_(properties = {}) {
  631. const temporary = "temporary";
  632. bus.emit("removeMapDatas", [temporary]);
  633. if (!properties.geometry || properties.geometry.includes("POINT")) return;
  634. let geojson = turf.polygonToLine(Terraformer.WKT.parse(properties.geometry));
  635. geojson = geojson.features ? geojson : turf.featureCollection([geojson]);
  636. geojson.features.forEach(
  637. (i) => (i.properties = { color: "rgba(255,255,0,1)", type: temporary })
  638. );
  639. bus.emit("setGeoJSON", { json: geojson, key: temporary });
  640. /* newfiberMap
  641. .getLayers()
  642. .filter((i) => i.newfiberId == "村域边界")[0]
  643. .setData(geojson);*/
  644. }
  645.  
  646. const getModalData = () => {
  647. isClockInRange();
  648. Object.keys(events_params)
  649. .filter((key) => events_params[key].method)
  650. .forEach((key) => busOn(events_params[key].key, events_params[key].method));
  651. // 获取地图项目数据
  652. dataToMap({});
  653. createPopup();
  654. busEmit(events_params.closeAllLayer.key);
  655. proxy.$emit("loadCallback");
  656. ww();
  657. ysFlow();
  658. newfiberMap.contextMenu = new mapboxgl1.ContextMenu({
  659. items: [
  660. {
  661. text: "街景",
  662. callback: async (point1, feature, layerId) => {
  663. console.log("周边街景经纬度1", point1);
  664. let point = _.cloneDeep(point1);
  665. let clickPoint = turf.point(Object.values(point));
  666. let positionAddress = "";
  667. gcoord.transform(clickPoint, gcoord.WGS84, gcoord.BD09);
  668. let data = await request(
  669. `/bdApi//baiduservice/panorama?fov=180&height=256&width=512&location=${turf
  670. .getCoords(clickPoint)
  671. .join(",")}`
  672. );
  673. data.data.base64 =
  674. data && data.data && "data:image/jpeg;base64," + data.data.base64;
  675. gcoord.transform(clickPoint, gcoord.BD09, gcoord.GCJ02);
  676. const regeodata = await geoRegeo({ lngLat: turf.getCoords(clickPoint) });
  677. positionAddress =
  678. regeodata.info === "OK" && regeodata.regeocode.formatted_address;
  679. gcoord.transform(clickPoint, gcoord.GCJ02, gcoord.WGS84);
  680. busEmit(events_params.setGeoJSON.key, {
  681. json: turf.featureCollection([clickPoint]),
  682. key: "clickPoint",
  683. });
  684. data.stName = positionAddress;
  685. bus.emit("popupcontent", {
  686. popupShow: true,
  687. point: turf.getCoords(clickPoint),
  688. popupInfo: data,
  689. });
  690. console.log("周边街景经纬度2", turf.getCoords(clickPoint));
  691. },
  692. },
  693. ],
  694. });
  695. newfiberMap.contextMenu.addTo(newfiberMap.map);
  696.  
  697. bus.emit(mapInitBusName);
  698. };
  699.  
  700. const ysFlow = (geojson) => {
  701. const key = "雨水系统流向";
  702. const widths = ["", 10, 5, 1];
  703. if (!geojson) {
  704. ys_flow1.features = ys_flow1.features.map((i) => ({
  705. ...i,
  706. properties: {
  707. ...i.properties,
  708. color: "rgba(10,170,249,1)",
  709. width: widths[i.properties.level_],
  710. name: undefined,
  711. },
  712. }));
  713. geojson = turf.featureCollection(
  714. ys_flow1.features.filter((i) => i.properties.level_ == 1)
  715. );
  716. }
  717. bus.emit("removeMapDatas", [key + "1"]);
  718. newfiberMap
  719. .getLayers()
  720. .filter((i) => i.newfiberId == key)[0]
  721. .setData(geojson);
  722. busEmit(events_params.setGeoJSON.key, { json: geojson, key: key + 1 });
  723. };
  724.  
  725. const ww = () => {
  726. const keys = ["尾水路径"];
  727. let features = newfiberMap.map
  728. .getSource("hb_wh_dhgx_merge")
  729. ._data.features.filter(
  730. (i) => i.properties.c_layer.includes(keys[0]) && i.properties.geometry_type == 2
  731. );
  732. busEmit(events_params.setGeoJSON.key, {
  733. json: turf.featureCollection(features),
  734. key: keys[0],
  735. });
  736. };
  737.  
  738. let prevObj = null;
  739. const panelDataToMap = (obj) => {
  740. let isUp = Object.keys(obj).includes("isUp") ? obj.isUp : true; //是否触发地图点击事件 默认触发
  741. // debugger
  742. const { setLayerVisible, setHighlight } = events_params;
  743. // if (prevObj != null) busEmit(setLayerVisible.key, { layername: prevObj.type, isCheck: false });
  744. busEmit(setHighlight.key, []);
  745. // busEmit(setLayerVisible.key, { layername: obj.type, isCheck: true });
  746. // debugger;
  747. let features = [
  748. "point",
  749. "linestring",
  750. "polygon",
  751. "hb_wh_dhgx_psfq_geometrys",
  752. "hb_wh_dhgx_merge",
  753. ]
  754. .map((key) =>
  755. newfiberMap.map
  756. .getSource(key)
  757. ._options.data.features.filter(
  758. (i) =>
  759. (i.properties.name || "").includes(obj.name) ||
  760. (obj.id ? obj.id == i.properties.pid : true)
  761. )
  762. )
  763. .flat();
  764. let feature =
  765. features.filter((i) => i.properties.p_type)[0] ||
  766. features.filter((i) => i.properties.name == obj.name)[0] ||
  767. features[_.random(0, features.length - 1)];
  768. console.log("feature.properties.p_type&&isUp", feature.properties.p_type && isUp);
  769. if (feature.properties.p_type && isUp)
  770. return mapClickEvt(undefined, feature.properties, "排水分区");
  771. if (!feature) return;
  772. busEmit(setHighlight.key, [feature]);
  773. mapCenterByData(turf.bbox(feature));
  774. };
  775.  
  776. const mapCenterByData = (bbox) => {
  777. newfiberMap.map.fitBounds(
  778. [
  779. [bbox[0], bbox[1]],
  780. [bbox[2], bbox[3]],
  781. ],
  782. { padding: 50, offset: [100, 10], maxZoom: 18, pitch: 0, duration: 500 }
  783. );
  784. };
  785. const trajectoryToMap = (data) => {
  786. clearTrajectory();
  787. const fields = { lng: "l", lat: "a" };
  788. mapCenterByData([data[0]["l"], data[0]["a"], data[1]["l"], data[1]["a"]].map(Number));
  789. newfiberMap.map.trackLayer = new mapboxgl1.TrackLayer(
  790. newfiberMap.map,
  791. data,
  792. fields,
  793. (properties, index) => {
  794. const lng = properties[fields.lng];
  795. const lat = properties[fields.lat];
  796. if (!(index % 50)) {
  797. newfiberMap.map.flyTo({
  798. center: [lng, lat],
  799. bearing: newfiberMap.map.getBearing(),
  800. pitch: newfiberMap.map.getPitch(),
  801. zoom: newfiberMap.map.getZoom(),
  802. });
  803. }
  804. /* setPopupDom('proxy.$refs.trajectory', 1);
  805. newfiberMap.popup.setLngLat([lng,lat]).addTo(newfiberMap.map);*/
  806. }
  807. );
  808. };
  809.  
  810. const clearTrajectory = () => {
  811. if (newfiberMap.map.trackLayer) newfiberMap.map.trackLayer.destory();
  812. if (newfiberMap.popup) newfiberMap.popup.remove();
  813. };
  814.  
  815. const dataToMap = async ({ params, callback }) => {
  816. const { setLayerVisible, beansToMap } = events_params;
  817. const data_default_params = {
  818. sites: {
  819. method: getBaseListPoint,
  820. fields: { geometry: "geometry", name: "name" },
  821. groupMethod: (data) =>
  822. _.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":"")),
  823. others: {
  824. outlet_info: {
  825. method: (data) =>
  826. data.map((i) => ({
  827. ...i,
  828. type: `${i.pointType}_${i.waterBodyType}_${i.waterBodyId}`,
  829. })),
  830. },
  831. },
  832. },
  833. //车辆
  834. cheliang: {
  835. method: supervisionRealinformationList,
  836. fields: { lng: "longitude", lat: "latitude", name: "plateNumber" },
  837. groupMethod: (data) => _.groupBy(data.supervisionRealinformationList.filter((i) => i.longitude && i.latitude).map((item) => ({ ...item, type: item.vehicleCategory + item.status })), (v) => v.type),
  838. },
  839. };
  840. const other_data_params = {};
  841. let keys = Object.keys(params || data_default_params);
  842. const results = await Promise.all(
  843. keys.map((k, idx) =>
  844. data_default_params[k].method((params || {})[k] || data_default_params[k].mPrams)
  845. )
  846. );
  847. results.forEach((result, idx) => {
  848. const data = result.data;
  849. const k = keys[idx];
  850. if (!data) return;
  851. if (k == keys[0]) appStore.SET_MapData(filterGeometryNotEmpty(data));
  852. bus.emit("changeData");
  853. const groups = data_default_params[k].groupMethod(data);
  854. const g_keys = Object.keys(groups);
  855. bus.emit("removeMapDatas", g_keys);
  856. if (k == keys[0]) {
  857. appStore.SET_MapData(filterGeometryNotEmpty(data));
  858. appStore.SET_MapData_COUNT(
  859. _.assign({}, ...g_keys.map((a) => ({ [a]: groups[a].length })))
  860. );
  861. }
  862. g_keys.forEach((key) => {
  863. busEmit(beansToMap.key, {
  864. beans: groups[key].map((i) => ({
  865. ...i,
  866. color: (default_params[key] || {}).color,
  867. })),
  868. fields: data_default_params[k].fields,
  869. type: key,
  870. });
  871. const other = (data_default_params[k].others || {})[key];
  872. other &&
  873. busEmit(beansToMap.key, {
  874. beans: other.method(groups[key]),
  875. fields: data_default_params[k].fields,
  876. type: key,
  877. });
  878. });
  879. });
  880.  
  881. callback && callback();
  882. };
  883.  
  884. const createPopup = () => {
  885. newfiberMap.popup = new mapboxgl1.Popup({
  886. closeButton: false,
  887. closeOnClick: false,
  888. });
  889. newfiberMap.popup1 = new mapboxgl1.Popup({
  890. closeButton: false,
  891. closeOnClick: false,
  892. });
  893. };
  894.  
  895. const setPopupDom = (dom, offset) => {
  896. f();
  897. nextTick(f);
  898. function f() {
  899. console.log("eval(dom)", eval(dom));
  900. newfiberMap.popup1.setDOMContent(eval(dom));
  901. newfiberMap.popup1.setOffset(offset);
  902. }
  903. };
  904.  
  905. function filterGeometryNotEmpty(inputData) {
  906. return inputData.map((item) => {
  907. // 过滤掉每个对象中的 data 数组里 geometry 为空的元素
  908. const filteredData = item.data.filter((dataPoint) => dataPoint.geometry !== "");
  909. return {
  910. ...item,
  911. data: filteredData,
  912. };
  913. });
  914. }
  915.  
  916. //路径规划
  917. const pathPlanning = async (
  918. origin = "116.481028,39.989643",
  919. destination = "116.465302,40.004717",
  920. callback
  921. ) => {
  922. const origin_ = origin.split(",").map(Number);
  923. const destination_ = destination.split(",").map(Number);
  924. if (origin_.length != 2 || destination_.length != 2)
  925. return console.log("输入参数错误:", origin, destination);
  926. const results = await request(
  927. `/amap/v3/direction/driving?origin=${origin}&destination=${destination}&extensions=all&output=json&key=f627fbb24176be73142eb0b5088d8683`
  928. );
  929. if (!results.route.paths[0]) return console.log("暂无路径!");
  930. callback &&
  931. callback(
  932. turf.featureCollection(
  933. results.route.paths[0].steps.map((i) =>
  934. turf.feature(
  935. Terraformer.WKT.parse(
  936. `LINESTRING(${i.polyline
  937. .split(";")
  938. .map((i) => i.split(",").join(" "))
  939. .join(",")})`
  940. ),
  941. i
  942. )
  943. )
  944. )
  945. );
  946. };
  947.  
  948. //地理/逆地理编码
  949. const geoRegeo = async ({ name, lngLat, callback }) => {
  950. let flag,
  951. params = null;
  952. if (name) (flag = "geo"), (params = `address=${name}`);
  953. if (lngLat) (flag = "regeo"), (params = `location=${lngLat.join(",")}`);
  954. if (!(flag || params)) console.log("name,lngLat is null!");
  955. const results = await request(
  956. `/amap/v3/geocode/${flag}?${params}&extensions=all&output=json&key=f627fbb24176be73142eb0b5088d8683&city=420111`
  957. );
  958. console.log("geoRegeo results", results);
  959. callback && callback(results);
  960. return results;
  961. };
  962.  
  963. //判断是否在打卡点内
  964. const isClockInRange = (
  965. currentLocation = "POINT(109.41360117253636 34.49038724464877)",
  966. ranges = [
  967. "POINT(109.43167853335872 34.51345940211415)",
  968. "POINT(109.46797592891363 34.51145239795833)",
  969. "POINT(109.44903576574815 34.50165755773118)",
  970. ],
  971. rVal = 500
  972. ) => {
  973. const feature = { ...Terraformer.WKT.parse(currentLocation) };
  974. return (
  975. ranges
  976. .map((i) => turf.buffer({ ...Terraformer.WKT.parse(i) }, rVal / 1000))
  977. .map((i) => turf.booleanContains(i, feature))
  978. .filter(Boolean)[0] || false
  979. );
  980. };
  981.  
  982. const clearTemporaryData = () => {
  983. const { setLayerVisible, removeMapDatas } = events_params;
  984. const keys_ = [
  985. "问题管线",
  986. "1_泵站",
  987. "1_污水处理厂",
  988. "1_调蓄池",
  989. "分区流向",
  990. "分区流向1",
  991. "rainwater_pipeline_water_level",
  992. "rainwater_pipeline_water_level_GWGSWYX",
  993. "outlet_info1",
  994. "outlet_info2",
  995. "temporary",
  996. "highlight_linestring",
  997. "highlight_polygon",
  998. "highlight_point",
  999. "clickPoint",
  1000. "sewage_pipeline_quality1",
  1001. "rainwater_pipeline_quality_area1",
  1002. "sewage_pump_station_info1",
  1003. ];
  1004. clearRouteMethod();
  1005. const hideKeys = ["污水系统流向", "雨水系统流向", "雨水系统流向1", "排水分区_close"];
  1006. bus.emit(removeMapDatas.key, keys_);
  1007. const keys = newfiberMap.config_.l7.filter((i) => i.temporary).map((i) => i.key);
  1008. newfiberMap
  1009. .getLayers()
  1010. .filter((i) => keys.includes(i.newfiberId))
  1011. .forEach((i) => i.setData({ type: "FeatureCollection", features: [] }));
  1012. hideKeys.forEach((i) => busEmit(setLayerVisible.key, { layername: i, isCheck: false }));
  1013.  
  1014. setHighlight_();
  1015. };
  1016.  
  1017. const remove3Dtiles = () => {
  1018. newfiberMap.map._controls;
  1019. newfiberMap.map._controls
  1020. .filter((i) => i._deck)
  1021. .forEach((i) => i.setProps({ layers: [] }));
  1022. };
  1023.  
  1024. const load3DTiles = ({ id, url }) => {
  1025. remove3Dtiles();
  1026. let deckOverlay = null;
  1027. deckOverlay = newfiberMap.map._controls.filter((i) => i._deck)[0];
  1028. if (!deckOverlay) {
  1029. deckOverlay = new MapboxOverlay({
  1030. interleaved: true,
  1031. layers: [],
  1032. });
  1033. newfiberMap.map.addControl(deckOverlay);
  1034. }
  1035. const layers = deckOverlay._props.layers;
  1036. deckOverlay.setProps({
  1037. layers: [
  1038. ...layers,
  1039. new Tile3DLayer({
  1040. id: id,
  1041. name: id,
  1042. data: url,
  1043. loader: Tiles3DLoader,
  1044. refinementStrategy: "best-available",
  1045. opacity: 1, // 支持鼠标拾取
  1046. extruded: true, // 设置3D功能
  1047. loadOptions: {
  1048. "3d-tiles": {
  1049. loadGLTF: true,
  1050. decodeQuantizedPositions: false,
  1051. isTileset: "auto",
  1052. assetGltfUpAxis: null,
  1053. },
  1054. },
  1055. pickable: true, // 设置可选取
  1056. onTilesetLoad: (tileset) => {
  1057. const { cartographicCenter, zoom } = tileset;
  1058. deckOverlay.setProps({
  1059. initialViewState: {
  1060. longitude: cartographicCenter[0],
  1061. latitude: cartographicCenter[1],
  1062. zoom,
  1063. },
  1064. });
  1065. },
  1066. pointSize: 2,
  1067. }),
  1068. ],
  1069. });
  1070. };
  1071.  
  1072. const busEmit = (event, params) => bus.emit(event, params);
  1073.  
  1074. const busOn = (event, func) => bus.on(event, func);
  1075.  
  1076. const busOff = (event) => bus.off(event);
  1077. //添加临时动态线
  1078. const addDynamicLine = (c_layer, c_layer1) => {
  1079. if (newfiberMap.getLayerByName("dynamicLine")) {
  1080. newfiberMap.removeLayer(newfiberMap.getLayerByName("dynamicLine"));
  1081. }
  1082. let dynamicLineJson = turf.featureCollection(
  1083. newfiberMap.map
  1084. .getSource("sx_wn_hm_merge")
  1085. ._data.features.filter(
  1086. (feature) =>
  1087. feature.properties.c_layer.includes(c_layer) &&
  1088. feature.properties.c_layer.includes(c_layer1)
  1089. )
  1090. );
  1091. console.log(c_layer, dynamicLineJson);
  1092. let layer = new mapboxL7.LineLayer({
  1093. name: "dynamicLine",
  1094. })
  1095. .source(dynamicLineJson)
  1096. .size(3)
  1097. .shape("line")
  1098. .color("color")
  1099. .animate({
  1100. interval: 1,
  1101. duration: 2,
  1102. trailLength: 0.8,
  1103. });
  1104. newfiberMap.addLayer(layer);
  1105. };
  1106. const events_params = {
  1107. removeMapDatas: { key: "removeMapDatas" },
  1108. setGeoJSON: { key: "setGeoJSON" },
  1109. setLayerVisible: { key: "setLayerVisible" },
  1110. beansToMap: { key: "beansToMap" },
  1111. closeAllLayer: { key: "closeAllLayer" },
  1112. setHighlight: { key: "setHighlight" },
  1113. geoRegeo: { key: "geoRegeo", method: geoRegeo },
  1114. dataToMap: { key: "dataToMap", method: dataToMap },
  1115. pathPlanning: { key: "pathPlanning", method: pathPlanning },
  1116. panelDataToMap: { key: "panelDataToMap", method: panelDataToMap },
  1117. trajectoryToMap: { key: "trajectoryToMap", method: trajectoryToMap },
  1118. clearTrajectory: { key: "clearTrajectory", method: clearTrajectory },
  1119. clearTemporaryData: { key: "clearTemporaryData", method: clearTemporaryData },
  1120. wsRouteToMapByName: { key: "wsRouteToMapByName", method: wsRouteToMapByName },
  1121. load3DTiles: { key: "load3DTiles", method: load3DTiles },
  1122. remove3Dtiles: { key: "remove3Dtiles", method: remove3Dtiles },
  1123. isOpenPanorama: {
  1124. key: "isOpenPanorama",
  1125. method: (flag) => (datas.isOpenPanorama = flag),
  1126. },
  1127. };
  1128.  
  1129. onMounted(() => {
  1130. bus.on("YQ_head", (val) => {
  1131. if (val == false) {
  1132. MapShow.value = false;
  1133. } else {
  1134. MapShow.value = true;
  1135. }
  1136. });
  1137. });
  1138.  
  1139. onBeforeUnmount(() => {
  1140. bus.off("YQ_head");
  1141. Object.keys(events_params)
  1142. .filter((key) => events_params[key].method)
  1143. .forEach((key) => busOff(events_params[key].key));
  1144. clearInterval(refreshTimer.value); // 清除定时器
  1145. refreshTimer.value = null;
  1146. });
  1147. </script>
  1148.  
  1149. <style lang="scss">
  1150. #Map {
  1151. width: 100%;
  1152. height: 100%;
  1153. }
  1154. </style>