Newer
Older
DH_Apicture / src / components / Map / MapBox.vue
@wudi wudi on 30 Nov 23 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. <!-- <div id="trajectory-popup" ref="trajectory">1111</div> -->
  10. <div style="width: 700px; height: 350px" ref="streetSpace1" id="streetSpace">
  11. <streetSpace :location="datas.location"></streetSpace>
  12. </div>
  13. </template>
  14.  
  15. <script setup name="Map">
  16. import bus from "@/bus";
  17. import request from "@/utils/request";
  18. import MapBox from "@/components/Map/Map";
  19. import { getBaseListPoint } from "@/api/MonitorAssetsOnMap";
  20. import { supervisionRealinformationList } from "@/api/internetVehicles";
  21. import useUserStore from "@/store/modules/user";
  22. import { reactive, onMounted, onBeforeUnmount, nextTick, defineProps, watch } from "vue";
  23. import streetSpace from "@/components/Map/streetSpace";
  24. import gq_line from "../../../public/static/libs/mapbox/json/gq_line.json";
  25. import ys_flow from "../../../public/static/libs/mapbox/json/ys_flow.json";
  26. import line from "../../../public/static/libs/mapbox/json/line.json";
  27. import point from "../../../public/static/libs/mapbox/json/point.json";
  28. import { MapboxOverlay } from '@deck.gl/mapbox';
  29. import { LineLayer, GeoJsonLayer } from '@deck.gl/layers';
  30. import { TripsLayer, Tile3DLayer } from '@deck.gl/geo-layers';
  31. import { Tiles3DLoader } from '@loaders.gl/3d-tiles';
  32. const appStore = useUserStore();
  33. const MapShow = ref(true);
  34. const props = defineProps({
  35. // 数据id
  36. initJson: {
  37. type: String,
  38. default: () => "/static/libs/mapbox/style/wh_dhgx.json",
  39. },
  40. loadCallback: {
  41. type: Function,
  42. default: () => function () {},
  43. },
  44. });
  45. const datas = reactive({
  46. location: [],
  47. isOpenPanorama: false,
  48. });
  49. const { proxy } = getCurrentInstance();
  50. const refreshTimer = ref(null);
  51. const default_params = {
  52. point: {
  53. key: "point",
  54. prevId: null,
  55. },
  56. sx_wn_hm_monitoring: {
  57. key: "sx_wn_hm_monitoring",
  58. prevId: null,
  59. },
  60. town: {
  61. key: "乡镇",
  62. c_key: "村",
  63. prevId: null,
  64. },
  65. hupo: {
  66. key: "湖泊",
  67. prevId: null,
  68. },
  69. gangqu: {
  70. key: "港渠",
  71. prevId: null,
  72. },
  73. hb_wh_dhgx_merge: {
  74. key: "hb_wh_dhgx_merge",
  75. children: {
  76. psfq: { key: "排水分区" },
  77. },
  78. prevId: null,
  79. },
  80. 海绵型水系: { color: "rgba(35,184,153,1)" },
  81. 海绵建筑与社区: { color: "rgba(255,119,125,1)" },
  82. 海绵型道路广场: { color: "rgba(255,152,4,1)" },
  83. 管网及泵站: { color: "rgba(0,153,68,1)" },
  84. 海绵型公园绿地: { color: "rgba(223,214,20,1)" },
  85. flow: { color: "rgba(255,255,255,1)" },
  86. rain: { color: "rgba(255,255,255,1)" },
  87.  
  88. water_level: { color: "rgba(255,255,255,1)" },
  89. waterlogging: { color: "rgba(255,255,255,1)" },
  90.  
  91. rain_bz: { color: "rgba(255,255,255,1)" },
  92. sxt: { color: "rgba(255,255,255,1)" },
  93. WSCLC: { color: "rgba(255,255,255,1)" },
  94. overflow_outfall: { color: "rgba(255,255,255,1)" },
  95.  
  96. rainfall: { color: "rgba(223,214,20,1)" },
  97. pipeline: { color: "rgba(223,214,20,1)" },
  98. drain_outlet: { color: "rgba(223,214,20,1)" },
  99. };
  100. window.mapInitBusName = 'mapInitBusName';
  101. const mapClickEvt = (lngLat, properties, layerId) => {
  102. datas.isOpenPanorama &&
  103. (() => {
  104. setPopupDom("proxy.$refs.streetSpace1", 2);
  105. newfiberMap.popup1.setLngLat(lngLat).addTo(newfiberMap.map);
  106. datas.location = lngLat;
  107. })();
  108.  
  109. console.log("properties", properties, layerId);
  110. // 图层点击事件
  111. if (properties) bus.emit("FenQuClick", properties);
  112. clearTrajectory();
  113. clearTemporaryData();
  114. proxy.$emit("map-click1", lngLat, properties, layerId);
  115. const { town, hupo, gangqu, hb_wh_dhgx_merge } = default_params;
  116. const { setLayerVisible, setHighlight, setGeoJSON, removeMapDatas } = events_params;
  117. const _keys = ["rain_water_pump_station_info", "sewage_pump_station_info"];
  118.  
  119. (() => {
  120. setHighlight_(properties);
  121. newfiberMap
  122. .getLayers()
  123. .filter((i) => i.newfiberId == "村域边界")[0]
  124. .setData(turf.featureCollection([]));
  125. if (town.prevId) {
  126. busEmit(setLayerVisible.key, { layername: town.key, isCheck: true });
  127. busEmit(setLayerVisible.key, { layername: town.prevId, isCheck: false });
  128. town.prevId = null;
  129. }
  130. busEmit(
  131. removeMapDatas.key,
  132. _keys.map((k) => k + 1)
  133. );
  134. })();
  135. ((
  136. {
  137. [town.key]: () => {
  138. newfiberMap
  139. .getLayers()
  140. .filter((i) => i.newfiberId == "村域边界")[0]
  141. .setData(
  142. turf.featureCollection(
  143. newfiberMap.map
  144. .getSource("hb_wh_gxq_cun2")
  145. ._data.features.filter((i) => i.properties.type == properties.name)
  146. )
  147. );
  148. busEmit(setLayerVisible.key, { layername: town.key, isCheck: false });
  149. busEmit(setLayerVisible.key, { layername: properties.name, isCheck: true });
  150. town.prevId = properties.name;
  151. },
  152. [hupo.key]: () => {
  153. if (hupo.prevId) {
  154. busEmit(setLayerVisible.key, {
  155. layername: hupo.prevId,
  156. isCheck: false,
  157. values: [hupo.prevId, ["严东湖", "严西湖"].join(",")],
  158. });
  159. hupo.prevId = null;
  160. bus.emit("removeMapDatas", ["outlet_info1"]);
  161. }
  162. const keys = ["outlet_info", "村域边界", "lake"];
  163. const specialKeys = ["严东湖", "严西湖"];
  164. newfiberMap
  165. .getLayers()
  166. .filter((i) => i.newfiberId == keys[1])[0]
  167. .setData(
  168. turf.featureCollection(
  169. gq_line.features.filter((i) => i.properties.w_id == properties.name)
  170. )
  171. );
  172. let features = newfiberMap.map
  173. .getSource("point")
  174. ._data.features.filter(
  175. (i) =>
  176. i.properties.type == keys[0] &&
  177. i.properties.waterBodyType == keys[2] &&
  178. i.properties.waterBodyId == properties.pid
  179. )
  180. .map((i) => _.cloneDeep(i));
  181. features.forEach((i) => (i.properties.type = i.properties.type + "1"));
  182. busEmit(events_params.setGeoJSON.key, {
  183. json: turf.featureCollection(features),
  184. key: keys[0] + 1,
  185. });
  186. const values = [
  187. specialKeys.includes(properties.name) ? specialKeys.join(",") : properties.name,
  188. ];
  189. busEmit(setLayerVisible.key, {
  190. layername: properties.name,
  191. isCheck: true,
  192. values,
  193. });
  194. hupo.prevId = properties.name;
  195. },
  196. [gangqu.key]: () => {
  197. if (gangqu.prevId) {
  198. gangqu.prevId = null;
  199. bus.emit("removeMapDatas", ["outlet_info1"]);
  200. }
  201. const keys = ["outlet_info", "村域边界", "channel"];
  202. newfiberMap
  203. .getLayers()
  204. .filter((i) => i.newfiberId == keys[1])[0]
  205. .setData(
  206. turf.featureCollection(
  207. gq_line.features.filter((i) => i.properties.name == properties.name)
  208. )
  209. );
  210. let features = newfiberMap.map
  211. .getSource("point")
  212. ._data.features.filter(
  213. (i) =>
  214. i.properties.type == keys[0] &&
  215. i.properties.waterBodyType == keys[2] &&
  216. i.properties.waterBodyId == properties.pid
  217. )
  218. .map((i) => _.cloneDeep(i));
  219. features.forEach((i) => (i.properties.type = i.properties.type + "1"));
  220. busEmit(events_params.setGeoJSON.key, {
  221. json: turf.featureCollection(features),
  222. key: keys[0] + 1,
  223. });
  224. gangqu.prevId = properties.name;
  225. },
  226. [hb_wh_dhgx_merge.key]: () => {
  227. if (properties.layer == hb_wh_dhgx_merge.children.psfq.key) {
  228. const layerSplit = properties.c_layer.split("_");
  229. let geometry = Terraformer.WKT.parse(properties.geometry);
  230.  
  231. busEmit(setHighlight.key, []);
  232. const type = _.chunk(layerSplit[1], 2)[0].join("");
  233. let pType = type == "雨水" ? "YS" : "WS";
  234. pType == "YS" ? ys_flow(properties, true) : ws_flow(properties);
  235. if (layerSplit[2] != 3) return mapCenterByData(turf.bbox(geometry));
  236. let features = newfiberMap.map
  237. .getSource("hb_wh_dhgx_pipe_line_n_y_w")
  238. ._data.features.filter(
  239. (i) =>
  240. i.properties[type + "系统"] == properties.name &&
  241. i.properties["管段类型"] == pType
  242. );
  243. let pFeatures = newfiberMap.map
  244. .getSource("point")
  245. ._data.features.filter(
  246. (i) =>
  247. _keys.includes(i.properties.type) &&
  248. (i.properties.pointTypeName || "").includes(type)
  249. );
  250. let p_features = turf.pointsWithinPolygon(
  251. turf.featureCollection(pFeatures),
  252. geometry
  253. );
  254. p_features.features.forEach((i) => (i.properties.type = i.properties.type + 1));
  255. busEmit(setGeoJSON.key, { json: p_features });
  256. console.log("features", p_features, pFeatures);
  257. busEmit(
  258. setHighlight.key,
  259. turf.flatten(turf.featureCollection(features)).features
  260. );
  261. }
  262. },
  263. }[layerId] ||
  264. function () {
  265. //newfiberMap.map.easeTo(newfiberMap.config_.params.init);
  266. }
  267. )());
  268.  
  269. function ys_flow(properties, visible) {
  270. const keys = ["雨水系统流向", "雨水系统流向1"];
  271. keys.forEach((key) =>
  272. busEmit(setLayerVisible.key, { layername: key, isCheck: visible })
  273. );
  274. setHighlight_(properties);
  275. }
  276.  
  277. function ws_flow(properties) {
  278. const keys_ = ["雨水", "污水"];
  279. const keys = ["1_泵站", "1_污水处理厂", "分区流向", "分区流向1"];
  280. bus.emit("removeMapDatas", keys);
  281. newfiberMap
  282. .getLayers()
  283. .filter((i) => i.newfiberId == keys[3])[0]
  284. .getSource()
  285. .setData(turf.featureCollection([]));
  286. let key = (properties.c_layer || "").includes(keys_[0]) ? keys_[0] : keys_[1];
  287. if (properties.pointTypeName) key = keys_[1];
  288. const nameKey = "龙王咀" || properties.name.substring(0, 2);
  289. let features = line.features.filter(
  290. (i) => i.properties.area.includes(key) && i.properties.name.includes(nameKey)
  291. );
  292. let features1 = point.features.filter(
  293. (i) => i.properties.area.includes(key) && i.properties.system.includes(nameKey)
  294. );
  295. let points = _.groupBy(features1, (a) => a.properties.type);
  296. features.forEach((i) => {
  297. i.properties.type = keys[2];
  298. i.properties.color = key == keys_[0] ? "rgba(21,127,176,1)" : "rgba(255,0,0,1)";
  299. });
  300. Object.keys(points).map((key) =>
  301. bus.emit("setGeoJSON", {
  302. json: turf.featureCollection(
  303. points[key].map((i) => ({
  304. type: i.type,
  305. geometry: i.geometry,
  306. properties: { ...i.properties, type: "1_" + key },
  307. }))
  308. ),
  309. key: "1_" + key,
  310. })
  311. );
  312. bus.emit("setGeoJSON", { json: turf.featureCollection(features), key: keys[2] });
  313. newfiberMap.getLayers().filter((i) => i.newfiberId == keys[3])[0].getSource().setData(turf.featureCollection(features));
  314. setHighlight_(properties);
  315. }
  316.  
  317.  
  318. };
  319.  
  320. function setHighlight_(properties = {}) {
  321. const temporary = "temporary";
  322. bus.emit("removeMapDatas", [temporary]);
  323. if (!properties.geometry) return;
  324. let geojson = turf.polygonToLine(Terraformer.WKT.parse(properties.geometry));
  325. geojson = geojson.features ? geojson : turf.featureCollection([geojson]);
  326. geojson.features.forEach((i) => (i.properties = { color: "rgba(255,255,0,1)", type: temporary }));
  327. bus.emit("setGeoJSON", { json: geojson, key: temporary });
  328. newfiberMap.getLayers().filter((i) => i.newfiberId == "村域边界")[0].setData(geojson);
  329. }
  330.  
  331. const getModalData = () => {
  332. isClockInRange();
  333. const { setLayerVisible, setHighlight } = events_params;
  334. Object.keys(events_params)
  335. .filter((key) => events_params[key].method)
  336. .forEach((key) => busOn(events_params[key].key, events_params[key].method));
  337. // 获取地图项目数据
  338. dataToMap({});
  339. //5分钟刷新一次实时数据1000 * 60 * 5)
  340. /* refreshTimer.value = setInterval(() => {
  341. dataToMap({ params: { rainfall: {}, pipeline: {}, drainUutlet: {} } });
  342. }, 1000 * 60 * 5);*/
  343. createPopup();
  344. busEmit(events_params.closeAllLayer.key);
  345. proxy.$emit("loadCallback");
  346. ww();
  347. ysFlow();
  348. };
  349.  
  350. const ysFlow = () => {
  351. const key = "雨水系统流向";
  352. // let features = line.features.filter(i => key.includes(i.properties.area));
  353. // ys_flow.features = ys_flow.features.concat(features).map(i => ({ ...i, properties: { ...i.properties, color: 'rgba(49,254,223,1)', name: undefined } }));
  354. newfiberMap
  355. .getLayers()
  356. .filter((i) => i.newfiberId == key)[0]
  357. .setData(ys_flow);
  358. busEmit(events_params.setGeoJSON.key, { json: ys_flow, key: key + 1 });
  359. };
  360.  
  361. const ww = () => {
  362. const keys = ["尾水路径"];
  363. let features = newfiberMap.map
  364. .getSource("hb_wh_dhgx_merge")
  365. ._data.features.filter(
  366. (i) => i.properties.c_layer.includes(keys[0]) && i.properties.geometry_type == 2
  367. );
  368. busEmit(events_params.setGeoJSON.key, {
  369. json: turf.featureCollection(features),
  370. key: keys[0],
  371. });
  372. };
  373.  
  374. let prevObj = null;
  375. const panelDataToMap = (obj) => {
  376. // debugger
  377. const { setLayerVisible, setHighlight } = events_params;
  378. // if (prevObj != null) busEmit(setLayerVisible.key, { layername: prevObj.type, isCheck: false });
  379. busEmit(setHighlight.key, []);
  380. // busEmit(setLayerVisible.key, { layername: obj.type, isCheck: true });
  381. // debugger;
  382. let features = ["point", "linestring", "polygon", "hb_wh_dhgx_merge"]
  383. .map((key) =>
  384. newfiberMap.map
  385. .getSource(key)
  386. ._options.data.features.filter(
  387. (i) =>
  388. (i.properties.name || "").includes(obj.name) &&
  389. (obj.id ? obj.id == i.properties.pid : true)
  390. )
  391. )
  392. .flat();
  393. let feature =
  394. features.filter((i) => i.properties.name == obj.name)[0] ||
  395. features[_.random(0, features.length - 1)];
  396. if (!feature) return;
  397. busEmit(setHighlight.key, [feature]);
  398. mapCenterByData(turf.bbox(feature));
  399. };
  400.  
  401. const mapCenterByData = (bbox) => {
  402. newfiberMap.map.fitBounds(
  403. [
  404. [bbox[0], bbox[1]],
  405. [bbox[2], bbox[3]],
  406. ],
  407. { padding: 50, offset: [100, 10], maxZoom: 18, pitch: 0, duration: 500 }
  408. );
  409. };
  410. const trajectoryToMap = (data) => {
  411. clearTrajectory();
  412. const fields = { lng: "l", lat: "a" };
  413. mapCenterByData([data[0]["l"], data[0]["a"], data[1]["l"], data[1]["a"]].map(Number));
  414. newfiberMap.map.trackLayer = new mapboxgl1.TrackLayer(
  415. newfiberMap.map,
  416. data,
  417. fields,
  418. (properties, index) => {
  419. const lng = properties[fields.lng];
  420. const lat = properties[fields.lat];
  421. if (!(index % 50)) {
  422. newfiberMap.map.flyTo({
  423. center: [lng, lat],
  424. bearing: newfiberMap.map.getBearing(),
  425. pitch: newfiberMap.map.getPitch(),
  426. zoom: newfiberMap.map.getZoom(),
  427. });
  428. }
  429. /* setPopupDom('proxy.$refs.trajectory', 1);
  430. newfiberMap.popup.setLngLat([lng,lat]).addTo(newfiberMap.map);*/
  431. }
  432. );
  433. };
  434.  
  435. const clearTrajectory = () => {
  436. if (newfiberMap.map.trackLayer) newfiberMap.map.trackLayer.destory();
  437. if (newfiberMap.popup) newfiberMap.popup.remove();
  438. };
  439.  
  440. const dataToMap = async ({ params, callback }) => {
  441. const { setLayerVisible, beansToMap } = events_params;
  442. const data_default_params = {
  443. sites: {
  444. method: getBaseListPoint,
  445. fields: { geometry: "geometry", name: "name" },
  446. groupMethod: (data) =>
  447. _.groupBy(
  448. data
  449. .map((i) => i.data)
  450. .flat()
  451. .filter((i) => i.geometry)
  452. .map((item) => ({ ...item })),
  453. (v) => v.pointType + (v.connectType?"_"+v.connectType:'')
  454. ),
  455. },
  456. //车辆
  457. cheliang: {
  458. method: supervisionRealinformationList,
  459. fields: { lng: 'longitude', lat: 'latitude', name: 'plateNumber' },
  460. groupMethod: data => _.groupBy(data.supervisionRealinformationList.filter(i => i.longitude && i.latitude).map(item => ({...item,type:item.vehicleCategory+item.status})), v => v.type),
  461. },
  462. };
  463. let keys = Object.keys(params || data_default_params);
  464. const results = await Promise.all(
  465. keys.map((k, idx) =>
  466. data_default_params[k].method((params || {})[k] || data_default_params[k].mPrams)
  467. )
  468. );
  469. results.forEach((result, idx) => {
  470. const data = result.data;
  471. const k = keys[idx];
  472. if (!data) return;
  473. bus.emit("changeData");
  474. const groups = data_default_params[k].groupMethod(data);
  475. const g_keys = Object.keys(groups);
  476. bus.emit("removeMapDatas", g_keys);
  477. g_keys.forEach((key) =>
  478. busEmit(beansToMap.key, {
  479. beans: groups[key].map((i) => ({
  480. ...i,
  481. color: (default_params[key] || {}).color,
  482. })),
  483. fields: data_default_params[k].fields,
  484. type: key,
  485. })
  486. );
  487. });
  488.  
  489. callback && callback();
  490. };
  491.  
  492. const createPopup = () => {
  493. newfiberMap.popup = new mapboxgl1.Popup({
  494. closeButton: false,
  495. closeOnClick: false,
  496. });
  497. newfiberMap.popup1 = new mapboxgl1.Popup({
  498. closeButton: false,
  499. closeOnClick: false,
  500. });
  501. };
  502.  
  503. const setPopupDom = (dom, offset) => {
  504. f();
  505. nextTick(f);
  506. function f() {
  507. console.log("eval(dom)", eval(dom));
  508. newfiberMap.popup1.setDOMContent(eval(dom));
  509. newfiberMap.popup1.setOffset(offset);
  510. }
  511. };
  512.  
  513. function filterGeometryNotEmpty(inputData) {
  514. return inputData.map((item) => {
  515. // 过滤掉每个对象中的 data 数组里 geometry 为空的元素
  516. const filteredData = item.data.filter((dataPoint) => dataPoint.geometry !== "");
  517. return {
  518. ...item,
  519. data: filteredData,
  520. };
  521. });
  522. }
  523.  
  524. //路径规划
  525. const pathPlanning = async (
  526. origin = "116.481028,39.989643",
  527. destination = "116.465302,40.004717",
  528. callback
  529. ) => {
  530. const origin_ = origin.split(",").map(Number);
  531. const destination_ = destination.split(",").map(Number);
  532. if (origin_.length != 2 || destination_.length != 2)
  533. return console.log("输入参数错误:", origin, destination);
  534. const results = await request(
  535. `/amap/v3/direction/driving?origin=${origin}&destination=${destination}&extensions=all&output=json&key=74f1b47f7fea1971354edb2dfacb3982`
  536. );
  537. if (!results.route.paths[0]) return console.log("暂无路径!");
  538. callback &&
  539. callback(
  540. turf.featureCollection(
  541. results.route.paths[0].steps.map((i) =>
  542. turf.feature(
  543. Terraformer.WKT.parse(
  544. `LINESTRING(${i.polyline
  545. .split(";")
  546. .map((i) => i.split(",").join(" "))
  547. .join(",")})`
  548. ),
  549. i
  550. )
  551. )
  552. )
  553. );
  554. };
  555.  
  556. //判断是否在打卡点内
  557. const isClockInRange = (
  558. currentLocation = "POINT(109.41360117253636 34.49038724464877)",
  559. ranges = [
  560. "POINT(109.43167853335872 34.51345940211415)",
  561. "POINT(109.46797592891363 34.51145239795833)",
  562. "POINT(109.44903576574815 34.50165755773118)",
  563. ],
  564. rVal = 500
  565. ) => {
  566. const feature = { ...Terraformer.WKT.parse(currentLocation) };
  567. return (
  568. ranges
  569. .map((i) => turf.buffer({ ...Terraformer.WKT.parse(i) }, rVal / 1000))
  570. .map((i) => turf.booleanContains(i, feature))
  571. .filter(Boolean)[0] || false
  572. );
  573. };
  574.  
  575. const clearTemporaryData = () => {
  576. const { setLayerVisible, removeMapDatas } = events_params;
  577. const keys_ = [
  578. "问题管线",
  579. "1_泵站",
  580. "1_污水处理厂",
  581. "分区流向",
  582. "分区流向1",
  583. "rainwater_pipeline_water_level",
  584. "rainwater_pipeline_water_level_GWGSWYX",
  585. "outlet_info1",
  586. "temporary",
  587. "highlight_linestring",
  588. "highlight_polygon",
  589. "highlight_point",
  590. ];
  591. const hideKeys = ["雨水系统流向", "雨水系统流向1"];
  592. bus.emit(removeMapDatas.key, keys_);
  593. const keys = newfiberMap.config_.l7.filter((i) => i.temporary).map((i) => i.key);
  594. newfiberMap.getLayers().filter((i) => keys.includes(i.newfiberId)).forEach((i) => i.setData({ type: "FeatureCollection", features: [] }));
  595. hideKeys.forEach((i) => busEmit(setLayerVisible.key, { layername: i, isCheck: false }));
  596.  
  597. setHighlight_();
  598. };
  599.  
  600.  
  601. const remove3Dtiles = () => {
  602. newfiberMap.map._controls.filter(i => i._deck).forEach(i => i.setProps({ layers: [] }));
  603. }
  604.  
  605. const load3DTiles = ({id, url}) => {
  606. remove3Dtiles();
  607. let deckOverlay = null;
  608. deckOverlay = newfiberMap.map._controls.filter(i => i._deck)[0];
  609. if (!deckOverlay) {
  610. deckOverlay = new MapboxOverlay({
  611. interleaved: true,
  612. layers: [],
  613. });
  614. newfiberMap.map.addControl(deckOverlay);
  615. }
  616. const layers = deckOverlay._props.layers;
  617. deckOverlay.setProps({
  618. layers: [
  619. ...layers,
  620. new Tile3DLayer({
  621. id: id,
  622. name:id,
  623. data: url,
  624. loader: Tiles3DLoader,
  625. extruded: true, // 设置3D功能
  626. opacity: 1, // 设置透明度
  627. loadOptions: {
  628. '3d-tiles': {
  629. loadGLTF: true,
  630. decodeQuantizedPositions: false,
  631. isTileset: 'auto',
  632. assetGltfUpAxis: null,
  633. },
  634. },
  635. pickable: true, // 设置可选取
  636. onTilesetLoad: tileset => {
  637. const { cartographicCenter, zoom } = tileset;
  638. deckOverlay.setProps({
  639. initialViewState: {
  640. longitude: cartographicCenter[0],
  641. latitude: cartographicCenter[1],
  642. zoom,
  643. },
  644. });
  645. },
  646. pointSize: 2,
  647. }),
  648. ],
  649. });
  650. }
  651.  
  652. const busEmit = (event, params) => bus.emit(event, params);
  653.  
  654. const busOn = (event, func) => bus.on(event, func);
  655.  
  656. const busOff = (event) => bus.off(event);
  657. //添加临时动态线
  658. const addDynamicLine = (c_layer, c_layer1) => {
  659. if (newfiberMap.getLayerByName("dynamicLine")) {
  660. newfiberMap.removeLayer(newfiberMap.getLayerByName("dynamicLine"));
  661. }
  662. let dynamicLineJson = turf.featureCollection(
  663. newfiberMap.map
  664. .getSource("sx_wn_hm_merge")
  665. ._data.features.filter(
  666. (feature) =>
  667. feature.properties.c_layer.includes(c_layer) &&
  668. feature.properties.c_layer.includes(c_layer1)
  669. )
  670. );
  671. console.log(c_layer, dynamicLineJson);
  672. let layer = new mapboxL7.LineLayer({
  673. name: "dynamicLine",
  674. })
  675. .source(dynamicLineJson)
  676. .size(3)
  677. .shape("line")
  678. .color("color")
  679. .animate({
  680. interval: 1,
  681. duration: 2,
  682. trailLength: 0.8,
  683. });
  684. newfiberMap.addLayer(layer);
  685. };
  686. const events_params = {
  687. removeMapDatas: { key: 'removeMapDatas' },
  688. setGeoJSON: { key: 'setGeoJSON' },
  689. setLayerVisible: { key: 'setLayerVisible' },
  690. beansToMap: { key: 'beansToMap' },
  691. closeAllLayer: { key: 'closeAllLayer' },
  692. setHighlight: { key: 'setHighlight' },
  693. dataToMap: { key: 'dataToMap', method: dataToMap },
  694. pathPlanning: { key: 'pathPlanning', method: pathPlanning },
  695. panelDataToMap: { key: 'panelDataToMap', method: panelDataToMap },
  696. trajectoryToMap: { key: 'trajectoryToMap', method: trajectoryToMap },
  697. clearTrajectory: { key: 'clearTrajectory', method: clearTrajectory },
  698. clearTemporaryData: { key: 'clearTemporaryData', method: clearTemporaryData },
  699. load3DTiles: { key: 'load3DTiles', method: load3DTiles },
  700. remove3Dtiles: { key: 'remove3Dtiles', method: remove3Dtiles },
  701. isOpenPanorama: {key: 'isOpenPanorama', method: flag => (datas.isOpenPanorama = flag),},
  702. };
  703.  
  704. onMounted(() => {
  705. bus.on("YQ_head", (val) => {
  706. if (val == false) {
  707. MapShow.value = false;
  708. } else {
  709. MapShow.value = true;
  710. }
  711. });
  712. });
  713.  
  714. onBeforeUnmount(() => {
  715. bus.off("YQ_head");
  716. Object.keys(events_params)
  717. .filter((key) => events_params[key].method)
  718. .forEach((key) => busOff(events_params[key].key));
  719. clearInterval(refreshTimer.value); // 清除定时器
  720. refreshTimer.value = null;
  721. });
  722. </script>
  723.  
  724. <style lang="scss">
  725. #Map {
  726. width: 100%;
  727. height: 100%;
  728. }
  729. </style>