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 @@