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