125 lines
3.2 KiB
Vue
125 lines
3.2 KiB
Vue
<script setup lang="ts">
|
||
import { ref, reactive, nextTick } from "vue";
|
||
import { centerMap, GETNOBASE } from "@/api";
|
||
import { registerMap, getMap } from "echarts/core";
|
||
import { optionHandle, regionCodes } from "./center.map";
|
||
import { ElMessage } from "element-plus";
|
||
|
||
import type { MapdataType } from "./center.map";
|
||
|
||
const option = ref({});
|
||
const code = ref("china"); //china 代表中国 其他地市是行政编码
|
||
|
||
withDefaults(
|
||
defineProps<{
|
||
// 结束数值
|
||
title: number | string;
|
||
}>(),
|
||
{
|
||
title: "地图",
|
||
}
|
||
);
|
||
|
||
const dataSetHandle = async (regionCode: string, list: object[]) => {
|
||
const geojson: any = await getGeojson(regionCode);
|
||
let cityCenter: any = {};
|
||
let mapData: MapdataType[] = [];
|
||
//获取当前地图每块行政区中心点
|
||
geojson.features.forEach((element: any) => {
|
||
cityCenter[element.properties.name] = element.properties.centroid || element.properties.center;
|
||
});
|
||
//当前中心点如果有此条数据中心点则赋值x，y当然这个x,y也可以后端返回进行大点，前端省去多行代码
|
||
list.forEach((item: any) => {
|
||
if (cityCenter[item.name]) {
|
||
mapData.push({
|
||
name: item.name,
|
||
value: cityCenter[item.name].concat(item.value),
|
||
});
|
||
}
|
||
});
|
||
await nextTick();
|
||
|
||
option.value = optionHandle(regionCode, list, mapData);
|
||
};
|
||
|
||
const getData = async (regionCode: string) => {
|
||
return
|
||
centerMap({ regionCode: regionCode })
|
||
.then((res) => {
|
||
console.log("中上--设备分布", res);
|
||
if (res.success) {
|
||
dataSetHandle(res.data.regionCode, res.data.dataList);
|
||
} else {
|
||
ElMessage.error(res.msg);
|
||
}
|
||
})
|
||
.catch((err) => {
|
||
ElMessage.error(err);
|
||
});
|
||
};
|
||
const getGeojson = (regionCode: string) => {
|
||
return new Promise<boolean>(async (resolve) => {
|
||
let mapjson = getMap(regionCode);
|
||
if (mapjson) {
|
||
mapjson = mapjson.geoJSON;
|
||
resolve(mapjson);
|
||
} else {
|
||
mapjson = await GETNOBASE(`./map-geojson/${regionCode}.json`).then((data) => data);
|
||
code.value = regionCode;
|
||
registerMap(regionCode, {
|
||
geoJSON: mapjson as any,
|
||
specialAreas: {},
|
||
});
|
||
resolve(mapjson);
|
||
}
|
||
});
|
||
};
|
||
getData(code.value);
|
||
|
||
const mapClick = (params: any) => {
|
||
// console.log(params);
|
||
let xzqData = regionCodes[params.name];
|
||
if (xzqData) {
|
||
getData(xzqData.adcode);
|
||
} else {
|
||
window["$message"].warning("暂无下级地市");
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<template>
|
||
<div class="mapwrap">
|
||
<div class="quanguo" @click="getData('china')" v-if="code !== 'china'">中国</div>
|
||
<v-chart class="chart" :option="option" ref="centerMapRef" @click="mapClick"
|
||
v-if="JSON.stringify(option) != '{}'" />
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped lang="scss">
|
||
.mapwrap {
|
||
height: 780px;
|
||
width: 100%;
|
||
// padding: 0 0 10px 0;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
border: 1px solid #f00;
|
||
|
||
.quanguo {
|
||
position: absolute;
|
||
right: 20px;
|
||
top: -46px;
|
||
width: 80px;
|
||
height: 28px;
|
||
border: 1px solid #00eded;
|
||
border-radius: 10px;
|
||
color: #00f7f6;
|
||
text-align: center;
|
||
line-height: 26px;
|
||
letter-spacing: 6px;
|
||
cursor: pointer;
|
||
box-shadow: 0 2px 4px rgba(0, 237, 237, 0.5), 0 0 6px rgba(0, 237, 237, 0.4);
|
||
z-index: 10;
|
||
}
|
||
}
|
||
</style>
|