|
|
@@ -97,17 +97,32 @@ export class World extends Mini3d {
|
|
|
constructor(canvas, assets) {
|
|
|
super(canvas)
|
|
|
|
|
|
- // 地图配置参数
|
|
|
- this.geoProjectionCenter = [120.98422, 31.39244] // 地图中心点坐标（昆山市）
|
|
|
- this.geoProjectionScale = 1200 // 地图缩放比例
|
|
|
- this.flyLineCenter = [120.98422, 31.39244] // 飞线中心点
|
|
|
+ // 地图配置参数 - 默认苏州地图
|
|
|
+ this.geoProjectionCenter = [120.62, 31.32] // 地图中心点坐标（苏州市）
|
|
|
+ this.geoProjectionScale = 800 // 地图缩放比例
|
|
|
+ this.flyLineCenter = [120.62, 31.32] // 飞线中心点
|
|
|
this.depth = 0.5 // 地图拉伸高度
|
|
|
-
|
|
|
+
|
|
|
// 地图焦点标签信息
|
|
|
this.mapFocusLabelInfo = {
|
|
|
- name: "昆山市",
|
|
|
- enName: "KUNSHAN CITY",
|
|
|
- center: [120.98422, 31.39244],
|
|
|
+ name: "苏州市",
|
|
|
+ enName: "SUZHOU CITY",
|
|
|
+ center: [120.62, 31.32],
|
|
|
+ }
|
|
|
+
|
|
|
+ // 当前地图模式: 'kunshan' | 'suzhou'
|
|
|
+ this.currentMapMode = 'suzhou'
|
|
|
+
|
|
|
+ // 昆山地图配置
|
|
|
+ this.kunshanConfig = {
|
|
|
+ geoProjectionCenter: [120.98422, 31.39244],
|
|
|
+ geoProjectionScale: 1200,
|
|
|
+ flyLineCenter: [120.98422, 31.39244],
|
|
|
+ mapFocusLabelInfo: {
|
|
|
+ name: "昆山市",
|
|
|
+ enName: "KUNSHAN CITY",
|
|
|
+ center: [120.98422, 31.39244],
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
// 是否显示水文站图标
|
|
|
@@ -145,6 +160,7 @@ export class World extends Mini3d {
|
|
|
// 初始化标签组
|
|
|
this.labelGroup = new Group() // 创建标签组
|
|
|
this.label3d = new Label3d(this) // 创建3D标签实例
|
|
|
+ this.label3d.setRenderLevel(10) // 设置标签层级，确保显示在其他元素之上
|
|
|
this.labelGroup.rotation.x = -Math.PI / 2 // 旋转标签组使其水平
|
|
|
this.scene.add(this.labelGroup) // 添加到场景
|
|
|
|
|
|
@@ -512,9 +528,17 @@ export class World extends Mini3d {
|
|
|
|
|
|
// 添加到场景
|
|
|
this.scene.add(mapGroup)
|
|
|
-
|
|
|
+
|
|
|
// 创建柱状图
|
|
|
this.createBar()
|
|
|
+
|
|
|
+ // 苏州地图模式下创建区县标注，并控制柱状图显示/隐藏
|
|
|
+ if (this.currentMapMode === 'suzhou') {
|
|
|
+ this.createSuzhouDistrictLabels()
|
|
|
+ this.setBarVisibility(false)
|
|
|
+ } else {
|
|
|
+ this.setBarVisibility(true)
|
|
|
+ }
|
|
|
}
|
|
|
/**
|
|
|
* 创建中国地图
|
|
|
@@ -573,8 +597,10 @@ export class World extends Mini3d {
|
|
|
* @returns {Object} 包含省份地图、顶部地图和地图线条的对象
|
|
|
*/
|
|
|
createProvince() {
|
|
|
- // 获取省份地图数据
|
|
|
- let mapJsonData = this.assets.instance.getResource("mapJson")
|
|
|
+ // 根据当前模式获取地图数据，默认苏州地图
|
|
|
+ let mapJsonData = this.currentMapMode === 'kunshan'
|
|
|
+ ? this.assets.instance.getResource("mapJson")
|
|
|
+ : this.assets.instance.getResource("suzhouJson")
|
|
|
|
|
|
// 创建省份地图材质
|
|
|
let [topMaterial, sideMaterial] = this.createProvinceMaterial()
|
|
|
@@ -803,8 +829,19 @@ export class World extends Mini3d {
|
|
|
/**
|
|
|
* 创建柱状图
|
|
|
* 功能：根据省份数据创建3D柱状图，包括柱子、光圈、辉光效果和标签
|
|
|
+ * 苏州地图模式下不显示柱状图
|
|
|
*/
|
|
|
createBar() {
|
|
|
+ // 苏州地图模式下不创建柱状图
|
|
|
+ if (this.currentMapMode === 'suzhou') {
|
|
|
+ this.barGroup = null
|
|
|
+ this.allBar = []
|
|
|
+ this.allBarMaterial = []
|
|
|
+ this.allGuangquan = []
|
|
|
+ this.allProvinceLabel = []
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
let self = this
|
|
|
let data = sortByValue(provincesData).filter((item, index) => index < 10)
|
|
|
const barGroup = new Group()
|
|
|
@@ -895,7 +932,14 @@ export class World extends Mini3d {
|
|
|
this.eventElement.map((mesh) => {
|
|
|
this.interactionManager.add(mesh)
|
|
|
mesh.addEventListener("mousedown", (ev) => {
|
|
|
- console.log(ev.target.userData.name)
|
|
|
+ const areaName = ev.target.userData.name
|
|
|
+ console.log(areaName)
|
|
|
+ // 苏州地图模式下，点击昆山区域切换到昆山地图
|
|
|
+ if (this.currentMapMode === 'suzhou' && areaName === '昆山市') {
|
|
|
+ this.switchToKunshanMap()
|
|
|
+ // 通知父组件切换到水文测站页面
|
|
|
+ emitter.$emit('switchToRegionOverview')
|
|
|
+ }
|
|
|
})
|
|
|
mesh.addEventListener("mouseover", (event) => {
|
|
|
if (!objectsHover.includes(event.target.parent)) {
|
|
|
@@ -914,6 +958,185 @@ export class World extends Mini3d {
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 创建苏州区县标注
|
|
|
+ * 功能：在苏州地图上标注各个区县名称
|
|
|
+ */
|
|
|
+ createSuzhouDistrictLabels() {
|
|
|
+ // 获取苏州区县点数据
|
|
|
+ let districtData = this.assets.instance.getResource("suzhouDistricts")
|
|
|
+ console.log('suzhouDistricts data:', districtData)
|
|
|
+ console.log('districtData type:', typeof districtData)
|
|
|
+
|
|
|
+ // 如果数据是字符串，解析为 JSON
|
|
|
+ if (typeof districtData === 'string') {
|
|
|
+ try {
|
|
|
+ districtData = JSON.parse(districtData)
|
|
|
+ console.log('解析后的 districtData:', districtData)
|
|
|
+ } catch (e) {
|
|
|
+ console.error('解析苏州区县数据失败:', e)
|
|
|
+ return
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ if (districtData) {
|
|
|
+ console.log('districtData.features:', districtData.features)
|
|
|
+ console.log('districtData.features length:', districtData.features ? districtData.features.length : 0)
|
|
|
+ }
|
|
|
+ if (!districtData || !districtData.features) {
|
|
|
+ console.warn('苏州区县数据未加载或格式不正确，尝试延迟加载...')
|
|
|
+ // 如果资源未加载，延迟 1 秒后重试
|
|
|
+ setTimeout(() => {
|
|
|
+ this.createSuzhouDistrictLabels()
|
|
|
+ }, 1000)
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // 清除已有标注
|
|
|
+ this.clearSuzhouDistrictLabels()
|
|
|
+ this.suzhouDistrictLabels = []
|
|
|
+
|
|
|
+ districtData.features.forEach((feature, index) => {
|
|
|
+ const { geometry, properties } = feature
|
|
|
+ if (!geometry || !geometry.coordinates) {
|
|
|
+ console.warn(`区县数据格式不正确，索引: ${index}`)
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ const [lng, lat] = geometry.coordinates
|
|
|
+ const name = properties.地名 || properties.NAME_3 || properties.name
|
|
|
+
|
|
|
+ if (!name) {
|
|
|
+ console.warn(`区县名称不存在，索引: ${index}`, properties)
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ // 使用地理投影转换坐标
|
|
|
+ const [x, y] = this.geoProjection([lng, lat])
|
|
|
+ console.log(`创建区县标签: ${name}, 坐标: [${x}, ${y}]`)
|
|
|
+
|
|
|
+ // 创建区县标签 - 增加高度确保标签显示在地图上方
|
|
|
+ const label = this.createDistrictLabel(name, new Vector3(x, -y, this.depth + 0.5), name === '昆山市')
|
|
|
+ this.suzhouDistrictLabels.push(label)
|
|
|
+ })
|
|
|
+
|
|
|
+ console.log(`共创建 ${this.suzhouDistrictLabels.length} 个区县标签`)
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 创建单个区县标签
|
|
|
+ * @param {string} name - 区县名称
|
|
|
+ * @param {Vector3} position - 标签位置
|
|
|
+ * @param {boolean} isClickable - 是否可点击（用于昆山市下钻）
|
|
|
+ * @returns {Object} 标签对象
|
|
|
+ */
|
|
|
+ createDistrictLabel(name, position, isClickable = false) {
|
|
|
+ console.log(`createDistrictLabel: ${name}, position:`, position)
|
|
|
+ const labelClass = isClickable ? 'district-label district-label-clickable' : 'district-label'
|
|
|
+ const label = this.label3d.create("", labelClass, false)
|
|
|
+ console.log(`label created, element:`, label.element)
|
|
|
+ label.init(
|
|
|
+ `<div class="district-label-wrap">
|
|
|
+ <span class="name">${name}</span>
|
|
|
+ </div>`,
|
|
|
+ position
|
|
|
+ )
|
|
|
+ console.log(`label initialized, element innerHTML:`, label.element.innerHTML)
|
|
|
+ this.label3d.setLabelStyle(label, 0.02, "x", Math.PI / 2, "auto")
|
|
|
+ label.setParent(this.labelGroup)
|
|
|
+ console.log(`label added to labelGroup, labelGroup children count:`, this.labelGroup.children.length)
|
|
|
+
|
|
|
+ // 如果是昆山市标签，添加点击事件
|
|
|
+ if (isClickable) {
|
|
|
+ const labelElement = label.element.querySelector('.district-label-wrap')
|
|
|
+ if (labelElement) {
|
|
|
+ labelElement.style.cursor = 'pointer'
|
|
|
+ labelElement.addEventListener('click', (e) => {
|
|
|
+ e.stopPropagation()
|
|
|
+ e.preventDefault()
|
|
|
+ console.log('昆山市标签被点击，切换到昆山地图')
|
|
|
+ this.switchToKunshanMap()
|
|
|
+ // 通知父组件切换到区域总览页面
|
|
|
+ emitter.$emit('switchToRegionOverview')
|
|
|
+ })
|
|
|
+
|
|
|
+ // 添加鼠标悬停效果
|
|
|
+ labelElement.addEventListener('mouseenter', () => {
|
|
|
+ labelElement.style.transform = 'scale(1.1)'
|
|
|
+ labelElement.style.transition = 'transform 0.2s ease'
|
|
|
+ })
|
|
|
+
|
|
|
+ labelElement.addEventListener('mouseleave', () => {
|
|
|
+ labelElement.style.transform = 'scale(1)'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ return label
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 清除苏州区县标注
|
|
|
+ */
|
|
|
+ clearSuzhouDistrictLabels() {
|
|
|
+ console.log('clearSuzhouDistrictLabels - 清除前标签数量:', this.suzhouDistrictLabels ? this.suzhouDistrictLabels.length : 0)
|
|
|
+ if (this.suzhouDistrictLabels) {
|
|
|
+ this.suzhouDistrictLabels.forEach((label, index) => {
|
|
|
+ if (label) {
|
|
|
+ console.log(`清除标签 ${index}`)
|
|
|
+ // 使用 label.remove() 从父级 Group 中移除
|
|
|
+ if (label.remove) {
|
|
|
+ label.remove()
|
|
|
+ }
|
|
|
+ // 同时隐藏元素
|
|
|
+ if (label.element) {
|
|
|
+ label.element.style.visibility = 'hidden'
|
|
|
+ label.element.style.display = 'none'
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.suzhouDistrictLabels = []
|
|
|
+ }
|
|
|
+ console.log('clearSuzhouDistrictLabels - 清除完成')
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 隐藏柱状图标签
|
|
|
+ */
|
|
|
+ hideBarLabels() {
|
|
|
+ // 隐藏柱状图
|
|
|
+ if (this.barGroup) {
|
|
|
+ this.barGroup.visible = false
|
|
|
+ }
|
|
|
+ // 隐藏柱状图标签
|
|
|
+ if (this.allProvinceLabel) {
|
|
|
+ this.allProvinceLabel.forEach(label => {
|
|
|
+ if (label && label.hide) {
|
|
|
+ label.hide()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 显示柱状图标签
|
|
|
+ */
|
|
|
+ showBarLabels() {
|
|
|
+ // 显示柱状图
|
|
|
+ if (this.barGroup) {
|
|
|
+ this.barGroup.visible = true
|
|
|
+ }
|
|
|
+ // 显示柱状图标签
|
|
|
+ if (this.allProvinceLabel) {
|
|
|
+ this.allProvinceLabel.forEach(label => {
|
|
|
+ if (label && label.show) {
|
|
|
+ label.show()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
/**
|
|
|
* 创建辉光效果
|
|
|
* 功能：为柱状图创建辉光效果，增强视觉效果
|
|
|
@@ -1683,7 +1906,10 @@ export class World extends Mini3d {
|
|
|
* 功能：在地图上创建轮廓线，增强地图的边界感和细节
|
|
|
*/
|
|
|
createStorke() {
|
|
|
- const mapStroke = this.assets.instance.getResource("mapStroke") // 获取轮廓数据
|
|
|
+ // 根据当前模式获取轮廓数据，默认苏州地图
|
|
|
+ const mapStroke = this.currentMapMode === 'kunshan'
|
|
|
+ ? this.assets.instance.getResource("mapStroke")
|
|
|
+ : this.assets.instance.getResource("suzhouJson")
|
|
|
const texture = this.assets.instance.getResource("pathLine3") // 获取轮廓纹理
|
|
|
texture.wrapS = texture.wrapT = RepeatWrapping // 设置纹理包装方式
|
|
|
texture.repeat.set(2, 1) // 设置纹理重复
|
|
|
@@ -1734,6 +1960,331 @@ export class World extends Mini3d {
|
|
|
this.interactionManager && this.interactionManager.update() // 更新交互管理器
|
|
|
}
|
|
|
|
|
|
+ /**
|
|
|
+ * 切换到苏州地图
|
|
|
+ * 功能：从昆山地图切换到苏州地图
|
|
|
+ */
|
|
|
+ switchToSuzhouMap() {
|
|
|
+ if (this.currentMapMode === 'suzhou') return
|
|
|
+
|
|
|
+ this.currentMapMode = 'suzhou'
|
|
|
+
|
|
|
+ // 应用苏州配置
|
|
|
+ this.geoProjectionCenter = [120.62, 31.32]
|
|
|
+ this.geoProjectionScale = 800
|
|
|
+ this.flyLineCenter = [120.62, 31.32]
|
|
|
+ this.mapFocusLabelInfo = {
|
|
|
+ name: "苏州市",
|
|
|
+ enName: "SUZHOU CITY",
|
|
|
+ center: [120.62, 31.32],
|
|
|
+ }
|
|
|
+
|
|
|
+ // 重新加载地图数据
|
|
|
+ this.reloadMapData('suzhouJson')
|
|
|
+
|
|
|
+ // 触发事件通知父组件
|
|
|
+ emitter.$emit('mapModeChanged', 'suzhou')
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 切换回昆山地图
|
|
|
+ * 功能：从苏州地图切换回昆山地图
|
|
|
+ */
|
|
|
+ switchToKunshanMap() {
|
|
|
+ if (this.currentMapMode === 'kunshan') return
|
|
|
+
|
|
|
+ this.currentMapMode = 'kunshan'
|
|
|
+
|
|
|
+ // 应用昆山配置
|
|
|
+ this.geoProjectionCenter = [120.98422, 31.39244]
|
|
|
+ this.geoProjectionScale = 1200
|
|
|
+ this.flyLineCenter = [120.98422, 31.39244]
|
|
|
+ this.mapFocusLabelInfo = {
|
|
|
+ name: "昆山市",
|
|
|
+ enName: "KUNSHAN CITY",
|
|
|
+ center: [120.98422, 31.39244],
|
|
|
+ }
|
|
|
+
|
|
|
+ // 重新加载地图数据
|
|
|
+ this.reloadMapData('mapJson')
|
|
|
+
|
|
|
+ // 触发事件通知父组件
|
|
|
+ emitter.$emit('mapModeChanged', 'kunshan')
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 重新加载地图数据
|
|
|
+ * @param {string} resourceName - 资源名称
|
|
|
+ */
|
|
|
+ reloadMapData(resourceName) {
|
|
|
+ // 清除现有的焦点地图组
|
|
|
+ if (this.focusMapGroup) {
|
|
|
+ // 移除旧的地图元素
|
|
|
+ while (this.focusMapGroup.children.length > 0) {
|
|
|
+ const child = this.focusMapGroup.children[0]
|
|
|
+ this.focusMapGroup.remove(child)
|
|
|
+ if (child.geometry) child.geometry.dispose()
|
|
|
+ if (child.material) {
|
|
|
+ if (Array.isArray(child.material)) {
|
|
|
+ child.material.forEach(m => m.dispose())
|
|
|
+ } else {
|
|
|
+ child.material.dispose()
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 获取新的地图数据
|
|
|
+ const mapJsonData = this.assets.instance.getResource(resourceName)
|
|
|
+
|
|
|
+ // 重新创建省份地图
|
|
|
+ let [topMaterial, sideMaterial] = this.createProvinceMaterial()
|
|
|
+ this.focusMapTopMaterial = topMaterial
|
|
|
+ this.focusMapSideMaterial = sideMaterial
|
|
|
+
|
|
|
+ // 创建拉伸地图
|
|
|
+ let map = new ExtrudeMap(this, {
|
|
|
+ geoProjectionCenter: this.geoProjectionCenter,
|
|
|
+ geoProjectionScale: this.geoProjectionScale,
|
|
|
+ position: new Vector3(0, 0, 0.11),
|
|
|
+ data: mapJsonData,
|
|
|
+ depth: this.depth,
|
|
|
+ topFaceMaterial: topMaterial,
|
|
|
+ sideMaterial: sideMaterial,
|
|
|
+ renderOrder: 9,
|
|
|
+ })
|
|
|
+
|
|
|
+ // 创建顶部材质
|
|
|
+ let faceMaterial = new MeshStandardMaterial({
|
|
|
+ color: 0xffffff,
|
|
|
+ transparent: true,
|
|
|
+ opacity: 0.5,
|
|
|
+ })
|
|
|
+
|
|
|
+ // 添加渐变着色器
|
|
|
+ let faceGradientShader = new GradientShader(faceMaterial, {
|
|
|
+ uColor1: 0x12bbe0,
|
|
|
+ uColor2: 0x0094b5,
|
|
|
+ })
|
|
|
+
|
|
|
+ // 存储默认材质和高亮材质
|
|
|
+ this.defaultMaterial = faceMaterial
|
|
|
+ this.defaultLightMaterial = this.defaultMaterial.clone()
|
|
|
+ this.defaultLightMaterial.color = new Color("rgba(115,208,255,1)")
|
|
|
+ this.defaultLightMaterial.opacity = 0.8
|
|
|
+
|
|
|
+ // 创建顶部地图
|
|
|
+ let mapTop = new BaseMap(this, {
|
|
|
+ geoProjectionCenter: this.geoProjectionCenter,
|
|
|
+ geoProjectionScale: this.geoProjectionScale,
|
|
|
+ position: new Vector3(0, 0, this.depth + 0.22),
|
|
|
+ data: mapJsonData,
|
|
|
+ material: faceMaterial,
|
|
|
+ renderOrder: 2,
|
|
|
+ })
|
|
|
+
|
|
|
+ // 收集可交互的网格元素
|
|
|
+ this.eventElement = []
|
|
|
+ mapTop.mapGroup.children.map((group) => {
|
|
|
+ group.children.map((mesh) => {
|
|
|
+ if (mesh.type === "Mesh") {
|
|
|
+ this.eventElement.push(mesh)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ // 创建地图线条
|
|
|
+ this.mapLineMaterial = new LineBasicMaterial({
|
|
|
+ color: 0xffffff,
|
|
|
+ opacity: 0,
|
|
|
+ transparent: true,
|
|
|
+ fog: false,
|
|
|
+ })
|
|
|
+
|
|
|
+ let mapLine = new Line(this, {
|
|
|
+ geoProjectionCenter: this.geoProjectionCenter,
|
|
|
+ geoProjectionScale: this.geoProjectionScale,
|
|
|
+ data: mapJsonData,
|
|
|
+ material: this.mapLineMaterial,
|
|
|
+ renderOrder: 3,
|
|
|
+ })
|
|
|
+ mapLine.lineGroup.position.z += this.depth + 0.23
|
|
|
+
|
|
|
+ // 添加到焦点地图组
|
|
|
+ map.setParent(this.focusMapGroup)
|
|
|
+ mapTop.setParent(this.focusMapGroup)
|
|
|
+ mapLine.setParent(this.focusMapGroup)
|
|
|
+
|
|
|
+ // 更新标签
|
|
|
+ this.updateLabels()
|
|
|
+
|
|
|
+ // 更新飞线
|
|
|
+ this.updateFlyLines()
|
|
|
+
|
|
|
+ // 更新轮廓
|
|
|
+ this.updateStroke()
|
|
|
+
|
|
|
+ // 重新创建柱状图
|
|
|
+ this.recreateBar()
|
|
|
+
|
|
|
+ // 处理苏州区县标注和柱状图标签的显示/隐藏
|
|
|
+ console.log('reloadMapData - currentMapMode:', this.currentMapMode)
|
|
|
+ if (this.currentMapMode === 'suzhou') {
|
|
|
+ // 苏州模式：显示区县标签，隐藏柱状图
|
|
|
+ console.log('切换到苏州模式：显示区县标签，隐藏柱状图')
|
|
|
+ this.createSuzhouDistrictLabels()
|
|
|
+ this.setBarVisibility(false)
|
|
|
+ } else {
|
|
|
+ // 昆山模式：隐藏区县标签，显示柱状图
|
|
|
+ console.log('切换到昆山模式：隐藏区县标签，显示柱状图')
|
|
|
+ this.clearSuzhouDistrictLabels()
|
|
|
+ this.setBarVisibility(true)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 更新标签
|
|
|
+ */
|
|
|
+ updateLabels() {
|
|
|
+ console.log('updateLabels - mapFocusLabelInfo:', this.mapFocusLabelInfo)
|
|
|
+ // 更新地图焦点标签
|
|
|
+ if (this.otherLabel) {
|
|
|
+ console.log('updateLabels - otherLabel 数量:', this.otherLabel.length)
|
|
|
+ this.otherLabel.forEach((label, index) => {
|
|
|
+ console.log(`标签 ${index}:`, label.element ? label.element.className : '无 element')
|
|
|
+ // 检查标签是否是地图焦点标签（通过 className 判断）
|
|
|
+ if (label.element && label.element.classList.contains('map-label')) {
|
|
|
+ // 更新标签内容
|
|
|
+ const [x, y] = this.geoProjection(this.mapFocusLabelInfo.center)
|
|
|
+ console.log(`更新标签位置: [${x}, ${y}]`)
|
|
|
+ label.position.set(x, -y, 0.4)
|
|
|
+
|
|
|
+ // 更新文字
|
|
|
+ const nameEl = label.element.querySelector('span:first-child')
|
|
|
+ const enNameEl = label.element.querySelector('span:last-child')
|
|
|
+ console.log('更新文字:', this.mapFocusLabelInfo.name, this.mapFocusLabelInfo.enName)
|
|
|
+ if (nameEl) nameEl.textContent = this.mapFocusLabelInfo.name
|
|
|
+ if (enNameEl) enNameEl.textContent = this.mapFocusLabelInfo.enName
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ console.log('updateLabels - otherLabel 不存在')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 更新飞线
|
|
|
+ */
|
|
|
+ updateFlyLines() {
|
|
|
+ if (this.flyLineGroup) {
|
|
|
+ // 清除旧飞线
|
|
|
+ while (this.flyLineGroup.children.length > 0) {
|
|
|
+ this.flyLineGroup.remove(this.flyLineGroup.children[0])
|
|
|
+ }
|
|
|
+
|
|
|
+ // 重新创建飞线
|
|
|
+ this.createFlyLine()
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 重新创建柱状图
|
|
|
+ * 功能：切换地图模式时重新创建或清除柱状图
|
|
|
+ */
|
|
|
+ recreateBar() {
|
|
|
+ console.log('recreateBar - currentMapMode:', this.currentMapMode)
|
|
|
+ // 清除旧柱状图
|
|
|
+ if (this.barGroup) {
|
|
|
+ console.log('清除旧柱状图')
|
|
|
+ this.scene.remove(this.barGroup)
|
|
|
+ this.barGroup = null
|
|
|
+ }
|
|
|
+ // 清除旧标签
|
|
|
+ if (this.allProvinceLabel) {
|
|
|
+ console.log('清除旧柱状图标签，数量:', this.allProvinceLabel.length)
|
|
|
+ this.allProvinceLabel.forEach(label => {
|
|
|
+ if (label && label.element) {
|
|
|
+ label.element.remove()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.allProvinceLabel = []
|
|
|
+ }
|
|
|
+ // 清除光圈
|
|
|
+ if (this.allGuangquan) {
|
|
|
+ this.allGuangquan.forEach(quan => {
|
|
|
+ if (quan && quan.parent) {
|
|
|
+ quan.parent.remove(quan)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ this.allGuangquan = []
|
|
|
+ }
|
|
|
+
|
|
|
+ // 重置数组
|
|
|
+ this.allBar = []
|
|
|
+ this.allBarMaterial = []
|
|
|
+
|
|
|
+ // 重新创建柱状图（昆山模式下）
|
|
|
+ if (this.currentMapMode === 'kunshan') {
|
|
|
+ console.log('昆山模式，重新创建柱状图')
|
|
|
+ this.createBar()
|
|
|
+ console.log('createBar 完成后 - barGroup:', this.barGroup ? '存在' : '不存在')
|
|
|
+ console.log('createBar 完成后 - allProvinceLabel 数量:', this.allProvinceLabel ? this.allProvinceLabel.length : 0)
|
|
|
+ } else {
|
|
|
+ console.log('苏州模式，不创建柱状图')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 设置柱状图和标签的可见性
|
|
|
+ * @param {boolean} visible - 是否可见
|
|
|
+ */
|
|
|
+ setBarVisibility(visible) {
|
|
|
+ console.log('setBarVisibility:', visible)
|
|
|
+ console.log('barGroup:', this.barGroup ? '存在' : '不存在')
|
|
|
+ console.log('allProvinceLabel:', this.allProvinceLabel ? `数量 ${this.allProvinceLabel.length}` : '不存在')
|
|
|
+
|
|
|
+ // 设置柱状图可见性
|
|
|
+ if (this.barGroup) {
|
|
|
+ this.barGroup.visible = visible
|
|
|
+ console.log('设置柱状图可见性:', visible)
|
|
|
+ } else {
|
|
|
+ console.log('barGroup 不存在，无法设置可见性')
|
|
|
+ }
|
|
|
+
|
|
|
+ // 设置柱状图标签可见性
|
|
|
+ if (this.allProvinceLabel && this.allProvinceLabel.length > 0) {
|
|
|
+ console.log('设置柱状图标签可见性，标签数量:', this.allProvinceLabel.length)
|
|
|
+ this.allProvinceLabel.forEach((label, index) => {
|
|
|
+ if (label && label.element) {
|
|
|
+ console.log(`标签 ${index} - element:`, label.element.style.visibility)
|
|
|
+ if (visible) {
|
|
|
+ label.element.style.visibility = 'visible'
|
|
|
+ label.element.style.display = ''
|
|
|
+ label.element.style.opacity = '1'
|
|
|
+ console.log(`标签 ${index} 设置为可见`)
|
|
|
+ } else {
|
|
|
+ label.element.style.visibility = 'hidden'
|
|
|
+ label.element.style.display = 'none'
|
|
|
+ label.element.style.opacity = '0'
|
|
|
+ console.log(`标签 ${index} 设置为隐藏`)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ console.log(`标签 ${index} 不存在或没有 element`)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ console.log('allProvinceLabel 为空或不存在')
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /**
|
|
|
+ * 更新轮廓
|
|
|
+ */
|
|
|
+ updateStroke() {
|
|
|
+ // 轮廓会在下一次reload时更新
|
|
|
+ // 这里可以添加轮廓更新逻辑
|
|
|
+ }
|
|
|
+
|
|
|
/**
|
|
|
* 销毁
|
|
|
* 功能：销毁场景和资源，释放内存
|
BAI