update

2023-12-22 16:57:16 +08:00
parent dd5a47e7fb
commit b9f2b3b521
15 changed files with 240 additions and 182 deletions
@@ -31,6 +31,7 @@
 //marker
 .amap-marker-label {
    padding: 0;
+    border: none;
 }

 .alarm-content {
@@ -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;
 }

@@ -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 
@@ -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) {
@@ -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;
+    }
+}