diff --git a/package.json b/package.json index 529d078..4d9cbbd 100644 --- a/package.json +++ b/package.json @@ -98,6 +98,7 @@ "axios": "^1.6.4", "codemirror": "^5.65.16", "color": "^4.2.3", + "coordtransform": "^2.1.2", "cropperjs": "^1.6.1", "crypto-js": "^4.2.0", "dayjs": "^1.11.10", diff --git a/src/assets/images/chart/tables/table_filter.png b/src/assets/images/chart/tables/table_filter.png new file mode 100644 index 0000000..58e002b Binary files /dev/null and b/src/assets/images/chart/tables/table_filter.png differ diff --git a/src/packages/components/Tables/Tables/TableFilter/config.ts b/src/packages/components/Tables/Tables/TableFilter/config.ts new file mode 100644 index 0000000..134cbe3 --- /dev/null +++ b/src/packages/components/Tables/Tables/TableFilter/config.ts @@ -0,0 +1,67 @@ +import cloneDeep from 'lodash/cloneDeep' +import { PublicConfigClass } from '@/packages/public' +import { CreateComponentType } from '@/packages/index.d' +import { chartInitConfig } from '@/settings/designSetting' +import { TableFilterConfig } from './index' +import dataJson from './data.json' + +const {header, source, filterset} = dataJson; + +export const option = { + header: header, + dataset: source, + filterset: filterset, + dataStyle: { + colLeft: 4, + + filterMarginTop: 20, + filterMarginLeft: 50, + filterItemHeight: 45, + + filterTitleAlign: 'left', + filterTitleFontSize: 24, + filterTitleFontColor: '#ADFFC0', + + filterContentAlign: 'left', + filterChooseFontSize: 18, + filterChooseFontColor: '#FFFFFF', + + tableMarginTop: 20, + tableMarginLeft: 20, + tableBordered: false, + tableSigleColumn: true, + tableSingleLine: true, + tableStriped: false, + tableSize: 'small', + tableAlign: 'center', + // 表头 + tableHeaderShow: false, + // 序号 + orderBumberShow: false, + // 操作 + buttonDivShow: true, + buttonDivShow1: true, + buttonDivShow2: true, + buttonWidth: 22, + buttonHeight: 22, + // 宽度 + orderDivWidth: 50, + buttonDivWidth: 100, + // 字体 + tableHeaderBackgroud: '#FFFFFF', + tableHeaderFontSize: 20, + tableHeaderFontColor: '#000000', + + tableDataBackgroudShow: false, + tableDataBackgroud: '#FFFFFF', + tableDataFontSize: 20, + tableDataFontColor: '#FFFFFF', + }, +} + +export default class Config extends PublicConfigClass implements CreateComponentType { + public key = TableFilterConfig.key + public attr = { ...chartInitConfig, w: 1060, h: 570, zIndex: -1 } + public chartConfig = cloneDeep(TableFilterConfig) + public option = cloneDeep(option) +} diff --git a/src/packages/components/Tables/Tables/TableFilter/config.vue b/src/packages/components/Tables/Tables/TableFilter/config.vue new file mode 100644 index 0000000..ec15759 --- /dev/null +++ b/src/packages/components/Tables/Tables/TableFilter/config.vue @@ -0,0 +1,826 @@ + + + diff --git a/src/packages/components/Tables/Tables/TableFilter/data.json b/src/packages/components/Tables/Tables/TableFilter/data.json new file mode 100644 index 0000000..1d6f880 --- /dev/null +++ b/src/packages/components/Tables/Tables/TableFilter/data.json @@ -0,0 +1,186 @@ +{ + "header": [ + { + "title": "名称", + "key": "name", + "align": "center", + "width": "250", + "prefix": null, + "suffix": null, + "convert": null + }, + { + "title": "面积", + "key": "area", + "align": "center", + "width": "200", + "prefix": null, + "suffix": "m²", + "convert": null + }, + { + "title": "时间", + "key": "time", + "align": "center", + "width": "200", + "prefix": null, + "suffix": "小时", + "convert": "0" + }, + { + "title": "路程", + "key": "distance", + "align": "center", + "width": "200", + "prefix": "路程", + "suffix": "km", + "convert": null + }, + { + "title": "预计时间", + "key": "estimatedTime", + "align": "center", + "width": "300", + "prefix": "预计", + "suffix": null, + "convert": "1" + } + ], + "filterset": [ + { + "title": "地图显示", + "field": "type", + "compareType": "contain", + "showType": "checkbox", + "value": [ "水源", "物资", "营房", "防火通道", "三轮通道", "步行道" ], + "options": [ + { "label": "水源", "value": "水源" }, + { "label": "物资", "value": "物资" }, + { "label": "营房", "value": "营房" }, + { "label": "防火通道", "value": "防火通道" }, + { "label": "三轮通道", "value": "三轮通道" }, + { "label": "步行道", "value": "步行道" } + ] + }, + { + "title": "资源列表", + "field": "type", + "compareType": "equal", + "showType": "buttonGroup", + "value": null, + "options": [ + { "label": "水源", "value": "水源" }, + { "label": "物资", "value": "物资" }, + { "label": "营房", "value": "营房" } + ] + }, + { + "title": "重点资源", + "field": null, + "compareType": null, + "showType": null, + "value": null, + "options": [ + { "label": null, "value": null } + ] + }, + { + "title": "距离", + "field": "distance", + "compareType": "lessAndEqual", + "showType": "radio", + "value": null, + "options": [ + { "label": "1km以内", "value": "1" }, + { "label": "5km以内", "value": "5" }, + { "label": "10km以内", "value": "10" }, + { "label": "20km以内", "value": "20" }, + { "label": "全部", "value": null } + ] + } + ], + "source": [ + { + "name": "坑塘", + "type": "水源", + "area": null, + "time": null, + "distance": "21.14", + "estimatedTime": "00:05:45", + "date": "2025-03-01 00:05:45" + }, + { + "name": "东蒙布袋口检查", + "type": "物资", + "area": "300", + "time": "12.50", + "distance": "14.14", + "estimatedTime": "00:05:45", + "date": "2025-03-11 00:05:45" + }, + { + "name": "北刘家庄蓄水池", + "type": "营房", + "area": "300", + "time": "12.50", + "distance": "0.14", + "estimatedTime": "00:05:45", + "date": "2025/03/01 00:05:45" + + }, + { + "name": "防火通道", + "type": "防火通道", + "area": null, + "time": null, + "distance": "2.14", + "estimatedTime": "00:05:45", + "date": "2025-12-01 00:05:45" + }, + { + "name": "步行道", + "type": "步行道", + "area": "300", + "time": "5.50", + "distance": "1.14", + "estimatedTime": "00:05:45", + "date": "2025-08-01 00:05:45" + }, + { + "name": "三轮通道", + "type": "三轮通道", + "area": "300", + "time": "9.50", + "distance": "5.14", + "estimatedTime": "00:05:45", + "date": "2025-10-21 00:05:45" + }, + { + "name": "坑塘", + "type": "水源", + "area": null, + "time": null, + "distance": "10.14", + "estimatedTime": "00:05:45", + "date": "2025-06-01 00:05:45" + }, + { + "name": "东蒙布袋口检查", + "type": "物资", + "area": "300", + "time": "12.50", + "distance": "10.14", + "estimatedTime": "00:05:45", + "date": "2025-06-12 00:05:45" + }, + { + "name": "北刘家庄蓄水池", + "type": "营房", + "area": "300", + "time": "12.50", + "distance": "19.14", + "estimatedTime": "00:05:45", + "date": "2025-05-01 00:05:45" + } + ] +} diff --git a/src/packages/components/Tables/Tables/TableFilter/index.ts b/src/packages/components/Tables/Tables/TableFilter/index.ts new file mode 100644 index 0000000..bf918a1 --- /dev/null +++ b/src/packages/components/Tables/Tables/TableFilter/index.ts @@ -0,0 +1,14 @@ +import { ConfigType, PackagesCategoryEnum, ChartFrameEnum } from '@/packages/index.d' +import { ChatCategoryEnum, ChatCategoryEnumName } from '../../index.d' + +export const TableFilterConfig: ConfigType = { + key: 'TableFilter', + chartKey: 'VTableFilter', + conKey: 'VCTableFilter', + title: '自定义筛选表格', + category: ChatCategoryEnum.TABLE, + categoryName: ChatCategoryEnumName.TABLE, + package: PackagesCategoryEnum.TABLES, + chartFrame: ChartFrameEnum.COMMON, + image: 'table_filter.png' +} diff --git a/src/packages/components/Tables/Tables/TableFilter/index.vue b/src/packages/components/Tables/Tables/TableFilter/index.vue new file mode 100644 index 0000000..3c4b78e --- /dev/null +++ b/src/packages/components/Tables/Tables/TableFilter/index.vue @@ -0,0 +1,823 @@ + + + + + diff --git a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/svg/button1.vue b/src/packages/components/Tables/Tables/TableFilter/svg/button1.vue similarity index 99% rename from src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/svg/button1.vue rename to src/packages/components/Tables/Tables/TableFilter/svg/button1.vue index 1b54b1a..3578a91 100644 --- a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/svg/button1.vue +++ b/src/packages/components/Tables/Tables/TableFilter/svg/button1.vue @@ -8,7 +8,6 @@ xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" > - 编组 16 +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + diff --git a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/config.ts b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/config.ts index 764b155..b0007ab 100644 --- a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/config.ts +++ b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/config.ts @@ -5,57 +5,99 @@ import { chartInitConfig } from '@/settings/designSetting' import { ZhiChu_ModalTableConfig } from './index' import dataJson from './data.json' -const {header, source, filterset} = dataJson; +const {header, source} = dataJson; export const option = { header: header, dataset: source, - filterset: filterset, dataStyle: { colLeft: 4, + mapListValue: ['water', 'goods', 'barrack'], + buttonValue: '0', + distanceradio: '1', + // 筛选项 filterMarginTop: 20, filterMarginLeft: 50, filterItemHeight: 45, - filterTitleAlign: 'left', filterTitleFontSize: 24, filterTitleFontColor: '#ADFFC0', - filterContentAlign: 'left', filterChooseFontSize: 18, filterChooseFontColor: '#FFFFFF', + // 水源-表格 tableMarginTop: 20, tableMarginLeft: 20, tableBordered: false, tableSigleColumn: true, tableSingleLine: true, - tableStriped: false, tableSize: 'small', tableAlign: 'center', // 表头 tableHeaderShow: false, // 序号 - orderBumberShow: false, + tableOrderBumberShow: false, // 操作 - buttonDivShow: true, - buttonDivShow1: true, - buttonDivShow2: true, - buttonWidth: 22, - buttonHeight: 22, + tableButtonDivShow: true, + tableButtonWidth: 22, + tableButtonHeight: 22, // 宽度 - orderDivWidth: 50, - buttonDivWidth: 100, + tableOrderDivWidth: 50, + tableButtonDivWidth: 100, // 字体 tableHeaderBackgroud: '#FFFFFF', tableHeaderFontSize: 20, tableHeaderFontColor: '#000000', - - tableDataBackgroudShow: false, - tableDataBackgroud: '#FFFFFF', tableDataFontSize: 20, tableDataFontColor: '#FFFFFF', + + // 物资-队列 + goodsMarginTop: 20, + goodsMarginLeft: 20, + goodsDivMarginTop: 20, + goodsDivMarginLeft: 20, + // 标题 + goodsTitleFontSize1: 18, + goodsTitleFontColor1: '#FFFFFF', + goodsTitleFontSize2: 14, + goodsTitleFontColor2: '#FFFFFF', + goodsTitleFontSize3: 16, + goodsTitleFontColor3: '#FFFFFF', + // 按钮 + goodsButtonBackgroud: '#409EFF', + goodsButtonFontSize: 16, + goodsButtonFontColor: '#FFFFFF', + // 线 + goodsLineStartColor: '#4DFFB5', + goodsLineEndColor: '#0B4D2C', + // text + goodsTextFontSize: 16, + goodsTextFontColor: '#FFFFFF', + + // 营房-队列 + barrackMarginTop: 20, + barrackMarginLeft: 20, + barrackDivMarginTop: 20, + barrackDivMarginLeft: 20, + // 标题 + barrackTitleFontSize1: 18, + barrackTitleFontColor1: '#FFFFFF', + barrackTitleFontSize2: 14, + barrackTitleFontColor2: '#FFFFFF', + barrackTitleFontSize3: 16, + barrackTitleFontColor3: '#FFFFFF', + // 按钮 + barrackButtonBackgroud: '#409EFF', + barrackButtonFontSize: 16, + barrackButtonFontColor: '#FFFFFF', + // 线 + barrackLineStartColor: '#4DFFB5', + barrackLineEndColor: '#0B4D2C', + // text + barrackTextFontSize: 16, + barrackTextFontColor: '#FFFFFF', }, } diff --git a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/config.vue b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/config.vue index ec15759..0b89e58 100644 --- a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/config.vue +++ b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/config.vue @@ -1,261 +1,5 @@ diff --git a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/data.json b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/data.json index 1d6f880..b9fefaa 100644 --- a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/data.json +++ b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/data.json @@ -46,141 +46,141 @@ "convert": "1" } ], - "filterset": [ - { - "title": "地图显示", - "field": "type", - "compareType": "contain", - "showType": "checkbox", - "value": [ "水源", "物资", "营房", "防火通道", "三轮通道", "步行道" ], - "options": [ - { "label": "水源", "value": "水源" }, - { "label": "物资", "value": "物资" }, - { "label": "营房", "value": "营房" }, - { "label": "防火通道", "value": "防火通道" }, - { "label": "三轮通道", "value": "三轮通道" }, - { "label": "步行道", "value": "步行道" } - ] - }, - { - "title": "资源列表", - "field": "type", - "compareType": "equal", - "showType": "buttonGroup", - "value": null, - "options": [ - { "label": "水源", "value": "水源" }, - { "label": "物资", "value": "物资" }, - { "label": "营房", "value": "营房" } - ] - }, - { - "title": "重点资源", - "field": null, - "compareType": null, - "showType": null, - "value": null, - "options": [ - { "label": null, "value": null } - ] - }, - { - "title": "距离", - "field": "distance", - "compareType": "lessAndEqual", - "showType": "radio", - "value": null, - "options": [ - { "label": "1km以内", "value": "1" }, - { "label": "5km以内", "value": "5" }, - { "label": "10km以内", "value": "10" }, - { "label": "20km以内", "value": "20" }, - { "label": "全部", "value": null } - ] - } - ], "source": [ { + "id": "1", "name": "坑塘", - "type": "水源", + "type": "0", "area": null, "time": null, - "distance": "21.14", - "estimatedTime": "00:05:45", - "date": "2025-03-01 00:05:45" - }, - { - "name": "东蒙布袋口检查", - "type": "物资", - "area": "300", - "time": "12.50", - "distance": "14.14", - "estimatedTime": "00:05:45", - "date": "2025-03-11 00:05:45" - }, - { - "name": "北刘家庄蓄水池", - "type": "营房", - "area": "300", - "time": "12.50", "distance": "0.14", "estimatedTime": "00:05:45", - "date": "2025/03/01 00:05:45" - + "date": "2025-03-01 00:05:45", + "goodsDetail": null, + "situation": null, + "teamLocation": null, + "lng": "118.16247495", + "lat": "35.36599084" }, { - "name": "防火通道", - "type": "防火通道", - "area": null, - "time": null, - "distance": "2.14", - "estimatedTime": "00:05:45", - "date": "2025-12-01 00:05:45" - }, - { - "name": "步行道", - "type": "步行道", + "id": "2", + "name": "东蒙布袋口检查", + "type": "0", "area": "300", - "time": "5.50", + "time": "12.50", "distance": "1.14", "estimatedTime": "00:05:45", - "date": "2025-08-01 00:05:45" + "date": "2025-03-11 00:05:45", + "goodsDetail": null, + "situation": null, + "teamLocation": null, + "lng": "118.153507", + "lat": "35.369431" }, { - "name": "三轮通道", - "type": "三轮通道", + "id": "3", + "name": "北刘家庄蓄水池", + "type": "0", "area": "300", - "time": "9.50", + "time": "12.50", "distance": "5.14", "estimatedTime": "00:05:45", - "date": "2025-10-21 00:05:45" + "date": "2025/03/01 00:05:45", + "goodsDetail": null, + "situation": null, + "teamLocation": null, + "lng": "118.16339875", + "lat": "35.35693363" }, { - "name": "坑塘", - "type": "水源", + "id": "4", + "name": "塔山林场物资储备库", + "type": "1", "area": null, "time": null, - "distance": "10.14", + "distance": "3.14", "estimatedTime": "00:05:45", - "date": "2025-06-01 00:05:45" + "date": "2025/03/01 00:05:45", + "goodsDetail": "1、打草机 10个 2、干粉灭火弹 69箱 3、水剂灭火弹 45箱 4、高压细水雾 4台 5、斯蒂尔灭火机 13台 6、华盛泰山灭火机 2台 7、华盛泰山制草机 1台 8、打孔机 2台 9、肩抗灭火器 4个 10、森林灭火弹 6箱 11、扫把,20把 12、铁耙子 30把, 13、斯蒂尔制草机, 6个 14、高枝油锯 6个 15、水泵 2台 16、水枪 17个", + "situation": null, + "teamLocation": null, + "lng": "118.11856589", + "lat": "35.37110306" }, { + "id": "5", + "name": "东蒙中队驻防地", + "type": "2", + "area": null, + "time": null, + "distance": "0.60", + "estimatedTime": "00:05:45", + "date": "2025/03/01 00:05:45", + "goodsDetail": null, + "situation": "2辆皮卡、2辆运兵车、5台水泵、管带:2760米(92节)、22台风力灭火机、二号工具20个", + "teamLocation": "东蒙中队驻地", + "lng": "118.03173443854365", + "lat": "35.43087222278798" + }, + { + "id": "6", "name": "东蒙布袋口检查", - "type": "物资", + "type": "0", "area": "300", "time": "12.50", - "distance": "10.14", + "distance": "1.14", "estimatedTime": "00:05:45", - "date": "2025-06-12 00:05:45" + "date": "2025-03-11 00:05:45", + "goodsDetail": null, + "situation": null, + "teamLocation": null, + "lng": "118.19313469", + "lat": "35.35926978" }, { + "id": "7", "name": "北刘家庄蓄水池", - "type": "营房", + "type": "0", "area": "300", "time": "12.50", - "distance": "19.14", + "distance": "5.14", "estimatedTime": "00:05:45", - "date": "2025-05-01 00:05:45" + "date": "2025/03/01 00:05:45", + "goodsDetail": null, + "situation": null, + "teamLocation": null, + "lng": "118.16693284", + "lat": "35.39109119" + }, + { + "id": "8", + "name": "塔山林场物资储备库", + "type": "1", + "area": null, + "time": null, + "distance": "3.14", + "estimatedTime": "00:05:45", + "date": "2025/03/01 00:05:45", + "goodsDetail": "1、打草机 10个 2、干粉灭火弹 69箱 3、水剂灭火弹 45箱 4、高压细水雾 4台 5、斯蒂尔灭火机 13台 6、华盛泰山灭火机 2台 7、华盛泰山制草机 1台 8、打孔机 2台 9、肩抗灭火器 4个 10、森林灭火弹 6箱 11、扫把,20把 12、铁耙子 30把, 13、斯蒂尔制草机, 6个 14、高枝油锯 6个 15、水泵 2台 16、水枪 17个", + "situation": null, + "teamLocation": null, + "lng": "118.16142131", + "lat": "35.36308522" + }, + { + "id": "9", + "name": "薛庄镇9号蓄水池", + "type": "0", + "area": null, + "time": null, + "distance": "0.60", + "estimatedTime": "00:05:45", + "date": "2025/03/01 00:05:45", + "goodsDetail": null, + "situation": "2辆皮卡、2辆运兵车、5台水泵、管带:2760米(92节)、22台风力灭火机、二号工具20个", + "teamLocation": "东蒙中队驻地", + "lng": "118.16303303", + "lat": "35.36772074" } ] } diff --git a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/index.vue b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/index.vue index e96291a..905e538 100644 --- a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/index.vue +++ b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/index.vue @@ -1,330 +1,156 @@ @@ -335,10 +161,22 @@ import { icon } from '@/plugins'; import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'; import { useChartDataFetch } from '@/hooks'; + import { + getRouterFunc, + handlerStartRoaming, + handlerStopRoaming, + drawRouterFunc, + clearRouterFunc, + } from './ts/routePath'; import dayjs from 'dayjs'; import { cloneDeep } from 'lodash-es'; - import Button1 from './svg/button1.vue'; - import Button2 from './svg/button2.vue'; + import * as mars3d from 'mars3d'; + import Water from './source/water.vue'; + import Goods from './source/goods.vue'; + import Barrack from './source/barrack.vue'; + + import dataJson from './data.json'; + const { source } = dataJson; const props = defineProps({ chartConfig: { @@ -352,334 +190,253 @@ const option = reactive({ header: props.chartConfig.option.header, dataset: props.chartConfig.option.dataset, - filterset: props.chartConfig.option.filterset, dataStyle: props.chartConfig.option.dataStyle, + status: props.chartConfig.status, }); + // 搜索 + const searchValue = ref(); // 表头高度 - const headHeight: any = computed(() => { - if (option.dataStyle.tableHeaderShow) { - return document.querySelector('.theadDiv')?.offsetHeight + 10; - } else { - return 0; - } + const filterDivHeight: any = computed(() => { + return option.dataStyle.buttonValue == '1' + ? option.dataStyle.filterItemHeight * 5 + : option.dataStyle.filterItemHeight * 4; }); - // 数据表实际宽度 - const headWidths = computed(() => { - let widths: any = []; - if (option.dataStyle.tableHeaderShow) { - setTimeout(() => { - if (option.dataStyle.orderBumberShow) { - widths.push(document.getElementById('dataTd_order')?.offsetWidth); - } - option.header.forEach((item, index) => { - let td = document.getElementById('dataTd_' + index); - widths.push(td?.offsetWidth); - }); - if (option.dataStyle.buttonDivShow) { - widths.push(document.getElementById('dataTd_button')?.offsetWidth); - } - console.log(widths); - }, 500); - } - return widths; - }); + let waterGraphicLayerArr: any = []; + let waterGraphicLayers = new mars3d.layer.GraphicLayer(); + let goodsGraphicLayerArr: any = []; + let goodsGraphicLayers = new mars3d.layer.GraphicLayer(); + let barrackGraphicLayerArr: any = []; + let barrackGraphicLayers = new mars3d.layer.GraphicLayer(); - // 搜索框 - const searchFlag = ref(false); - const searchAllFlag = ref(false); - - function search() { - searchFlag.value = true; - } - function searchAll() { - searchAllFlag.value = true; - } - - // 数据过滤 - const filterData = computed(() => { - let data = cloneDeep(option.dataset); - option.filterset.forEach((filtersetItem) => { - // console.log(filtersetItem); - if ( - (filtersetItem.field && filtersetItem.value) || - (!filtersetItem.field && filtersetItem.showType == 'inputSearchAll') - ) { - switch (filtersetItem.compareType) { - // 大于 - case 'greater': - if (['timePicker'].includes(filtersetItem.showType)) { - data = data.filter( - (d) => - dayjs(d[filtersetItem.field], 'HH:mm:ss').diff( - dayjs(filtersetItem.value, 'HH:mm:ss'), - ) > 0, - ); - } else { - data = data.filter( - (d) => Number(d[filtersetItem.field]) > Number(filtersetItem.value), - ); - } - break; - // 小于 - case 'less': - if (['timePicker'].includes(filtersetItem.showType)) { - data = data.filter( - (d) => - dayjs(d[filtersetItem.field], 'HH:mm:ss').diff( - dayjs(filtersetItem.value, 'HH:mm:ss'), - ) < 0, - ); - } else { - data = data.filter( - (d) => Number(d[filtersetItem.field]) < Number(filtersetItem.value), - ); - } - break; - // 大于等于 - case 'greaterAndEqual': - if (['timePicker'].includes(filtersetItem.showType)) { - data = data.filter( - (d) => - dayjs(d[filtersetItem.field], 'HH:mm:ss').diff( - dayjs(filtersetItem.value, 'HH:mm:ss'), - ) >= 0, - ); - } else { - data = data.filter( - (d) => Number(d[filtersetItem.field]) >= Number(filtersetItem.value), - ); - } - break; - // 小于等于 - case 'lessAndEqual': - if (['timePicker'].includes(filtersetItem.showType)) { - data = data.filter( - (d) => - dayjs(d[filtersetItem.field], 'HH:mm:ss').diff( - dayjs(filtersetItem.value, 'HH:mm:ss'), - ) <= 0, - ); - } else { - data = data.filter( - (d) => Number(d[filtersetItem.field]) <= Number(filtersetItem.value), - ); - } - break; - // 等于 - case 'equal': - if (['checkbox'].includes(filtersetItem.showType)) { - // 多选框不选中时，不展示 - data = data.filter((d) => - filtersetItem.value.some((li) => d[filtersetItem.field].includes(li)), - ); - } else if (['selectGroup', 'buttonGroupList'].includes(filtersetItem.showType)) { - // 下拉框（多选）、按钮组（多选）不选中时，全展示 - if (filtersetItem.value.length > 0) { - data = data.filter((d) => - filtersetItem.value.some((li) => d[filtersetItem.field].includes(li)), - ); - } - } else { - // 其他统一 - data = data.filter((d) => d[filtersetItem.field] == filtersetItem.value); - } - break; - // 不等于 - case 'notequal': - if (['checkbox'].includes(filtersetItem.showType)) { - // 多选框不选中时，不展示 - data = data.filter((d) => - filtersetItem.value.some((li) => !d[filtersetItem.field].includes(li)), - ); - } else if (['selectGroup', 'buttonGroupList'].includes(filtersetItem.showType)) { - // 下拉框（多选）、按钮组（多选）不选中时，全展示 - if (filtersetItem.value.length > 0) { - data = data.filter((d) => - filtersetItem.value.some((li) => !d[filtersetItem.field].includes(li)), - ); - } - } else { - // 其他统一 - data = data.filter((d) => d[filtersetItem.field] !== filtersetItem.value); - } - break; - // 含有 - case 'contain': - if (['checkbox'].includes(filtersetItem.showType)) { - // 多选框不选中时，不展示 - data = data.filter((d) => - filtersetItem.value.some((li) => d[filtersetItem.field].includes(li)), - ); - } else if (['selectGroup', 'buttonGroupList'].includes(filtersetItem.showType)) { - // 下拉框（多选）、按钮组（多选）不选中时，全展示 - if (filtersetItem.value.length > 0) { - data = data.filter((d) => - filtersetItem.value.some((li) => d[filtersetItem.field].includes(li)), - ); - } - } else if (['inputSearch'].includes(filtersetItem.showType)) { - // 搜索框单独处理 - if (searchFlag.value) { - data = data.filter( - (d) => d[filtersetItem.field].indexOf(filtersetItem.value) !== -1, - ); - searchFlag.value = false; - } - } else if (['inputSearchAll'].includes(filtersetItem.showType)) { - // 全数据搜索框单独处理 - if (searchAllFlag.value) { - data = data.filter((d) => { - let flag = false; - option.header.some((headerLi) => { - if (d[headerLi.key]) { - flag = flag ? true : d[headerLi.key].includes(filtersetItem.value); - } - }); - return flag; - }); - searchAllFlag.value = false; - } - } else { - // 其他统一 - data = data.filter((d) => d[filtersetItem.field].indexOf(filtersetItem.value) !== -1); - } - break; - // 不含有 - case 'notcontain': - if (['checkbox'].includes(filtersetItem.showType)) { - // 多选框不选中时，不展示 - data = data.filter((d) => - filtersetItem.value.some((li) => !d[filtersetItem.field].includes(li)), - ); - } else if (['selectGroup', 'buttonGroupList'].includes(filtersetItem.showType)) { - // 下拉框（多选）、按钮组（多选）不选中时，全展示 - if (filtersetItem.value.length > 0) { - data = data.filter((d) => - filtersetItem.value.some((li) => !d[filtersetItem.field].includes(li)), - ); - } - } else { - // 其他统一 - data = data.filter((d) => d[filtersetItem.field].indexOf(filtersetItem.value) == -1); - } - break; - // 两者之间 - case 'between': - if (['timeRange'].includes(filtersetItem.showType)) { - data = data.filter((d) => { - const time = dayjs(d[filtersetItem.field], 'HH:mm:ss'); - const startTime = dayjs(filtersetItem.value, 'HH:mm:ss'); - const endTime = dayjs(filtersetItem.value2, 'HH:mm:ss'); - return time.diff(startTime) >= 0 && time.diff(endTime) <= 0; - }); - } - if (['dateRange'].includes(filtersetItem.showType)) { - data = data.filter((d) => { - const time = dayjs(d[filtersetItem.field], 'YYYY-MM-DD HH:mm:ss'); - const startTime = dayjs(filtersetItem.value[0], 'YYYY-MM-DD HH:mm:ss'); - const endTime = dayjs(filtersetItem.value[1], 'YYYY-MM-DD HH:mm:ss'); - return time.diff(startTime) >= 0 && time.diff(endTime) <= 0; - }); - } - break; + // 多选框-地图显示 + watch( + () => option.dataStyle.mapListValue, + (newValue) => { + // 水源 + if (newValue.includes('water')) { + mapListShow_water(); + } else { + if (waterGraphicLayerArr.length > 0) { + waterGraphicLayerArr?.forEach((graphicLayer) => { + waterGraphicLayers.removeGraphic(graphicLayer); + }); } } + // 物资 + if (newValue.includes('goods')) { + mapListShow_goods(); + } else { + if (goodsGraphicLayerArr.length > 0) { + goodsGraphicLayerArr?.forEach((graphicLayer) => { + goodsGraphicLayers.removeGraphic(graphicLayer); + }); + } + } + // 营房 + if (newValue.includes('barrack')) { + mapListShow_barrack(); + } else { + if (barrackGraphicLayerArr.length > 0) { + barrackGraphicLayerArr?.forEach((graphicLayer) => { + barrackGraphicLayers.removeGraphic(graphicLayer); + }); + } + } + // // 防火通道 + // if (newValue.includes('fanghuotongdao')) { + // } + // // 三轮通道 + // if (newValue.includes('sanluntongdao')) { + // } + // // 步行道 + // if (newValue.includes('buxingdao')) { + // } + }, + { + immediate: true, + deep: true, + }, + ); + watch( + () => option.status.hide, + () => { + if (option.status.hide) { + // 表格隐藏，则删除地图的数据 + hideMapGraphicLayer(); + } else { + // 表格展示，则显示地图的数据 + if (waterGraphicLayerArr.length > 0) { + mapListShow_water(); + } + if (goodsGraphicLayerArr.length > 0) { + mapListShow_goods(); + } + if (barrackGraphicLayerArr.length > 0) { + mapListShow_barrack(); + } + } + }, + ); + + // 水源 + function mapListShow_water() { + setTimeout(() => { + let data: any = source.filter((item) => parseInt(item.type) == 0); + // 删除旧数据 + waterGraphicLayerArr?.forEach((graphicLayer) => { + waterGraphicLayers.removeGraphic(graphicLayer); + }); + // 图层 + window.globalMap.addLayer(waterGraphicLayers); + // 图层数据 + waterGraphicLayerArr = []; + data.forEach((dataItem, dataIndex) => { + let waterGraphic = new mars3d.graphic.BillboardEntity({ + id: 'ZhiChu_ModalTable' + '_water_' + dataIndex + '_' + dataItem.id, + position: [parseFloat(dataItem.lng), parseFloat(dataItem.lat)], + style: { + image: '/src/assets/images/chart/zhichu/component/TuLi_ShuiYuan.png', + clampToGround: true, + scale: 1, + }, + }); + + // 绑定点击事件 + waterGraphic.on('click', (event) => { + const graphic = event.graphic; // 获取被点击的图形对象 + const attributes = graphic.options; // 获取图形的属性 + // console.log(attributes); + + // 动态生成弹窗内容 + const popupContent = ` +
+

信息

+

ID: ${attributes.id}

+

经度: ${attributes.position[0]}

+

纬度: ${attributes.position[1]}

+
+ `; + // // 显示弹窗 + // window.globalMap.openPopup({ + // content: popupContent, + // location: [118.02841, 35.417686], // 弹窗位置 + // }); + }); + + // 将新图形添加到图层中 + waterGraphicLayers.addGraphic(waterGraphic); + waterGraphicLayerArr.push(waterGraphic); + }); + }, 1000); + } + // 物资 + function mapListShow_goods() { + setTimeout(() => { + let data: any = source.filter((item) => parseInt(item.type) == 1); + // 删除旧数据 + goodsGraphicLayerArr?.forEach((graphicLayer) => { + goodsGraphicLayers.removeGraphic(graphicLayer); + }); + // 图层 + window.globalMap.addLayer(goodsGraphicLayers); + // 图层数据 + goodsGraphicLayerArr = []; + data.forEach((dataItem, dataIndex) => { + let goodsGraphic = new mars3d.graphic.BillboardEntity({ + id: 'ZhiChu_ModalTable' + '_goods_' + dataIndex + '_' + data.id, + position: [parseFloat(dataItem.lng), parseFloat(dataItem.lat)], + style: { + image: '/src/assets/images/chart/zhichu/component/TuLi_WuZi.png', + clampToGround: true, + scale: 1, + }, + }); + goodsGraphicLayerArr.push(goodsGraphic); + goodsGraphicLayers.addGraphic(goodsGraphic); + }); + }, 1000); + } + // 营房 + function mapListShow_barrack() { + setTimeout(() => { + let data: any = source.filter((item) => parseInt(item.type) == 2); + // 删除旧数据 + barrackGraphicLayerArr?.forEach((graphicLayer) => { + barrackGraphicLayers.removeGraphic(graphicLayer); + }); + // 图层 + window.globalMap.addLayer(barrackGraphicLayers); + // 图层数据 + barrackGraphicLayerArr = []; + data.forEach((dataItem, dataIndex) => { + let barrackGraphic = new mars3d.graphic.BillboardEntity({ + id: 'ZhiChu_ModalTable' + '_barrack_' + dataIndex + '_' + data.id, + position: [parseFloat(dataItem.lng), parseFloat(dataItem.lat)], + style: { + image: '/src/assets/images/chart/zhichu/component/TuLi_YingFang.png', + clampToGround: true, + scale: 1, + }, + }); + barrackGraphicLayerArr.push(barrackGraphic); + barrackGraphicLayers.addGraphic(barrackGraphic); + }); + }, 1000); + } + + // 删除地图的数据 + function hideMapGraphicLayer() { + if (waterGraphicLayerArr.length > 0) { + waterGraphicLayerArr?.forEach((graphicLayer) => { + waterGraphicLayers.removeGraphic(graphicLayer); + }); + } + if (goodsGraphicLayerArr.length > 0) { + goodsGraphicLayerArr?.forEach((graphicLayer) => { + goodsGraphicLayers.removeGraphic(graphicLayer); + }); + } + if (barrackGraphicLayerArr.length > 0) { + barrackGraphicLayerArr?.forEach((graphicLayer) => { + barrackGraphicLayers.removeGraphic(graphicLayer); + }); + } + } + + // 移动位置 + let startCoor: any; + function moveLocation(lngLat) { + // window.globalMap.flyToGraphic(lngLat); + startCoor = lngLat; + window.globalMap.flyToPoint(lngLat, { + alt: 4269.7, + heading: 359.2, + pitch: -51.9, }); - return data; - }); - - // 筛选-按钮点击事件 - function clickFilterButton(item, buttonItem) { - if (item.value == buttonItem.value) { - item.value = ''; - } else { - item.value = buttonItem.value; - } } - // 筛选-按钮点击事件（多选） - function clickFilterButtonList(item, buttonItem) { - if (!item.value) { - item.value = []; - } - if (item.value.includes(buttonItem.value)) { - item.value.splice(item.value.indexOf(buttonItem.value), 1); - } else { - item.value.push(buttonItem.value); - } + // 漫游 + async function roamLocation(startCoor) { + let endCoor = [118.031528, 35.431473]; + let params: any = { + startlng: parseFloat(startCoor[0]), + startlat: parseFloat(startCoor[1]), + endlng: parseFloat(endCoor[0]), + endlat: parseFloat(endCoor[1]), + areaname: 'feixian', + }; + getRouterFunc(params) + .then((res) => { + handlerStopRoaming(); + drawRouterFunc(res); + handlerStartRoaming(res.allCoordinates, false); + }) + .catch((err) => { + clearRouterFunc(); + }); } - // 数据转换 - function convertData(header, data) { - let prefix = header.prefix ? header.prefix : ''; - let suffix = header.suffix ? header.suffix : ''; - let convertData = data[header.key]; - - // 小数点保留后两位 - if (convertData && header.convert == '0' && isValidNumber(convertData)) { - convertData = - typeof convertData === 'string' - ? String(parseFloat(convertData).toFixed(2)) - : String(convertData.toFixed(2)); - } - // 转换时间格式（例：0小时0分钟0秒） - if (convertData && header.convert == '1' && isValidTime(convertData)) { - convertData = - dayjs(convertData, 'HH:mm:ss').hour() + - '小时' + - dayjs(convertData, 'HH:mm:ss').minute() + - '分钟' + - dayjs(convertData, 'HH:mm:ss').second() + - '秒'; - } - // 转换日期格式（例：YYYY-MM-DD HH:mm:ss） - let format = 'YYYY-MM-DD HH:mm:ss'; - if (header.convert == '2') { - format = 'YYYY-MM-DD'; - } - if (header.convert == '3') { - format = 'YYYY/MM/DD'; - } - if ( - convertData && - ['2', '3', '4'].includes(header.convert) && - isValidDate(convertData, format) - ) { - convertData = dayjs(convertData).format(format); - } - return prefix + convertData + suffix; - } - - // 检查字符串可否转成数字 - function isValidNumber(str) { - const regex = /^-?\d+(\.\d+)?$/; - return regex.test(String(str).trim()); - } - // 检查字符串可否转成时间 - function isValidTime(str) { - const parsedDate = dayjs(str, 'HH:mm:ss'); - if (parsedDate.isValid()) { - return true; - } else { - return false; - } - } - // 检查字符串可否转成日期 - function isValidDate(str, format) { - const parsedDate = dayjs(str, format); - if (parsedDate.isValid()) { - return true; - } else { - return false; - } - } - - // 表格按钮方法 - function pitchLocation(dataItem, dataIndex) {} - - function moveLocation(dataItem, dataIndex) {} - // setdata 数据监听与更改 useChartDataFetch(props.chartConfig, useChartEditStore, (newData: any) => { props.chartConfig.option.dataset = newData; @@ -740,7 +497,7 @@ height: v-bind('`${option.dataStyle.filterChooseFontSize}px`') !important; } - .filterContentFont_nochoose { + .nochoose { background: #1c211f; color: #18d09d; border: 1px solid #18d09d; @@ -750,8 +507,9 @@ border-radius: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`'); text-align: center; line-height: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`'); + margin-right: v-bind('`${option.dataStyle.filterTitleFontSize}px`'); } - .filterContentFont_choose { + .choose { background: #26d1ad; color: #0d2822; font-size: v-bind('`${option.dataStyle.filterChooseFontSize}px`'); @@ -760,64 +518,19 @@ border-radius: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`'); text-align: center; line-height: v-bind('`${option.dataStyle.filterChooseFontSize + 12}px`'); + margin-right: v-bind('`${option.dataStyle.filterTitleFontSize}px`'); } - // 表头 - .theadDiv { - margin-top: v-bind('`${option.dataStyle.tableMarginTop}px`'); - padding-left: v-bind('`${option.dataStyle.tableMarginLeft}px`'); - padding-right: v-bind('`${option.dataStyle.tableMarginLeft}px`'); + .popup { + background: white; + padding: 10px; + border-radius: 5px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } - // 表格部分 - .tbodyDiv { - overflow-y: auto; + + .dataDiv { height: v-bind( - '`${h - headHeight - option.dataStyle.filterMarginTop - option.dataStyle.filterItemHeight * option.filterset.length - option.dataStyle.tableMarginTop}px`' + '`${h - option.dataStyle.filterMarginTop - filterDivHeight - option.dataStyle.tableMarginTop}px`' ); - padding-left: v-bind('`${option.dataStyle.tableMarginLeft}px`'); - padding-right: v-bind('`${option.dataStyle.tableMarginLeft}px`'); - } - .tbodyDiv::-webkit-scrollbar { - display: none; - } - .tbodyDiv { - scrollbar-width: none; - -ms-overflow-style: none; - } - - .th { - background: v-bind('`${option.dataStyle.tableHeaderBackgroud}`'); - text-align: v-bind('`${option.dataStyle.tableAlign}`'); - color: v-bind('`${option.dataStyle.tableHeaderFontColor}`'); - font-size: v-bind('`${option.dataStyle.tableHeaderFontSize}px`'); - } - td { - text-align: v-bind('`${option.dataStyle.tableAlign}`'); - background: #ffffff00; - color: v-bind('`${option.dataStyle.tableDataFontColor}`'); - font-size: v-bind('`${option.dataStyle.tableDataFontSize}px`'); - border-bottom: 0px; - } - .td_background { - background: v-bind('`${option.dataStyle.tableDataBackgroud}`'); - } - .td_image1 { - background-image: url('@/assets/images/chart/zhichu/component/ModalTable_td1.png'); - background-size: 100% 100%; - } - .td_image2 { - background-image: url('@/assets/images/chart/zhichu/component/ModalTable_td2.png'); - background-size: 100% 100%; - } - - .buttonDiv { - display: flex; - align-items: v-bind('`${option.dataStyle.tableAlign}`'); - justify-content: center; - width: v-bind('`${option.dataStyle.buttonDivWidth}px`'); - } - - .buttonDivspan { - color: #00611a; } diff --git a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/source/barrack.vue b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/source/barrack.vue new file mode 100644 index 0000000..c9b5af7 --- /dev/null +++ b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/source/barrack.vue @@ -0,0 +1,158 @@ + + + + + diff --git a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/source/button1.vue b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/source/button1.vue new file mode 100644 index 0000000..cf3707e --- /dev/null +++ b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/source/button1.vue @@ -0,0 +1,96 @@ + + + diff --git a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/svg/button2.vue b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/source/button2.vue similarity index 97% rename from src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/svg/button2.vue rename to src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/source/button2.vue index ccb6647..041b56a 100644 --- a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/svg/button2.vue +++ b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/source/button2.vue @@ -1,8 +1,8 @@ + + + + diff --git a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/source/water.vue b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/source/water.vue new file mode 100644 index 0000000..4af3299 --- /dev/null +++ b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/source/water.vue @@ -0,0 +1,282 @@ + + + + + diff --git a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/ts/handleGeojson.ts b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/ts/handleGeojson.ts new file mode 100644 index 0000000..c5b5e37 --- /dev/null +++ b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/ts/handleGeojson.ts @@ -0,0 +1,226 @@ +var numberRegexp = /[-+]?([0-9]*\.[0-9]+|[0-9]+)([eE][-+]?[0-9]+)?/; +// Matches sequences like '100 100' or '100 100 100'. +var tuples = new RegExp('^' + numberRegexp.source + '(\\s' + numberRegexp.source + '){1,}'); +/* + * Parse WKT and return GeoJSON. + * + * @param {string} _ A WKT geometry + * @return {?Object} A GeoJSON geometry object + */ +function parse(input) { + if (!input) { + return { + "coordinates": [], + "type": "LineString" + } + } + var parts = input.split(';'); + var _ = parts.pop(); + var srid = (parts.shift() || '').split('=').pop(); + + var i = 0; + + function $(re) { + var match = _.substring(i).match(re); + if (!match) return null; + else { + i += match[0].length; + return match[0]; + } + } + + function crs(obj) { + if (obj && srid.match(/\d+/)) { + obj.crs = { + type: 'name', + properties: { + name: 'urn:ogc:def:crs:EPSG::' + srid + } + }; + } + + return obj; + } + + function white() { $(/^\s*/); } + + function multicoords() { + white(); + var depth = 0; + var rings = []; + var stack = [rings]; + var pointer = rings; + var elem; + + while (elem = + $(/^(\()/) || + $(/^(\))/) || + $(/^(,)/) || + $(tuples)) { + if (elem === '(') { + stack.push(pointer); + pointer = []; + stack[stack.length - 1].push(pointer); + depth++; + } else if (elem === ')') { + // For the case: Polygon(), ... + if (pointer.length === 0) return null; + + pointer = stack.pop(); + // the stack was empty, input was malformed + if (!pointer) return null; + depth--; + if (depth === 0) break; + } else if (elem === ',') { + pointer = []; + stack[stack.length - 1].push(pointer); + } else if (!elem.split(/\s/g).some(isNaN)) { + Array.prototype.push.apply(pointer, elem.split(/\s/g).map(parseFloat)); + } else { + return null; + } + white(); + } + + if (depth !== 0) return null; + + return rings; + } + + function coords() { + var list = []; + var item; + var pt; + while (pt = + $(tuples) || + $(/^(,)/)) { + if (pt === ',') { + list.push(item); + item = []; + } else if (!pt.split(/\s/g).some(isNaN)) { + if (!item) item = []; + Array.prototype.push.apply(item, pt.split(/\s/g).map(parseFloat)); + } + white(); + } + + if (item) list.push(item); + else return null; + + return list.length ? list : null; + } + + function point() { + if (!$(/^(point(\sz)?)/i)) return null; + white(); + if (!$(/^(\()/)) return null; + var c = coords(); + if (!c) return null; + white(); + if (!$(/^(\))/)) return null; + return { + type: 'Point', + coordinates: c[0] + }; + } + + function multipoint() { + if (!$(/^(multipoint)/i)) return null; + white(); + var newCoordsFormat = _ + .substring(_.indexOf('(') + 1, _.length - 1) + .replace(/\(/g, '') + .replace(/\)/g, ''); + _ = 'MULTIPOINT (' + newCoordsFormat + ')'; + var c = multicoords(); + if (!c) return null; + white(); + return { + type: 'MultiPoint', + coordinates: c + }; + } + + function multilinestring() { + if (!$(/^(multilinestring)/i)) return null; + white(); + var c = multicoords(); + if (!c) return null; + white(); + return { + type: 'MultiLineString', + coordinates: c + }; + } + + function linestring() { + if (!$(/^(linestring(\sz)?)/i)) return null; + white(); + if (!$(/^(\()/)) return null; + var c = coords(); + if (!c) return null; + if (!$(/^(\))/)) return null; + return { + type: 'LineString', + coordinates: c + }; + } + + function polygon() { + if (!$(/^(polygon(\sz)?)/i)) return null; + white(); + var c = multicoords(); + if (!c) return null; + return { + type: 'Polygon', + coordinates: c + }; + } + + function multipolygon() { + if (!$(/^(multipolygon)/i)) return null; + white(); + var c = multicoords(); + if (!c) return null; + return { + type: 'MultiPolygon', + coordinates: c + }; + } + + function geometrycollection() { + var geometries = []; + var geometry; + + if (!$(/^(geometrycollection)/i)) return null; + white(); + + if (!$(/^(\()/)) return null; + while (geometry = root()) { + geometries.push(geometry); + white(); + $(/^(,)/); + white(); + } + if (!$(/^(\))/)) return null; + + return { + type: 'GeometryCollection', + geometries: geometries + }; + } + + function root() { + return point() || + linestring() || + polygon() || + multipoint() || + multilinestring() || + multipolygon() || + geometrycollection(); + } + + return crs(root()); +} + +export { parse } \ No newline at end of file diff --git a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/ts/routePath.ts b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/ts/routePath.ts new file mode 100644 index 0000000..694409b --- /dev/null +++ b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/ts/routePath.ts @@ -0,0 +1,742 @@ +import axios from "axios"; +import { gcj02towgs84, wgs84togcj02 } from 'coordtransform' +import * as turf from '@turf/turf' +import { Url } from "./urlFormat"; +import { getAppEnvConfig } from '@/utils/env'; +import * as mars3d from 'mars3d'; +import { parse } from "./handleGeojson"; +import { cloneDeep } from 'lodash-es'; + +const urls = new Url() +const GD_URL = "https://restapi.amap.com/v5/direction/driving" +const GD_KEY = "6af6a87038f44c8c793aa70331f2b7ca" +const { VITE_GLOB_API_URL } = getAppEnvConfig(); + + + +//路线的图层 +let pathGraphicLayers: any = null +let pathOneGraphicLayers: any = null +let pathWaterGraphicLayers: any = null +let pathRoadGraphicLayers: any = null +let pathRoadGraphicLayers1: any = null +let pathRoadGraphicLayers2: any = null + + + +//导航寻路 +export const getRouterFunc = (params, method = 'all') => { + /** + * method： + * 当为 postgis时，仅仅使用postgis导航 + * 默认：all :高德 + postgis + * gaode:高德 + */ + let { startlng, startlat, endlng, endlat } = params + + if (method == 'postgis') { + //使用gpostgis进行导航 + return new Promise((resolve, reject) => { + let postgisParams = { + startlng: startlng, + startlat: startlat, + endlng: endlng, + endlat: endlat, + areaname: 'feixian', + } + getRouterByPostGis(postgisParams).then(geojson => { + //postGisCoordinates:postgis返回的geojson取出坐标数组 + let postGisCoordinates = getOneLineCoordinatesFromGeometry(geojson) + let startRouterLngLat = postGisCoordinates[0] + let endRouterLngLat = postGisCoordinates.at(-1) + let resObject = { + allCoordinates: postGisCoordinates, //全部线路的合集 + postGisRoute: postGisCoordinates, // postgis线路 + gdRoute: [], + startLngLat: [startlng, startlat], // 起点 + endLngLat: [endlng, endlat], //终点 + startRouterLngLat: startRouterLngLat, // 路线查询结果的起点 + endRouterLngLat: endRouterLngLat, //路线查询结果的终点 + } + let simpleRoute = getMinimumRoute(resObject) + resolve(simpleRoute) + }) + }).catch(err => { + + }) + } + if (method == 'all') { + // 先用高德进行导航 + return new Promise((resolve, reject) => { + getRouterByGD(params).then(solution => { + // solution 为多条线路的数组，现在先用第一条线路 solution.path[0] + let gdRoute = solution.path[0] + let postgisParams = { + startlng: gdRoute.endCoordinates[0], + startlat: gdRoute.endCoordinates[1], + endlng: endlng, + endlat: endlat, + areaname: 'feixian', + } + //使用gpostgis求出剩下的路线 + getRouterByPostGis(postgisParams).then(geojson => { + //postGisCoordinates:postgis返回的geojson取出坐标数组 + let postGisCoordinates = getOneLineCoordinatesFromGeometry(geojson) + // 高德返回的第一条线路的坐标数组 + let path_gd = gdRoute.path_polyline + //合并高德和postgis的路线 + let allCoordinates = path_gd.concat(postGisCoordinates) + //导航线路的起点和终点 + let startRouterLngLat = allCoordinates[0] + let endRouterLngLat = allCoordinates.at(-1) + let resObject = { + allCoordinates: allCoordinates, //全部线路 + gdRoute: path_gd, //高德的线路 + postGisRoute: postGisCoordinates, // postgis的线路 + startLngLat: [startlng, startlat], // 起点 + endLngLat: [endlng, endlat], //终点 + startRouterLngLat: startRouterLngLat, // 路线查询结果的起点 + endRouterLngLat: endRouterLngLat, //路线查询结果的终点 + } + let simpleRoute = getMinimumRoute(resObject) + resolve(simpleRoute) + }) + }) + }) + } +} + + + + +//高德路线导航 +export const getRouterByGD = (params) => { + /** + * type:Object + */ + let { startlng, startlat, endlng, endlat } = params + //wgs84转火星坐标系 + var gcj02StartLngLat = wgs84togcj02(startlng, startlat); + var gcj02EndLngLat = wgs84togcj02(endlng, endlat); + let gd_params = { + origin: `${gcj02StartLngLat[0]},${gcj02StartLngLat[1]}`, + destination: `${gcj02EndLngLat[0]},${gcj02EndLngLat[1]}`, + show_fields: 'polyline', + key: GD_KEY, + strategy:2 + } + let new_url = urls.getUrl(GD_URL, gd_params) + return new Promise((resolve, reject) => { + axios({ + method: "get", + url: new_url, + }).then((res) => { + if (res.status === 200) { + let solution = [] + //处理数据 + res.data.route.paths.map(path => { + let route_len = path.distance + let path_polyline = path.steps.map(step => { + return step.polyline + }) + let router_path_str = [] //暂时存放 ['117.927498,35.263264'] + path_polyline.forEach(polyline => { + let step = polyline.split(';') + router_path_str = router_path_str.concat(step) + }); + // 去掉重复点 + let unique_router_path_str = [...new Set(router_path_str)] + // 坐标转数组 + let unique_router_path = unique_router_path_str.map(path_str => { + let lng_lat_list = path_str.split(',') + //高德坐标系转wgs84坐标系 + var wgs84Coordinate = gcj02towgs84(...lng_lat_list); + return wgs84Coordinate + }) + //高德导航的起点和终点 + let startCoordinates = unique_router_path[0] + let endCoordinates = unique_router_path.at(-1) + // 高德地图返回的结果：方案一。长度，线 + solution.push( + { + route_len: route_len, + path_polyline: unique_router_path, + startCoordinates: startCoordinates, + endCoordinates: endCoordinates + } + ) + }) + let result = { + routerCount: parseInt(res.data.count), + path: solution + } + resolve(result) + } else { + reject(res) + } + }).catch(err => { + reject(err) + }) + }) +} + +//使用postgres + postgis寻路 +export const getRouterByPostGis = (params) => { + return new Promise((resolve, reject) => { + axios.get("http://221.2.83.254:9001/api/FirePrevention/LoadRoad" + + "?startlng=" + params.startlng + + "&startlat=" + params.startlat + + "&endlng=" + params.endlng + + "&endlat=" + params.endlat + + "&areaname=" + params.areaname + ).then((res) => { + if (res.data.length > 0) { + console.log('res.data::: ', res.data); + let LineString = res.data[0].route; + if (LineString == null || LineString == "null") { + //没有找到路线，返回空 + console.log('PostGIS未找到合适了路线') + resolve(parse(null)) + } else { + resolve(parse(LineString)) + } + } else { + console.log('PostGIS未找到合适了路线') + resolve(parse(null)) + } + }).catch(err => { + console.log('PostGIS寻路算法服务端错误') + resolve(parse(null)) + }) + }) +} + +// 绘制线路 +export const drawRouterFunc = (pathObject) => { + let { allCoordinates, startLngLat, endLngLat, startRouterLngLat, endRouterLngLat, gdRoute, postGisRoute } = pathObject + // 添加graphic + if (pathGraphicLayers == null) { + pathGraphicLayers = new mars3d.layer.GraphicLayer(); + window.globalMap.addLayer(pathGraphicLayers); + } else { + // pathGraphicLayers.clear(); + } + //当只有两组数据时，说明没有导航的路线，直接使用虚线连接 + + if (allCoordinates.length == 2) { + //只绘制开头到结尾的路线的路段 + let endPathGraphic = drawPolylineDashEntity([startLngLat, endLngLat], 'YELLOW') + pathGraphicLayers.addGraphic(endPathGraphic); + } else { + // 导航数据路段 + // let gdPathGraphic = drawLineFlowEntity(gdRoute, 'YELLOW',10) + // let postgisPathGraphic = drawLineFlowEntity(postGisRoute, 'RED',10) + let pathGraphic = drawLineFlowEntity(allCoordinates, '#E6472B') + + //开始的路段 + let startPathGraphic = drawPolylineDashEntity([startLngLat, startRouterLngLat], 'YELLOW') + + //结尾的路段 + let endPathGraphic = drawPolylineDashEntity([endRouterLngLat, endLngLat], 'YELLOW') + + // pathGraphicLayers.addGraphic(gdPathGraphic); + // pathGraphicLayers.addGraphic(postgisPathGraphic); + pathGraphicLayers.addGraphic(pathGraphic); + pathGraphicLayers.addGraphic(startPathGraphic); + pathGraphicLayers.addGraphic(endPathGraphic); + } +} + +// 绘制线路 +export const drawRoutersFunc = (pathObject) => { + let { allCoordinates, startLngLat, endLngLat, startRouterLngLat, endRouterLngLat, gdRoute, postGisRoute } = pathObject + // 添加graphic + if (pathGraphicLayers == null) { + pathGraphicLayers = new mars3d.layer.GraphicLayer(); + window.globalMap.addLayer(pathGraphicLayers); + } else { + + } + //当只有两组数据时，说明没有导航的路线，直接使用虚线连接 + + if (allCoordinates.length == 2) { + //只绘制开头到结尾的路线的路段 + // let endPathGraphic = drawPolylineDashEntity([startLngLat, endLngLat], 'YELLOW') + // pathGraphicLayers.addGraphic(endPathGraphic); + } else { + // 导航数据路段 + // let gdPathGraphic = drawLineFlowEntity(gdRoute, 'YELLOW',10) + // let postgisPathGraphic = drawLineFlowEntity(postGisRoute, 'RED',10) + let pathGraphic = drawLineFlowEntityColor(allCoordinates, '#E6472B') + + //开始的路段 + // let startPathGraphic = drawPolylineDashEntity([startLngLat, startRouterLngLat], 'YELLOW') + + //结尾的路段 + // let endPathGraphic = drawPolylineDashEntity([endRouterLngLat, endLngLat], 'YELLOW') + let endPathGraphic = drawPolylineEntity([endRouterLngLat, endLngLat], 'YELLOW') + + + // pathGraphicLayers.addGraphic(gdPathGraphic); + // pathGraphicLayers.addGraphic(postgisPathGraphic); + pathGraphicLayers.addGraphic(pathGraphic); + // pathGraphicLayers.addGraphic(startPathGraphic); + pathGraphicLayers.addGraphic(endPathGraphic); + } +} + +export const drawRoutersFuncWaterGrid = (pathObject) => { + let { pointArr } = pathObject + // 添加graphic + if (pathWaterGraphicLayers == null) { + pathWaterGraphicLayers = new mars3d.layer.GraphicLayer(); + window.globalMap.addLayer(pathWaterGraphicLayers); + } else { + + } + //当只有两组数据时，说明没有导航的路线，直接使用虚线连接 + + if (pointArr.length == 2) { + + } else { + // 导航数据路段 + let pathGraphic + pathGraphic = drawLineFlowEntityColor2(pointArr, '#56C3F9') + + pathWaterGraphicLayers.addGraphic(pathGraphic); + + } +} +export const drawRoutersFuncGrid = (pathObject) => { + let { pointArr, Type } = pathObject + // 添加graphic + if (pathRoadGraphicLayers == null) { + pathRoadGraphicLayers = new mars3d.layer.GraphicLayer(); + window.globalMap.addLayer(pathRoadGraphicLayers); + } + //当只有两组数据时，说明没有导航的路线，直接使用虚线连接 + + if (pointArr.length == 2) { + + } else { + // 导航数据路段 + + let pathGraphic; + pathGraphic = drawLineFlowEntityColor1(pointArr, '#E6472B') + pathRoadGraphicLayers.addGraphic(pathGraphic); + } +} +export const drawRoutersFuncGrid1 = (pathObject) => { + let { pointArr, Type } = pathObject + // 添加graphic + if (pathRoadGraphicLayers1 == null) { + pathRoadGraphicLayers1 = new mars3d.layer.GraphicLayer(); + window.globalMap.addLayer(pathRoadGraphicLayers1); + } + //当只有两组数据时，说明没有导航的路线，直接使用虚线连接 + + if (pointArr.length == 2) { + + } else { + // 导航数据路段 + let pathGraphic1; + pathGraphic1 = drawLineFlowEntityColor2(pointArr, '#1F5FDE') + pathRoadGraphicLayers1.addGraphic(pathGraphic1); + + } +} +export const drawRoutersFuncGrid2 = (pathObject) => { + let { pointArr, Type } = pathObject + // 添加graphic + if (pathRoadGraphicLayers2 == null) { + pathRoadGraphicLayers2 = new mars3d.layer.GraphicLayer(); + window.globalMap.addLayer(pathRoadGraphicLayers2); + } + //当只有两组数据时，说明没有导航的路线，直接使用虚线连接 + + if (pointArr.length == 2) { + + } else { + // 导航数据路段 + let pathGraphic2; + pathGraphic2 = drawLineFlowEntityColor2(pointArr, '#9C9C9C') + pathRoadGraphicLayers2.addGraphic(pathGraphic2); + + } +} + + +// 高亮路线 +export const drawOneRouterFunc = (pathObject) => { + let { allCoordinates, startLngLat, endLngLat, startRouterLngLat, endRouterLngLat, gdRoute, postGisRoute } = pathObject + // 添加graphic + if (pathOneGraphicLayers == null) { + pathOneGraphicLayers = new mars3d.layer.GraphicLayer(); + window.globalMap.addLayer(pathOneGraphicLayers); + } else { + pathOneGraphicLayers.clear(); + } + //当只有两组数据时，说明没有导航的路线，直接使用虚线连接 + + if (allCoordinates.length == 2) { + //只绘制开头到结尾的路线的路段 + let endPathGraphic = drawPolylineDashEntity([startLngLat, endLngLat], 'YELLOW') + pathOneGraphicLayers.addGraphic(endPathGraphic); + } else { + // 导航数据路段 + // let gdPathGraphic = drawLineFlowEntity(gdRoute, 'YELLOW',10) + // let postgisPathGraphic = drawLineFlowEntity(postGisRoute, 'RED',10) + let pathGraphic = drawLineFlowEntity(allCoordinates, 'CYAN') + + //开始的路段 + // let startPathGraphic = drawPolylineDashEntity([startLngLat, startRouterLngLat], 'YELLOW') + + //结尾的路段 + // let endPathGraphic = drawPolylineDashEntity([endRouterLngLat, endLngLat], 'YELLOW') + + // pathGraphicLayers.addGraphic(gdPathGraphic); + // pathGraphicLayers.addGraphic(postgisPathGraphic); + pathOneGraphicLayers.addGraphic(pathGraphic); + // pathGraphicLayers.addGraphic(startPathGraphic); + // pathGraphicLayers.addGraphic(endPathGraphic); + } +} + +// 生成虚线实体 +const drawPolylineDashEntity = (positions, cesiumColor,width=5) => { + return new mars3d.graphic.PolylineEntity({ + positions: positions, + style: { + width: width, + clampToGround: true, + materialType: mars3d.MaterialType.PolylineDash, + materialOptions: { + color: '#FFFF00', + dashLength: 8.0, + }, + }, + }); +} + +const drawPolylineEntity = (positions, cesiumColor,width=5) => { + return new mars3d.graphic.PolylineEntity({ + positions: positions, + style: { + width: width, + clampToGround: true, + // materialType: mars3d.MaterialType.PolylineDash, + materialOptions: { + color: '#FF0000', + // dashLength: 8.0, + }, + }, + }); +} + +// 生成动态线实体 +const drawLineFlowEntity = (positions, cesiumColor,width=5) => { + return new mars3d.graphic.PolylineEntity({ + positions: positions, + style: { + width: width, + clampToGround: true, + materialType: mars3d.MaterialType.LineFlowColor, + materialOptions: { + color: cesiumColor, + speed: 1000, + percent: 1, + alpha: 1 + }, + }, + }); +} + +const drawLineFlowEntityColor = (positions, cesiumColor,width=5) => { + return new mars3d.graphic.PolylineEntity({ + positions: positions, + style: { + width: width, + clampToGround: true, + materialType: mars3d.MaterialType.LineFlowColor, + materialOptions: { + color: cesiumColor, + speed: 1000, + percent: 1, + alpha: 1 + }, + }, + }); +} +const drawLineFlowEntityColor1 = (positions, cesiumColor,width=5) => { + return new mars3d.graphic.PolylineEntity({ + positions: positions, + style: { + width: width, + clampToGround: true, + materialType: mars3d.MaterialType.LineFlowColor, + materialOptions: { + color: cesiumColor, + speed: 1000, + percent: 1, + alpha: 1 + }, + }, + }); +} + +const drawLineFlowEntityColor2 = (positions, cesiumColor,width=5) => { + return new mars3d.graphic.PolylineEntity({ + positions: positions, + style: { + width: width, + clampToGround: true, + materialType: mars3d.MaterialType.LineFlowColor, + materialOptions: { + color: cesiumColor, + speed: 1000, + percent: 1, + alpha: 1 + }, + }, + }); +} + + + +//删除路线 +export const clearRouterFunc = () => { + if (pathGraphicLayers == null) { + return false + } else { + pathGraphicLayers.clear(); + } + + + if (pathOneGraphicLayers == null) { + return false + } else { + pathOneGraphicLayers.clear(); + + } +} +//删除水网路线 +export const clearWaterRouterFunc = () => { + if (pathWaterGraphicLayers == null) { + return false + } else { + pathWaterGraphicLayers.clear(); + } +} +//删除路网路线 +export const clearRoadRouterFunc = () => { + if (pathRoadGraphicLayers == null) { + return false + } else { + pathRoadGraphicLayers.clear(); + } +} +export const clearRoadRouterFunc1 = () => { + if (pathRoadGraphicLayers1 == null) { + return false + } else { + pathRoadGraphicLayers1.clear(); + } +} +export const clearRoadRouterFunc2 = () => { + if (pathRoadGraphicLayers2 == null) { + return false + } else { + pathRoadGraphicLayers2.clear(); + } +} + +//计算最近路线 +const getMinimumRoute = (pathObject) => { + //备份Object + let pathObjectClone = cloneDeep(pathObject) + let { allCoordinates, startLngLat, endLngLat, startRouterLngLat, endRouterLngLat, gdRoute, postGisRoute } = pathObjectClone + // 当只有一个点时（终点），说明高德地图和postgis都未查询到线路，直接返回两点 + if (allCoordinates.length <= 1) { + pathObjectClone.allCoordinates = [startLngLat, endLngLat] + return pathObjectClone + } + //当postgis寻路时，计算两条线路的重叠之处 + if (postGisRoute.length && gdRoute.length) { + //实例化turf标准格式 + let gdRouteLine = turf.lineString(gdRoute); + let postGisRouteLine = turf.lineString(postGisRoute); + //获取postgis和高德寻路的所有交点 + let intersectsGeojson = turf.lineIntersect(gdRouteLine, postGisRouteLine); + let intersectsCoordinates = getMultPointCoordinatesFromGeoJson(intersectsGeojson) + //如果相交点大于1，说明路线有重复部分 + if (intersectsCoordinates.length > 1) { + let lastIntersectsCoordinates = intersectsCoordinates[0] + let [slicedGdCoordinates, slicedPostGisCoordinates] = sliceByPoint(startRouterLngLat, gdRouteLine, endRouterLngLat, postGisRoute, lastIntersectsCoordinates) + allCoordinates = slicedGdCoordinates.concat(slicedPostGisCoordinates) + //处理后的结果赋值给pathObjectClone + pathObjectClone.gdRoute = slicedGdCoordinates + pathObjectClone.postGisRoute = slicedPostGisCoordinates + gdRouteLine = turf.lineString(slicedGdCoordinates); + postGisRouteLine = turf.lineString(slicedPostGisCoordinates); + } + // 阈值计算重复路线，去除重复线路 + let overlapping = turf.lineOverlap(gdRouteLine, postGisRouteLine, { tolerance: 0.1 }); + + if (overlapping.features.length) { + let lastOverlapPoint = overlapping.features.at(-1).geometry.coordinates[0] + let [overlapGdCoordinates, overlapPostGisCoordinates] = sliceByPoint(startRouterLngLat, gdRouteLine, endRouterLngLat, postGisRoute, lastOverlapPoint) + allCoordinates = overlapGdCoordinates.concat(overlapPostGisCoordinates) + // 连接路段平滑过渡 + } + + } + // 转成turf标准线格式 + let allRouteLine = turf.lineString(allCoordinates); + // 转成turf标准点格式 + let startLngLatPoint = turf.point(startLngLat); + let startRouterLngLatPoint = turf.point(startRouterLngLat); + let endLngLatPoint = turf.point(endLngLat); + let endRouterLngLatPoint = turf.point(endRouterLngLat); + //获取终点到导航线最近的点 + let snappedGeojson = turf.nearestPointOnLine(allRouteLine, endLngLatPoint, { units: 'miles' }); + let snappedCoordinates = getOnePointCoordinatesFromGeoJson(snappedGeojson) + // 根据最近的点截取路线，取前半部分 + let slicedGeojson = turf.lineSlice(startRouterLngLat, turf.point(snappedCoordinates), allRouteLine); + let slicedCoordinates = getOnePointCoordinatesFromGeoJson(slicedGeojson) + //把截取后的路线赋值给pathObjectClone + pathObjectClone.allCoordinates = slicedCoordinates + //计算出发地到目的地的图上距离（直线） + let distanceStartToEnd = turf.distance(startLngLatPoint, endLngLatPoint) + //计算出发点到出发导航路线出发点的步行距离 + let distanceStartToStartRoute = turf.distance(startLngLatPoint, startRouterLngLatPoint) + //计算终点到出发导航路线终点的步行距离 + let distanceEndToEndRoute = turf.distance(endLngLatPoint, endRouterLngLatPoint) + //如果出发点与目的地的实际距离小于步行的距离，直接使用出发点到目的地的距离，导航此时不适用 + if (distanceStartToEnd < (distanceStartToStartRoute + distanceEndToEndRoute)) { + pathObjectClone.allCoordinates = [startLngLat, endLngLat] + } + //把终点到导航终点改为距离线路的最近的的点 + pathObjectClone.endRouterLngLat = snappedCoordinates + return pathObjectClone +} + +const sliceByPoint = (line1Start, line1, line2End, line2, point) => { + /** + * 根据点point把line1的前半部分和line2的后半部分进行拼接 + * line1Start:line1的起始点 [lng.lat] + * line2End:line2 的终止点 [lng,lat] + */ + //拷贝line2的坐标数组进行倒序排列 + let line2Copy = [...line2] + line2Copy.reverse() + let line2CopyReverseLineString = turf.lineString(line2Copy); + // 根据point截取路线，line1取前半部分 + // 根据point截取路线，line2取后半部分 + //然后将两部分拼接，让line1路线从第一个交点处转向line2路段 + let slicedLine1Geojson = turf.lineSlice(line1Start, turf.point(point), line1); + let slicedLine1Coordinates = getOnePointCoordinatesFromGeoJson(slicedLine1Geojson) + let slicedLine2Geojson = turf.lineSlice(line2End, turf.point(point), line2CopyReverseLineString); + let slicedLine2Coordinates = getOnePointCoordinatesFromGeoJson(slicedLine2Geojson) + slicedLine2Coordinates.reverse() + return [slicedLine1Coordinates, slicedLine2Coordinates] +} + + +// 坐标转geoJson +const comLineStringGeoJson = (coordinates) => { + return { + "type": "Feature", + "properties": {}, + "geometry": { + "coordinates": coordinates, + "type": "LineString" + } + } +} +// 从一条线的geometry中获取坐标 +const getOneLineCoordinatesFromGeometry = (geometry) => { + let coordinates = geometry.coordinates + // console.log('geometry::: ', geometry); + let list = [] + if (geometry.type == "MultiLineString") { + coordinates.map(coord => { + list = list.concat(coord) + }) + } else if (geometry.type == 'LineString') { + list = list.concat(geometry.coordinates) + } else { + list = [] + } + return list + +} +//从一个点的geojson中返回坐标点 +const getOnePointCoordinatesFromGeoJson = (geojson) => { + return geojson.geometry.coordinates +} +//从多个点的geojson中返回坐标点 +const getMultPointCoordinatesFromGeoJson = (geojson) => { + // console.log('geojson::: ', geojson); + return geojson.features.map(feature => { + return feature.geometry.coordinates + }) +} + + + +// 全局漫游 +let carGraphicEntity: any = null; +let carGraphicLayer: any = null; + +export const handlerStartRoaming = (coordinates,roaming=true)=>{ + if(carGraphicLayer == null){ + carGraphicLayer = new mars3d.layer.GraphicLayer(); + window.globalMap.addLayer(carGraphicLayer); + }else{ + carGraphicLayer.clear(); + } + + carGraphicEntity = new mars3d.graphic.FixedRoute({ + name: "步行路线", + frameRate: 1, + speed: 500, + autoStop: false, // 到达终点自动停止 + clockLoop: true, // 循环播放 + positions: coordinates, + pauseTime: 0, + camera: { + type: "gs", + radius: 2500 + }, + model: { + // url: "//data.mars3d.cn/gltf/mars/car/bus3.gltf", + url:"http://221.2.83.254:9010/cartoon_fire_truck/xiaofangche.gltf", + scale: 5, + minimumPixelSize: 50, + clampToGround: true + }, + circle: { + radius: 10, + materialType: mars3d.MaterialType.CircleWave, + materialOptions: { + color: "#ffff00", + opacity: 0.3, + speed: 10, + count: 3, + gradient: 0.1 + }, + clampToGround: true + } + }) + carGraphicLayer.addGraphic(carGraphicEntity) + // 开始漫游 + carGraphicEntity.enabled = roaming; + carGraphicEntity.start() +} + +export const handlerStopRoaming = ()=>{ + if(carGraphicEntity){ + carGraphicLayer.removeGraphic(carGraphicEntity); + carGraphicEntity = null; + } +} diff --git a/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/ts/urlFormat.ts b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/ts/urlFormat.ts new file mode 100644 index 0000000..54dc04b --- /dev/null +++ b/src/packages/components/Zhichu/Zhichu/ZhiChu_ModalTable/ts/urlFormat.ts @@ -0,0 +1,28 @@ +export class Url { + /** + * 传入对象返回url参数 + * @param {Object} data {a:1} + * @returns {string} + */ + getParam(data) { + let url = ''; + for (let k in data) { + let value = data[k] !== undefined ? data[k] : ''; + if (value !== undefined && value !== "" && value !== null) { + url += `&${k}=${encodeURIComponent(value)}` + } + } + return url ? url.substring(1) : '' + } + + /** + * 将url和参数拼接成完整地址 + * @param {string} url url地址 + * @param {Json} data json对象 + * @returns {string} + */ + getUrl(url, data) { + //看原始url地址中开头是否带?，然后拼接处理好的参数 + return url += (url.indexOf('?') < 0 ? '?' : '') + this.getParam(data) + } +} diff --git a/src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/config.ts b/src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/config.ts index 7f38c00..9d1c4f9 100644 --- a/src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/config.ts +++ b/src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/config.ts @@ -33,7 +33,7 @@ export const option = { lineBackgroud: '#000000', lineBorderWidth: 1, - lineBorderColor: '#ffffff', + lineBorderColor: '#4D6647', lineHeight: 15, lineStartColor: '#0B4D2C', lineEndColor: '#4DFFB5', diff --git a/src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/index.vue b/src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/index.vue index 33d52af..c285097 100644 --- a/src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/index.vue +++ b/src/packages/components/Zhilan/Zhilan/ZhiLan_ZhongZhiShuLiangMianJi/index.vue @@ -135,7 +135,7 @@ align-items: center; justify-content: v-bind('`${option.dataStyle.labelAlign}`'); width: v-bind('`${option.dataStyle.labelWidth}px`'); - border-right: 1px solid #ffffff; + border-right: 1px solid v-bind('`${option.dataStyle.lineBorderColor}`'); color: v-bind('`${option.dataStyle.labelFontColor}`'); font-size: v-bind('`${option.dataStyle.labelFontSize}px`');