diff --git a/.eslintignore b/.eslintignore index 787e9b3..55a9bb7 100644 --- a/.eslintignore +++ b/.eslintignore @@ -7,6 +7,7 @@ node_modules .vscode .idea dist +dist.zip /public /docs .husky 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..74facab 100644 --- a/src/assets/less/index.less +++ b/src/assets/less/index.less @@ -68,6 +68,11 @@ } // 下拉框样式-start +.ant-select.bg-000 { + color: #fff !important; + background-color: #000; +} + .ant-select-dropdown { background-color: #00152b !important; border-right: 1px solid #1b7ef2; diff --git a/src/assets/mapUtils/commonFun.ts b/src/assets/mapUtils/commonFun.ts index 9cf4d99..75d8b05 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 @@ -31,7 +32,7 @@ export function typeToIcon(type: string) { if (type == '3') { return createIcon({ icon: mapIcon2, iconSize, imageSize }); } - if (type == '5') { + if (type == '5' || type == '4') { return createIcon({ icon: mapIcon3, iconSize, imageSize }); } if (type == '6') { @@ -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..da5ab03 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) { @@ -126,7 +126,6 @@ export const Map = { } // 创建一个 Icon let startIcon = typeToIcon(type); - // debugger; // 将 icon 传入 marker let startMarker = new AMap.Marker({ // 点的坐标 @@ -231,23 +230,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 @@