update 银川地图中心点做特殊处理

This commit is contained in:
zk
2024-05-21 16:07:12 +08:00
parent f3f100cd18
commit 16e85fe15d
5 changed files with 77 additions and 18 deletions
+6 -2
View File
@@ -31,6 +31,7 @@ export const Map = {
}).then((res) => {
AMap = res;
const { zoom, center, mapStyle } = { ...defaultOption, ...option };
console.log(zoom, center);
//基本地图加载
this.map = new AMap.Map(el, {
resizeEnable: true,
@@ -119,14 +120,17 @@ export const Map = {
* @param result
* @param extData
* @param callback
* @param computedCenter 是否计算中心点
*/
createOverlay(result: ResultType[], extData?: ExtDataType, callback?: Callback) {
createOverlay(result: ResultType[], extData?: ExtDataType, callback?: Callback, computedCenter?: boolean) {
this.removeOverlayGroup();
this.overlayGroup = new AMap.OverlayGroup();
let list = getLonLat(result);
let center = getCenter(list);
let zoom = getZoom(list);
this.setZoomCenter(center, zoom);
if (computedCenter) {
this.setZoomCenter(center, zoom);
}
for (let i = 0; i < result.length; i++) {
let { type, lon, lat, lng } = result[i];
if (lng) {
+7 -1
View File
@@ -1,9 +1,15 @@
// 西安地图默认配置
export const defaultOption = {
// center: [108.660704, 36.386058], //地图中心点
center: [108.660704, 36.386058], //地图中心点
zoom: 6.5, //地图显示的缩放级别
mapStyle: 'darkblue', //地图样式
};
export const YinChuanOption = {
center: [106.32, 38.45], //地图中心点
zoom: 8, //地图显示的缩放级别
mapStyle: 'darkblue', //地图样式
};
// 地图key
export const mapKey = '4bbcb216b889f2d612cbed05ae6979c8';
export const mapPlugin = ['AMap.ToolBar', 'AMap.Driving', 'AMap.GeoJSON', 'AMap.MarkerCluster', 'AMap.PlaceSearch'];
+31 -6
View File
@@ -48,7 +48,7 @@
</div>
<!-- <div class="level">地图层级{{ level }}</div>-->
</div>
<div class="center-footer">
<div class="center-footer" v-if="showFooter">
<div class="count-item">
<div class="num">{{ useDetail?.alerdyreceive || '0' }}</div>
<div class="text">累计受理</div>
@@ -67,6 +67,26 @@
import { aircraft, getKmStr, getTimeStr, legendList, mapApiSwitch, tabList, TabType } from '/@/components/chinaMap/chinaHooks';
import { useDetailStore } from '/@/store/modules/detailData.ts';
const props = defineProps({
showFooter: {
type: Boolean,
default: () => {
return true;
},
},
computedCenter: {
type: Boolean,
default: () => {
return true;
},
},
mapOptions: {
type: Object,
default: () => {
return {};
},
},
});
const useDetail = useDetailStore();
const formState = ref({
start: '',
@@ -116,17 +136,22 @@
const { code, result } = await mapApiSwitch(type, params);
if (code == 200) {
if (Array.isArray(result) && result.length > 0) {
Map.createOverlay(result, {
content: (val) => {
return `<div style="
Map.createOverlay(
result,
{
content: (val) => {
return `<div style="
width: 21px;
height: 44px;
position: absolute;
left: -20px;
top: -20px;" title="${val?.name}">
</div>`;
},
},
});
() => {},
props.computedCenter
);
} else {
Map.removeOverlayGroup();
}
@@ -137,7 +162,7 @@
}
onMounted(() => {
Map.initMap({ el: 'mapContainer' }).then(() => {
Map.initMap({ el: 'mapContainer', option: props.mapOptions }).then(() => {
getMapData(tabList[0].type);
Map.map && Map.map.on('zoomend', setLevel);
Map.map && Map.map.on('zoomend', setLevel);
@@ -1,12 +1,17 @@
<template>
<Dialog :openVis="visible" width="50%" title="健康终端报警列表" @close="closeDialog" :maskClosable="false">
<template #container>
<BasicTable ref="registerTable" class="table-container" :columns="columns" :api="getMonitorList" :apiParams="formState"></BasicTable>
<BasicTable ref="registerTable" class="table-container" :columns="columns" :api="getMonitorList" :apiParams="formState">
<template #address="{ record, column, index }">
<span v-if="record['address']">{{ record?.address }}</span>
<span v-else style="color: #eb3636">{{ record?.gpsErrorMsg }}</span>
</template>
</BasicTable>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { computed, ref, watch } from 'vue';
import { computed, ref, watch, h } from 'vue';
import Dialog from '/@/components/dialog/Dialog.vue';
import { useDialog } from '/@/views/components/dialogHooks.ts';
import BasicTable from '/@/components/secondaryScreen/secondMap/components/basicTable/BasicTable.vue';
@@ -30,8 +35,8 @@
},
{
title: '二级单位',
dataIndex: 'orgName1',
key: 'orgName1',
dataIndex: 'orgName2',
key: 'orgName2',
},
{
title: '联系电话',
@@ -57,9 +62,14 @@
title: '发生地点',
dataIndex: 'address',
key: 'address',
customRender: ({ record }) => {
return record?.address || record?.gpsErrorMsg;
},
slot: 'address',
// customRender: ({ record }) => {
// if (record?.address) {
// return record?.address;
// } else {
// return h('span', { style: { color: '#eb3636' } }, record?.gpsErrorMsg);
// }
// },
},
];
const formState = computed(() => ({
+16 -2
View File
@@ -4,7 +4,10 @@
<div class="title-d-left">
{{ dayTimeO }}
</div>
<div class="title-d-middle"> 银川应急就医服务中心</div>
<div class="title-d-middle">
<span>{{ title }}</span>
<span class="phone">{{ phone }}</span>
</div>
<div class="title-d-right"> 累计运行时间{{ dayTimeT }}</div>
</div>
<div class="body-d">
@@ -15,7 +18,7 @@
<DailyWorkTrends :refreshState="refreshState" class="daily-work-trends" />
</div>
<div class="body-d-middle">
<china-map />
<china-map :showFooter="false" :computedCenter="false" :mapOptions="YinChuanOption" />
</div>
<div class="body-d-right">
<!--健康终端报警-->
@@ -52,11 +55,15 @@
import { useRoute } from 'vue-router';
import { DataType, getSettings } from '/@/utils/settings.ts';
import { ServerDetailType } from '/@/components/body-d-left/bodyLeftHooks.ts';
import { YinChuanOption } from '/@/assets/mapUtils/mapConstant.ts';
const title = ref('银川片应急就医服务中心');
const phone = '(0951-6805199)';
const route = useRoute();
const setting = getSettings(DataType.yinChuan);
onMounted(() => {
init();
document.title = title.value;
document.addEventListener('visibilitychange', checkTabState);
});
onUnmounted(() => {
@@ -210,6 +217,13 @@
text-align: center;
}
.title-d-middle {
.phone {
font-size: 27px;
margin-left: 4px;
}
}
> :nth-child(1) {
width: 29%;
}