From f0b3ef4bb208a93b8ef56176730823feb8b9f53b Mon Sep 17 00:00:00 2001
From: 罗广辉 <guanghui.luo@foxmail.com>
Date: Wed, 09 Apr 2025 09:56:31 +0800
Subject: [PATCH] feat: 用户行政区划中心点
---
src/views/Home/useMapAggregation/useMapAggregation.js | 91 +++++++++++++++++++++++++++++++--------------
1 files changed, 62 insertions(+), 29 deletions(-)
diff --git a/src/views/Home/useMapAggregation/useMapAggregation.js b/src/views/Home/useMapAggregation/useMapAggregation.js
index 3c55da4..8a00691 100644
--- a/src/views/Home/useMapAggregation/useMapAggregation.js
+++ b/src/views/Home/useMapAggregation/useMapAggregation.js
@@ -49,25 +49,35 @@
// 确定缩放比例
- const determineScaling = () => {
+ const determineScaling = (currentState) => {
// console.log('确定缩放比例');
- if (!viewer) return
- let height = viewer.camera.positionCartographic.height
- // 根据高度展示对应的 gJson
- for (let [index, item] of scalingJudgment.entries()) {
- if (!item.show) return
- if (height > item.value[0] && height <= item.value[1]) {
- if (active === item.name) return
- active = item.name
- removeEntities()
- removeLabel()
- renderOutline(item)
- if (!item.gJson && !item.splashedList?.length) return
- item.gJson ? aggregation(item) : splashed(item)
- break
+ return () => {
+ if (!viewer) return
+ let height = viewer.camera.positionCartographic.height
+ // 根据高度展示对应的 gJson
+ for (let [index, item] of scalingJudgment.entries()) {
+ if (!item.show) return
+ if (height > item.value[0] && height <= item.value[1]) {
+ if (active === item.name) return
+ active = item.name
+ removeEntities()
+ removeLabel()
+ renderOutline(item)
+ if (!item.gJson && !item.splashedList?.length) return
+ item.gJson ? aggregation(item, currentState.flyTo) : splashed(item)
+
+ currentState.flyTo && currentState.stopFlyTo && (currentState.flyTo = false)
+ break
+ }
}
}
}
+
+ let currentState = {
+ flyTo: true,
+ stopFlyTo: false
+ }
+ const handlerDetermineScaling = () => determineScaling(currentState)()
// 转换为目录结构, 返回数组,
function convertToHierarchy (code) {
@@ -198,16 +208,31 @@
const outlineGJson = await getOutLine(jsonPathPre, hierarchy)
scalingJudgment.forEach(item => item.show && (item.outline = outlineGJson))
const [longitude, latitude] = outlineGJson.features[0].properties.centroid
+ setCenterPosition({longitude, latitude})
flyTo({ longitude, latitude }, 0, scalingJudgment[(hierarchy.length - 3) * (-1)].height)
}
+
+ const userAreaPosition = computed(() => store.state.home.userAreaPosition);
+ const currentAreaPosition = computed(() => store.state.home.currentAreaPosition);
+
+ const setCenterPosition = (position) => {
+ store.commit('setCurrentAreaPosition', position)
+ if (!userAreaPosition.value.longitude){
+ store.commit('setUserAreaPosition', position)
+ }
+ }
+
+
watch(
selectedAreaCode,
async (newValue, oldValue) => {
if (!viewer) return
- viewer.scene.postRender.removeEventListener(determineScaling)
+ currentState.flyTo = true
+
+ viewer.scene.postRender.removeEventListener(handlerDetermineScaling)
initMapData(newValue).then(() => {
- viewer.scene.postRender.addEventListener(determineScaling)
+ viewer.scene.postRender.addEventListener(handlerDetermineScaling)
})
},
{ deep: true }
@@ -339,6 +364,7 @@
item.dataSource = dataSource // 保存数据源以便后续删除
// 获取数据源中的实体
const entities = dataSource.entities.values
+
entities.forEach(entity => {
let material = new PolyGradientMaterial({
color: Cesium.Color.fromCssColorString(getColor()),
@@ -346,18 +372,20 @@
alphaPower: 1.3
})
+ entity.polygon.extrudedHeight = (entity.propertyNames.length || 1) * 500
+
entity.polygon.material = material
entity.polygon.outline = false // 显示边框
})
- flyTo &&
- viewer.flyTo(dataSource, {
- offset: new Cesium.HeadingPitchRange(
- 0, // heading: 0 (朝向不变)
- Cesium.Math.toRadians(-90), // pitch: -90° (垂直向下)
- 0 // range: 0 (默认距离)
- ),
- duration: 0.5,
- })
+
+ flyTo && viewer.flyTo(dataSource, {
+ offset: new Cesium.HeadingPitchRange(
+ 0, // heading: 0 (朝向不变)
+ Cesium.Math.toRadians(-60), // pitch: -90° (垂直向下)
+ 0 // range: 0 (默认距离)
+ ),
+ duration: 0.5,
+ })
})
}
@@ -441,11 +469,13 @@
// 移除所有监听事件，变量置空
const removeAll = () => {
+ currentState.flyTo = false
+
if (!viewer) return
removeEntities()
removeLabel()
// viewer.camera.moveEnd.removeEventListener(determineScaling);
- viewer.scene.postRender.removeEventListener(determineScaling)
+ viewer.scene.postRender.removeEventListener(handlerDetermineScaling)
handler?.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK)
handler?.destroy()
viewer = null
@@ -455,10 +485,13 @@
currentEntity = null
}
const init = () => {
+ currentState.flyTo = true
+ currentState.stopFlyTo = true
+
viewer = window.$viewer
- viewer.scene.postRender.removeEventListener(determineScaling)
+ viewer.scene.postRender.removeEventListener(handlerDetermineScaling)
initMapData(selectedAreaCode.value || userAreaCode.value).then(() => {
- viewer.scene.postRender.addEventListener(determineScaling)
+ viewer.scene.postRender.addEventListener(handlerDetermineScaling)
})
handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
handler.setInputAction(singleMachineEvent, Cesium.ScreenSpaceEventType.LEFT_CLICK)
--
Gitblit v1.9.3