wzy-warehouse
71 lines
2.1 KiB
Vue
71 lines
2.1 KiB
Vue
<!-- 加载行政区划 -->
|
|
<template>
|
|
<div></div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { useAdministrativeDivision } from '@/hooks/map/useAdministrativeDivision';
|
|
import { useLoadingResourceStore } from '@/stores/useLoadingResourceStore';
|
|
import { useStatusStore } from '@/stores/useStatusStore';
|
|
import { LoadingResource } from '@/types/common/LoadingResourceType';
|
|
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
|
|
import { Color } from 'cesium';
|
|
import { onMounted, watch } from 'vue';
|
|
|
|
// 配置参数
|
|
const { areas, areasId, areasColor, areaTransparency, labelTransparency } =
|
|
useAdministrativeDivision();
|
|
|
|
const statusStore = useStatusStore();
|
|
const loadingResourceStore = useLoadingResourceStore();
|
|
|
|
onMounted(async () => {
|
|
// 构建批量添加配置数组
|
|
const layerConfigs = areasId.map((id, index) => ({
|
|
layerId: id,
|
|
geojsonData: areas[index],
|
|
options: {
|
|
showName: true,
|
|
isDefault: true,
|
|
labelStyle: {
|
|
labelText: areas[index].features[0].properties.name,
|
|
center: [
|
|
areas[index].features[0].properties.center[0],
|
|
areas[index].features[0].properties.center[1],
|
|
0,
|
|
] as [number, number, number],
|
|
labelColor: Color.BLACK,
|
|
backgroundColor: areasColor[index].withAlpha(labelTransparency),
|
|
},
|
|
polygonStyle: {
|
|
fill: true,
|
|
fillColor: areasColor[index].withAlpha(areaTransparency),
|
|
outline: false,
|
|
},
|
|
},
|
|
}));
|
|
|
|
await CesiumUtilsSingleton.batchAddGeoJsonLayers(layerConfigs);
|
|
|
|
// 记录行政区划id
|
|
loadingResourceStore.addLoadingResource(
|
|
LoadingResource.ADMINISTRATIVE_DIVISION,
|
|
{ ids: areasId, info: [] } // 此处info不进行记录
|
|
);
|
|
});
|
|
|
|
// 监听显示状态改变
|
|
watch(
|
|
() => statusStore.mapLayers.showAdministrativeDivision.show,
|
|
(newValue: boolean) => {
|
|
if (newValue) {
|
|
CesiumUtilsSingleton.batchShowGeoJsonLayers(areasId);
|
|
} else {
|
|
CesiumUtilsSingleton.batchHideGeoJsonLayers(areasId);
|
|
}
|
|
}
|
|
);
|
|
</script>
|
|
|
|
<style scoped></style>
|