gis/xian_vue_new
13
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

格式化代码并添加视角高度控制以及视角范围控制

Browse Source
This commit is contained in:
wzy-warehouse
2026-04-13 10:30:03 +08:00
parent 83f8fec3a4
commit 5eb71642d2
46 changed files with 2084 additions and 1535 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/component/map/AdministrativeDivision.vue
+88 -61
View File
@@ -1,75 +1,102 @@
<!-- 加载行政区划 -->
<template>
<div></div>
</template>
<script lang="ts" setup>
import BaQiiao from '@/assets/json/BaQiao.json';
import BeiLin from '@/assets/json/BeiLin.json';
import ChangAn from '@/assets/json/ChangAn.json';
import GaoLing from '@/assets/json/GaoLing.json';
import HuYi from '@/assets/json/HuYi.json';
import LanTian from '@/assets/json/LanTian.json';
import LianHu from '@/assets/json/LianHu.json';
import LinTong from '@/assets/json/LinTong.json';
import WeiYang from '@/assets/json/WeiYang.json';
import XinCheng from '@/assets/json/XinCheng.json';
import YanLiang from '@/assets/json/YanLiang.json';
import YanTa from '@/assets/json/YanTa.json';
import ZhouZhi from '@/assets/json/ZhouZhi.json';
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
import { Color } from 'cesium';
import { onMounted } from 'vue';
import BaQiiao from '@/assets/json/BaQiao.json';
import BeiLin from '@/assets/json/BeiLin.json';
import ChangAn from '@/assets/json/ChangAn.json';
import GaoLing from '@/assets/json/GaoLing.json';
import HuYi from '@/assets/json/HuYi.json';
import LanTian from '@/assets/json/LanTian.json';
import LianHu from '@/assets/json/LianHu.json';
import LinTong from '@/assets/json/LinTong.json';
import WeiYang from '@/assets/json/WeiYang.json';
import XinCheng from '@/assets/json/XinCheng.json';
import YanLiang from '@/assets/json/YanLiang.json';
import YanTa from '@/assets/json/YanTa.json';
import ZhouZhi from '@/assets/json/ZhouZhi.json';
import { CesiumUtilsSingleton } from '@/utils/cesium/CesiumUtils';
import { Color } from 'cesium';
import { onMounted } from 'vue';
const areas = [BaQiiao, BeiLin, ChangAn, GaoLing, HuYi, LanTian, LianHu, LinTong, WeiYang, XinCheng, YanLiang, YanTa, ZhouZhi]
const areasId = ['baqiao', 'beilin', 'changan', 'gaoling', 'huyi', 'lantian', 'lianhu', 'lintong', 'weiyang', 'xincheng', 'yanliang', 'yanta', 'zhouzhi'];
const areasColor = [
new Color(255 / 255, 153 / 255, 0 / 255),
new Color(255 / 255, 51 / 255, 102 / 255),
new Color(0 / 255, 178 / 255, 255 / 255),
new Color(102 / 255, 255 / 255, 102 / 255),
new Color(204 / 255, 102 / 255, 255 / 255),
new Color(255 / 255, 204 / 255, 0 / 255),
new Color(0 / 255, 204 / 255, 153 / 255),
new Color(255 / 255, 102 / 255, 102 / 255),
new Color(102 / 255, 153 / 255, 255 / 255),
new Color(255 / 255, 178 / 255, 102 / 255),
new Color(153 / 255, 255 / 255, 204 / 255),
new Color(255 / 255, 153 / 255, 204 / 255),
new Color(190 / 255, 255 / 255, 232 / 255)
]
const areaTransparency = 0.3;
const labelTransparency = 1;
const areas = [
BaQiiao,
BeiLin,
ChangAn,
GaoLing,
HuYi,
LanTian,
LianHu,
LinTong,
WeiYang,
XinCheng,
YanLiang,
YanTa,
ZhouZhi,
];
const areasId = [
'baqiao',
'beilin',
'changan',
'gaoling',
'huyi',
'lantian',
'lianhu',
'lintong',
'weiyang',
'xincheng',
'yanliang',
'yanta',
'zhouzhi',
];
const areasColor = [
new Color(255 / 255, 153 / 255, 0 / 255),
new Color(255 / 255, 51 / 255, 102 / 255),
new Color(0 / 255, 178 / 255, 255 / 255),
new Color(102 / 255, 255 / 255, 102 / 255),
new Color(204 / 255, 102 / 255, 255 / 255),
new Color(255 / 255, 204 / 255, 0 / 255),
new Color(0 / 255, 204 / 255, 153 / 255),
new Color(255 / 255, 102 / 255, 102 / 255),
new Color(102 / 255, 153 / 255, 255 / 255),
new Color(255 / 255, 178 / 255, 102 / 255),
new Color(153 / 255, 255 / 255, 204 / 255),
new Color(255 / 255, 153 / 255, 204 / 255),
new Color(190 / 255, 255 / 255, 232 / 255),
];
const areaTransparency = 0.3;
const labelTransparency = 1;
onMounted(() => {
onMounted(() => {
// 构建批量添加配置数组
const layerConfigs = areasId.map((id, index) => ({
layerId: id,
geojsonData: areas[index],
isDefault: true,
options: {
showName: 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
}
}
layerId: id,
geojsonData: areas[index],
isDefault: true,
options: {
showName: 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,
},
},
}));
CesiumUtilsSingleton.batchAddGeoJsonLayers(layerConfigs);
})
});
</script>
<style scoped></style>
<style scoped></style>