From b9f2b3b5213ad111f71ae7e8b8c79562e3b7345e Mon Sep 17 00:00:00 2001 From: zk Date: Fri, 22 Dec 2023 16:57:16 +0800 Subject: [PATCH] update --- package.json | 1 + src/assets/less/amap-item.less | 1 + src/assets/less/index.less | 144 +++++++++--------- src/assets/mapUtils/commonFun.ts | 34 +++++ src/assets/mapUtils/map.ts | 41 ++--- src/assets/mapUtils/mapConstant.ts | 22 +++ src/components/body-d-left/oneL.vue | 9 +- src/components/chinaMap/chinaMap.vue | 28 ++-- .../secondMap/components/watchListDialog.vue | 2 +- .../secondMap/secondMapHooks.ts | 1 - src/router/index.ts | 26 +--- src/store/modules/detailData.ts | 17 +++ src/utils/utils.ts | 4 +- src/views/index.vue | 86 +++++------ src/views/indexSon.vue | 6 +- 15 files changed, 240 insertions(+), 182 deletions(-) create mode 100644 src/assets/mapUtils/mapConstant.ts create mode 100644 src/store/modules/detailData.ts diff --git a/package.json b/package.json index f88ea57..0c4f684 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "dependencies": { "@amap/amap-jsapi-loader": "^1.0.1", "@iamzzg/data-view": "^2.10.0", + "@turf/turf": "^6.5.0", "autoprefixer": "^10.4.16", "axios": "^1.6.2", "dayjs": "^1.11.10", diff --git a/src/assets/less/amap-item.less b/src/assets/less/amap-item.less index a847eb7..10ea617 100644 --- a/src/assets/less/amap-item.less +++ b/src/assets/less/amap-item.less @@ -31,6 +31,7 @@ //marker .amap-marker-label { padding: 0; + border: none; } .alarm-content { diff --git a/src/assets/less/index.less b/src/assets/less/index.less index 3af5ff2..8dc2bb6 100644 --- a/src/assets/less/index.less +++ b/src/assets/less/index.less @@ -1,154 +1,158 @@ @import "./amap-item"; .type-time { - padding-right: 4%; - padding-top: 3%; - font-size: 16px; - display: flex; - justify-content: right; + padding-right: 4%; + padding-top: 3%; + font-size: 16px; + display: flex; + justify-content: right; - span { - padding: 0 2%; - cursor: pointer; - } - - .select { - color: #45a2ff; - position: relative; - - &:after { - content: ''; - position: absolute; - display: block; - width: 72%; - left: 6px; - bottom: -12px; - height: 6px; - background: url('../images/light.png') no-repeat; - background-size: 100% 100%; + span { + padding: 0 2%; + cursor: pointer; } - } - .unSelect { - color: #a3a4a4; - } + .select { + color: #45a2ff; + position: relative; + + &:after { + content: ''; + position: absolute; + display: block; + width: 72%; + left: 6px; + bottom: -12px; + height: 6px; + background: url('../images/light.png') no-repeat; + background-size: 100% 100%; + } + } + + .unSelect { + color: #a3a4a4; + } } *::-webkit-scrollbar { - width: 12px; - height: 12px; + width: 12px; + height: 12px; } *::-webkit-scrollbar-button { - width: 0; - height: 0; - display: none; + width: 0; + height: 0; + display: none; } *::-webkit-scrollbar-corner { - background-color: transparent; + background-color: transparent; } *::-webkit-scrollbar-thumb { - border: 4px solid rgba(0, 0, 0, 0); - height: 6px; - border-radius: 25px; - background-clip: padding-box; - background-color: rgba(0, 0, 0, 0.3); + border: 4px solid rgba(0, 0, 0, 0); + height: 6px; + border-radius: 25px; + background-clip: padding-box; + background-color: rgba(0, 0, 0, 0.3); } .nowrap { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; } .ant-modal-mask { - background-color: rgba(0, 0, 0, 0.65) !important; + background-color: rgba(0, 0, 0, 0.65) !important; } // 下拉框样式-start +.ant-select { + background-color: #000; +} + .ant-select-dropdown { - background-color: #00152b !important; - border-right: 1px solid #1b7ef2; - border-left: 1px solid #1b7ef2; - border-bottom: 1px solid #1b7ef2; + background-color: #00152b !important; + border-right: 1px solid #1b7ef2; + border-left: 1px solid #1b7ef2; + border-bottom: 1px solid #1b7ef2; } .ant-select-item { - color: #1b7ef2 !important; + color: #1b7ef2 !important; } //框背景色 .ant-select:not(.ant-select-customize-input) .ant-select-selector { - color: #1b7ef2 !important; - background-color: transparent !important; - border: 1px solid #1b7ef2 !important; + color: #1b7ef2 !important; + background-color: transparent !important; + border: 1px solid #1b7ef2 !important; } .ant-select-item-option-selected { - color: #ffffff !important; + color: #ffffff !important; } // 选中字体颜色 .ant-select-selection-item { - //color: #1b7ef2 !important; - color: #fff; + //color: #1b7ef2 !important; + color: #fff; } .ant-select-item-option-active { - background-color: transparent !important; + background-color: transparent !important; } .ant-select-item-option-active:hover { - background-color: #002e64 !important; + background-color: #002e64 !important; } // 箭头颜色 .ant-select-arrow { - color: #1b7ef2 !important; + color: #1b7ef2 !important; } .ant-select-item-option-selected:not(.ant-select-item-option-disabled) { - background-color: #002e64 !important; + background-color: #002e64 !important; } // 下拉框样式-end // 级联选择器样式-start .ant-cascader-menu-item { - color: #1b7ef2 !important; + color: #1b7ef2 !important; } .ant-cascader-menu-item:hover { - background-color: #002e64 !important; + background-color: #002e64 !important; } .ant-cascader-menu-item-active { - color: #fff !important; - background-color: #002e64 !important; + color: #fff !important; + background-color: #002e64 !important; } .ant-cascader-menu-item-expand .ant-cascader-menu-item-expand-icon, .ant-cascader-menu-item-loading-icon { - color: #1b7ef2 !important; + color: #1b7ef2 !important; } // 级联选择器样式-end .ant-empty-description { - color: #fff; + color: #fff; } //空表格hover白色 .ant-table-tbody > tr.ant-table-placeholder:hover > td { - background: transparent !important; + background: transparent !important; } //直升机 .helicopter { - width: 60px; - height: 37px; - background: url("../img/helicopter.png") no-repeat; - background-size: 100% 100%; - margin-bottom: 4px; + width: 60px; + height: 37px; + background: url("../img/helicopter.png") no-repeat; + background-size: 100% 100%; + margin-bottom: 4px; } diff --git a/src/assets/mapUtils/commonFun.ts b/src/assets/mapUtils/commonFun.ts index 9cf4d99..b25fbe3 100644 --- a/src/assets/mapUtils/commonFun.ts +++ b/src/assets/mapUtils/commonFun.ts @@ -1,5 +1,6 @@ import { mapIcon1, mapIcon2, mapIcon3, mapIcon4 } from '/@/components/chinaMap/chinaHooks.ts'; import { watchIcon } from '/@/components/secondaryScreen/secondMap/secondMapHooks.ts'; +import * as turf from '@turf/turf'; /** * @desc 创建icon @@ -60,3 +61,36 @@ export function createCircle(option) { ...option, }); } + +export function getLonLat(result = []) { + let arr = []; + for (let i = 0; i < result.length; i++) { + let { lon, lat, lng } = result[i]; + if (lng) { + lon = lng; + } + if (!lon || !lat) { + continue; + } + let point = turf.point([lon, lat]); + arr.push(point); + } + return arr; +} + +/** + * @desc 根据多点算中心点 + */ +export function getCenter(list = []) { + if (!list || !Array.isArray(list)) { + return undefined; + } + if (list.length < 1) { + return undefined; + } + let features = turf.featureCollection(list); + let centerObj = turf.center(features); + return centerObj?.geometry?.coordinates; +} + +// export function \ No newline at end of file diff --git a/src/assets/mapUtils/map.ts b/src/assets/mapUtils/map.ts index dc31a2c..a8e78e7 100644 --- a/src/assets/mapUtils/map.ts +++ b/src/assets/mapUtils/map.ts @@ -1,17 +1,12 @@ import AMapLoader from '@amap/amap-jsapi-loader'; import china from '/@/assets/lngLat/china.ts'; import chinaInner from '/@/assets/lngLat/chinaInner.ts'; -import { createCircle, createIcon, typeToIcon } from '/@/assets/mapUtils/commonFun.ts'; +import { createCircle, createIcon, getCenter, getLonLat, typeToIcon } from '/@/assets/mapUtils/commonFun.ts'; import { aircraftContent, alarmIcon } from '/@/components/chinaMap/chinaHooks.ts'; import { isFunction } from '/@/utils/is.ts'; import { Callback, ExtDataType, InitMap, MarkerOption, ResultType } from '/@/assets/mapUtils/mapFunTypes.ts'; +import { defaultOption, getZoom, mapKey, mapPlugin } from '/@/assets/mapUtils/mapConstant.ts'; -export const defaultOption = { - center: [106.3, 37.87], //地图中心点 - zoom: 4.3, //地图显示的缩放级别 - mapStyle: 'darkblue', //地图样式 -}; -export const mapPlugin = ['AMap.ToolBar', 'AMap.Driving', 'AMap.GeoJSON', 'AMap.MarkerCluster', 'AMap.PlaceSearch']; let AMap = null; export const Map = { map: null, @@ -29,7 +24,7 @@ export const Map = { initMap({ el, option }: InitMap) { return new Promise((resolve) => { AMapLoader.load({ - key: '4bbcb216b889f2d612cbed05ae6979c8', // 申请好的Web端开发者Key，首次调用 load 时必填 + key: mapKey, // 申请好的Web端开发者Key，首次调用 load 时必填 version: '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15 plugins: mapPlugin, // 需要使用的的插件列表，如比例尺'AMap.Scale'等 }).then((res) => { @@ -40,7 +35,7 @@ export const Map = { resizeEnable: true, center: center, zoom: zoom, - mapStyle: 'amap://styles/darkblue', + mapStyle: 'amap://styles/' + mapStyle, version: '2.0', }); // 异步同时加载多个插件 @@ -105,6 +100,7 @@ export const Map = { if (this.airMarkerList) { this.airMarkerList = []; } + this.clearActiveHospital(); // this.map.remove(this.airMarkerList); }, // /** @@ -116,6 +112,10 @@ export const Map = { createOverlay(result: ResultType[], extData?: ExtDataType, callback?: Callback) { this.removeOverlayGroup(); this.overlayGroup = new AMap.OverlayGroup(); + let list = getLonLat(result); + let center = getCenter(list); + let zoom = getZoom(list); + this.setZoomCenter(center, zoom); for (let i = 0; i < result.length; i++) { let { type, lon, lat, lng } = result[i]; if (lng) { @@ -231,23 +231,24 @@ export const Map = { this.removeOverlayGroup(); this.clearActiveHospital(); if (!cityCode) return; - this.placeSearch = new AMap.PlaceSearch({ - pageSize: 30, // 单页显示结果条数 - pageIndex: 1, // 页码 - city: cityCode, // 兴趣点城市 - citylimit: true, //是否强制限制在设置的城市内搜索 - map: this.map, // 展现结果的地图实例 - // panel: 'map_hospital', // 结果列表将在此容器中进行展示。 - autoFitView: false, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围 - }); + if (!this.placeSearch) { + this.placeSearch = new AMap.PlaceSearch({ + pageSize: 30, // 单页显示结果条数 + pageIndex: 1, // 页码 + city: cityCode, // 兴趣点城市 + citylimit: true, //是否强制限制在设置的城市内搜索 + map: this.map, // 展现结果的地图实例 + // panel: 'map_hospital', // 结果列表将在此容器中进行展示。 + autoFitView: false, // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围 + }); + } + this.placeSearch.setCity(cityCode); //关键字查询 this.placeSearch.search(keywords); }, clearActiveHospital() { if (this.placeSearch) { - // debugger; this.placeSearch.clear(); - this.placeSearch = null; } }, createMarker(option: MarkerOption, callbck?: Callback) { diff --git a/src/assets/mapUtils/mapConstant.ts b/src/assets/mapUtils/mapConstant.ts new file mode 100644 index 0000000..5c1e874 --- /dev/null +++ b/src/assets/mapUtils/mapConstant.ts @@ -0,0 +1,22 @@ +// 地图默认配置 +export const defaultOption = { + center: [108.660704, 36.386058], //地图中心点 + zoom: 6.5, //地图显示的缩放级别 + mapStyle: 'darkblue', //地图样式 +}; +// 地图key +export const mapKey = '4bbcb216b889f2d612cbed05ae6979c8' +export const mapPlugin = ['AMap.ToolBar', 'AMap.Driving', 'AMap.GeoJSON', 'AMap.MarkerCluster', 'AMap.PlaceSearch']; + +//根据数据量设置地图层级 +export function getZoom(list = []) { + let len = list.length + // console.log('len', len) + if (len <= 5) { + return 7.5; + } else if (len <= 30) { + return 6.7; + } else { + return 7; + } +} diff --git a/src/components/body-d-left/oneL.vue b/src/components/body-d-left/oneL.vue index d83b558..966bf9b 100644 --- a/src/components/body-d-left/oneL.vue +++ b/src/components/body-d-left/oneL.vue @@ -23,10 +23,10 @@