From fa2f807f76c3208c0c5bc58c32547f426d506a6d Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 11 Apr 2025 16:21:00 +0800
Subject: [PATCH] 行政区划显示调整
---
src/views/Home/useMapAggregation/useMapAggregation.js | 100 +++++++++++++++++++++++++++++++-------------------
1 files changed, 62 insertions(+), 38 deletions(-)
diff --git a/src/views/Home/useMapAggregation/useMapAggregation.js b/src/views/Home/useMapAggregation/useMapAggregation.js
index 442c9d5..fe993cf 100644
--- a/src/views/Home/useMapAggregation/useMapAggregation.js
+++ b/src/views/Home/useMapAggregation/useMapAggregation.js
@@ -16,6 +16,14 @@
/**
* 机巢聚合功能
*/
+
+let arrColor = ["rgb(15,176,255)", "rgb(18,76,154)", "#40C4E4", "#42B2BE", "rgb(51,176,204)", "#8CB7E5", "rgb(0,244,188)", "#139FF0"]
+
+let index = 0
+function getColor () {
+ return arrColor[++index % arrColor.length]
+}
+
export const useMapAggregation = type => {
const { flyTo } = cesiumOperation()
@@ -199,17 +207,17 @@
scalingJudgment.forEach(item => item.show && (item.outline = outlineGJson))
const [longitude, latitude] = outlineGJson.features[0].properties.centroid
const height = scalingJudgment[(hierarchy.length - 3) * (-1)].height
- setCenterPosition({longitude, latitude,height})
+ setCenterPosition({ longitude, latitude, height })
flyTo({ longitude, latitude }, 0, height)
}
- const userAreaPosition = computed(() => store.state.home.userAreaPosition);
+ const userAreaPosition = computed(() => store.state.home.userAreaPosition)
const setCenterPosition = (position) => {
store.commit('setCurrentAreaPosition', position)
- if (!userAreaPosition.value.longitude){
- store.commit('setUserAreaPosition', position)
- }
+ if (!userAreaPosition.value.longitude) {
+ store.commit('setUserAreaPosition', position)
+ }
}
@@ -235,7 +243,6 @@
id: `aggregation-splashed-${index}`,
position: Cesium.Cartesian3.fromDegrees(item.longitude, item.latitude),
label: {
- // 随机整数
text: item.nickname,
font: '12pt Source Han Sans CN',
fillColor: Cesium.Color.WHITE,
@@ -262,24 +269,50 @@
// 渲染轮廓
const renderOutline = item => {
item.outline &&
- Cesium.GeoJsonDataSource.load(item.outline).then(dataSource => {
- const entities = dataSource.entities.values
- entities.forEach((entity,index) => {
- // 创建独立折线作为轮廓
- const positions = entity.polygon.hierarchy.getValue().positions
- viewer.entities.add({
- id: `aggregation-outline-${index}`,
- polyline: {
- positions: positions,
- width: 5, // 直接设置宽度
- material: new Cesium.PolylineGlowMaterialProperty({
- glowPower: 0.5,
- color: Cesium.Color.AQUA,
- }),
- },
+ Cesium.GeoJsonDataSource.load(item.outline).then(dataSource => {
+ const entities = dataSource.entities.values
+ entities.forEach((entity, index) => {
+ // 创建独立折线作为轮廓
+ const positions = entity.polygon.hierarchy.getValue().positions
+ const randomInt = Math.floor(Math.random() * 5) + 1
+
+ let polygon = {}
+
+ if (item.name == '县') {
+ let material = new PolyGradientMaterial({
+ color: Cesium.Color.fromCssColorString(arrColor[randomInt]),
+ opacity: 0.7,
+ alphaPower: 1.3
+ })
+
+ entity.polygon.extrudedHeight = (entity.properties.childrenNum._value || 1) * 500
+
+ entity.polygon.material = material
+
+ polygon = entity.polygon
+ entity.polygon.outline = false // 显示边框
+ }
+
+ let curEntity = viewer.entities.add({
+ id: `aggregation-outline-${index}`,
+ polyline: {
+ positions: positions,
+ width: 5, // 直接设置宽度
+ material: new Cesium.PolylineGlowMaterialProperty({
+ glowPower: 0.5,
+ color: Cesium.Color.AQUA,
+ }),
+ },
+
+ polygon
+ })
+
+ item.name == '县' && viewer.flyTo(curEntity, {
+ offset: new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-60), 0),
+ duration: 0.5,
+ })
})
})
- })
}
// 聚合机巢
@@ -297,7 +330,7 @@
// 遍历特征并添加实体
featuresList.forEach((feature, index) => {
if (!feature.position) return
- const position = Cesium.Cartesian3.fromDegrees(feature.position[0], feature.position[1],12000)
+ const position = Cesium.Cartesian3.fromDegrees(feature.position[0], feature.position[1], 12000)
viewer.entities.add({
position: position,
id: `aggregation-name-${index}`,
@@ -337,13 +370,6 @@
})
})
- let arrColor = ["rgb(15,176,255)", "rgb(18,76,154)", "#40C4E4", "#42B2BE", "rgb(51,176,204)", "#8CB7E5", "rgb(0,244,188)", "#139FF0"]
-
- let index = 0
- function getColor () {
- return arrColor[++index % arrColor.length]
- }
-
// 加载边界
Cesium.GeoJsonDataSource.load(item.gJson).then(dataSource => {
viewer.dataSources.add(dataSource)
@@ -358,18 +384,16 @@
alphaPower: 1.3
})
- entity.polygon.extrudedHeight = (entity.propertyNames.length || 1) * 500
+ const randomInt = Math.floor(Math.random() * 8) + 1
+
+ entity.polygon.extrudedHeight = (entity.properties.childrenNum._value || randomInt) * 500
entity.polygon.material = material
entity.polygon.outline = false // 显示边框
})
needFly && viewer.flyTo(dataSource, {
- offset: new Cesium.HeadingPitchRange(
- 0, // heading: 0 (朝向不变)
- Cesium.Math.toRadians(-60), // pitch: -90° (垂直向下)
- 0 // range: 0 (默认距离)
- ),
+ offset: new Cesium.HeadingPitchRange(0, Cesium.Math.toRadians(-60), 0),
duration: 0.5,
})
needFly = false
@@ -411,7 +435,7 @@
currentEntity = entity
const entityPosition = entity?.position?._value
if (!entityPosition) return
- if (entityPosition){
+ if (entityPosition) {
positionC3 = entityPosition
}
removeLabel()
@@ -458,7 +482,7 @@
}
// 移除弹框标签
const removeLabel = () => {
- viewer.scene.postRender.removeEventListener(labelBoxRender)
+ viewer?.scene.postRender.removeEventListener(labelBoxRender)
removeDom()
}
--
Gitblit v1.9.3