cesium如何实现区域下钻

        首先，这里讲一下数据源，数据源是拷贝的DataV.GroAtlas里的数据，这里整合了一下之前发的区域高亮的代码来实现的，单击左键使得区域高亮，每次点击都移除上一次点击的模块，双击左键，实现区域下钻并请求对应的数据源，单击右键来实现恢复上一层级。具体代码如下：

<template>
  <div>
    <CesiumViewer ref="cesiumViewerRef" />
  </div>
</template>

<script setup>
import * as Cesium from "cesium";
import { ref, onMounted } from "vue";
import {
  province,
  xizang,
  ali,
  naqu,
  changdu,
  linzhi,
  shannan,
  lasan,
  rika,
} from "./json/data";
// import CesiumViewer from "../../cesiumComponents/cesiumViewer.vue";
import CesiumViewer from "@/components/cesiumViewer.vue";
let viewer, dataSource, highlightEntity;
const cesiumViewerRef = ref();

const regionValue = ref();
const regionData = ref([]);

onMounted(() => {
  viewer = window.cesiumViewer;
  dataSource = new Cesium.GeoJsonDataSource();
  viewer.dataSources.add(dataSource);
  provinceDataSource();
});
// 移除高亮显示
const removeHighlight = () => {
  if (Cesium.defined(highlightEntity)) {
    highlightEntity.polygon.material = Cesium.Color.POWDERBLUE.withAlpha(0.3);
    highlightEntity = null;
  }
};
// 加载西藏
const provinceDataSource = () => {
  // 移除事件监听和高亮显示
  destroyAllEvents();
  dataSource
    .load(province, {
      fill: Cesium.Color.TRANSPARENT,
      stroke: Cesium.Color.TRANSPARENT, //设置多边形轮廓的默认颜色
      strokeWidth: 20, //轮廓的宽度
      clamToGround: true, //让地图贴地
    })
    .then(() => {
      // 设置行政区域的样式
      const entities = dataSource.entities.values;
      entities?.forEach((item, index) => {
        const entity = entities[index];
        if (entity.name == "西藏自治区") {
          entity.polygon.material = Cesium.Color.POWDERBLUE.withAlpha(0.3);
          entity.polygon.outline = true;
          entity.polygon.outlineColor = Cesium.Color.RED;
          var polyPositions = entity.polygon.hierarchy.getValue(
            Cesium.JulianDate.now()
          ).positions;
          var polyCenter =
            Cesium.BoundingSphere.fromPoints(polyPositions).center;
          polyCenter =
            Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
          viewer.entities.add({
            position: polyCenter,
            label: {
              //标签
              scale: 0.6,
              font: "24px sans-serif",
              text: entity.properties.name,
              // showBackground: true,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            },
          });
        }
      });
    });

  // 双击
  viewer.screenSpaceEventHandler.setInputAction((event) => {
    const pickedObject = viewer.scene.pick(event.position);
    if (
      Cesium.defined(pickedObject) &&
      pickedObject.id instanceof Cesium.Entity &&
      pickedObject.id.name === "西藏自治区"
    ) {
      removeHighlight();
      console.log(pickedObject.id.properties.adcode);
      if (pickedObject.id.properties.adcode) {
        cityDataSource();
        // 移除父级区域
        viewer.entities.removeAll();
      }

      // 高亮显示行政区域
    } else {
      removeHighlight();
    }
  }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

  // 单击
  viewer.screenSpaceEventHandler.setInputAction((event) => {
    const pickedObject = viewer.scene.pick(event.position);
    if (
      Cesium.defined(pickedObject) &&
      pickedObject.id instanceof Cesium.Entity &&
      pickedObject.id.name === "西藏自治区"
    ) {
      removeHighlight();
      // 高亮显示行政区域
      highlightEntity = pickedObject.id;
      regionValue.value = highlightEntity.properties.adcode.getValue()
      highlightEntity.polygon.material = Cesium.Color.POWDERBLUE;
    } else {
      removeHighlight();
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
};

const cityDataSource = () => {
  // 移除事件监听和高亮显示
  destroyAllEvents();
  dataSource
    .load(xizang, {
      stroke: Cesium.Color.TRANSPARENT, //设置多边形轮廓的默认颜色
      strokeWidth: 20, //轮廓的宽度
      clamToGround: true, //让地图贴地
    })
    .then(() => {
      // 设置行政区域的样式
      const entities = dataSource.entities.values;
      entities?.forEach((item, index) => {
        const entity = entities[index];
        entity.polygon.material = Cesium.Color.POWDERBLUE.withAlpha(0.3);
        entity.polygon.outline = true;
        entity.polygon.outlineColor = Cesium.Color.RED;
        var polyPositions = entity.polygon.hierarchy.getValue(
          Cesium.JulianDate.now()
        ).positions;
        var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
        polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
        viewer.entities.add({
          position: polyCenter,
          label: {
            //标签
            scale: 0.6,
            font: "24px sans-serif",
            text: entity.properties.name,
            // showBackground: true,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          },
        });
      });
    });
  let pickedId = "";
  // 单击
  viewer.screenSpaceEventHandler.setInputAction((event) => {
    const pickedObject = viewer.scene.pick(event.position);
    if (
      Cesium.defined(pickedObject) &&
      pickedObject.id instanceof Cesium.Entity
    ) {
      pickedId = pickedObject.id.id;
      removeHighlight();
      // 高亮显示行政区域
      highlightEntity = pickedObject.id;
      regionValue.value = highlightEntity.properties.adcode.getValue()
      highlightEntity.polygon.material = Cesium.Color.POWDERBLUE;
    } else {
      removeHighlight();
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

  // 双击
  viewer.screenSpaceEventHandler.setInputAction((event) => {
    const pickedObject = viewer.scene.pick(event.position);
    if (
      Cesium.defined(pickedObject) &&
      pickedObject.id instanceof Cesium.Entity
    ) {
      if (pickedObject.id.name == "阿里地区") {
        countyDataSource(ali);
      } else if (pickedObject.id.name == "那曲市") {
        countyDataSource(naqu);
      } else if (pickedObject.id.name == "昌都市") {
        countyDataSource(changdu);
      } else if (pickedObject.id.name == "林芝市") {
        countyDataSource(linzhi);
      } else if (pickedObject.id.name == "山南市") {
        countyDataSource(shannan);
      } else if (pickedObject.id.name == "拉萨市") {
        countyDataSource(lasan);
      } else if (pickedObject.id.name == "日喀则市") {
        countyDataSource(rika);
      }
      removeHighlight();
      // 移除父级区域
      viewer.entities.removeAll();
      // viewer.dataSources.removeAll();
    } else {
      removeHighlight();
    }
  }, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);

  viewer.screenSpaceEventHandler.setInputAction((event) => {
    const pickedObject = viewer.scene.pick(event.position);
    if (
      typeof pickedObject == "undefined" ||
      (Cesium.defined(pickedObject) &&
        pickedObject.id instanceof Cesium.Entity &&
        pickedObject.id.id !== pickedId)
    ) {
      removeHighlight();
      // 移除父级区域
      viewer.entities.removeAll();
      provinceDataSource();
    }
  }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
};

const countyDataSource = (data) => {
  // 移除事件监听和高亮显示
  destroyAllEvents();
  dataSource
    .load(data, {
      stroke: Cesium.Color.TRANSPARENT, //设置多边形轮廓的默认颜色
      strokeWidth: 20, //轮廓的宽度
      clamToGround: true, //让地图贴地
    })
    .then(() => {
      // 设置行政区域的样式
      const entities = dataSource.entities.values;
      entities?.forEach((item, index) => {
        const entity = entities[index];
        entity.polygon.material = Cesium.Color.POWDERBLUE.withAlpha(0.3);
        entity.polygon.outline = true;
        entity.polygon.outlineColor = Cesium.Color.RED;
        var polyPositions = entity.polygon.hierarchy.getValue(
          Cesium.JulianDate.now()
        ).positions;
        var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;
        polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);
        viewer.entities.add({
          position: polyCenter,
          label: {
            //标签
            scale: 0.6,
            font: "24px sans-serif",
            text: entity.properties.name,
            // showBackground: true,
            horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
          },
        });
      });
    });
  // 单击
  let pickedId = "";
  viewer.screenSpaceEventHandler.setInputAction((event) => {
    const pickedObject = viewer.scene.pick(event.position);
    if (
      Cesium.defined(pickedObject) &&
      pickedObject.id instanceof Cesium.Entity
    ) {
      pickedId = pickedObject.id.id;
      removeHighlight();
      // 高亮显示行政区域
      highlightEntity = pickedObject.id;
      highlightEntity.polygon.material = Cesium.Color.POWDERBLUE;
    } else {
      removeHighlight();
    }
  }, Cesium.ScreenSpaceEventType.LEFT_CLICK);

  viewer.screenSpaceEventHandler.setInputAction((event) => {
    const pickedObject = viewer.scene.pick(event.position);
    if (
      typeof pickedObject == "undefined" ||
      (Cesium.defined(pickedObject) &&
        pickedObject.id instanceof Cesium.Entity &&
        pickedObject.id.id !== pickedId)
    ) {
      removeHighlight();
      // 移除父级区域
      viewer.entities.removeAll();
      cityDataSource();
    }
  }, Cesium.ScreenSpaceEventType.RIGHT_CLICK);
};

// 移除事件
const destroyAllEvents = () => {
  // 单击左键
  viewer.screenSpaceEventHandler.removeInputAction(
    Cesium.ScreenSpaceEventType.LEFT_CLICK
  );
  // 双击左键
  viewer.screenSpaceEventHandler.removeInputAction(
    Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK
  );
  // 单击右键
  viewer.screenSpaceEventHandler.removeInputAction(
    Cesium.ScreenSpaceEventType.RIGHT_CLICK
  );
};
const handleNodeClick = (e) => {
  console.log(e, "========1234");
};
</script>

<style lang="scss" scoped>
.zkr-el-tree {
  width: 240px;
  height: 500px;
  overflow: auto;
  position: absolute;
  top: 20px;
}
</style>

注：如有问题或者有更好的解决方式可以联系笔者，进行解答及优化。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/135955.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

C++ 对象的拷贝、赋值、清理和移动（MyString类）

C++ 对象的拷贝、赋值、清理和移动（MyString类）

MyString类 MyString.h #ifndef MYSTRING_H #define MYSTRING_H#include <iostream> using namespace std;class MyString {private:char* str nullptr;unsigned int MaxSize 0;public:MyString(); /*默认构造函数*/MyString(unsigned int n); /*有…
阅读更多...
SpringBoot系列-2 自动装配

SpringBoot系列-2 自动装配

背景&#xff1a; Spring提供了IOC机制&#xff0c;基于此我们可以通过XML或者注解配置&#xff0c;将三方件注册到IOC中。问题是每个三方件都需要经过手动导入依赖、配置属性、注册IOC&#xff0c;比较繁琐。 基于"约定优于配置"原则的自动装配机制为该问题提供了一…
阅读更多...
recycleView（二）Grid，中间有间距，left，right，top，bottom没有间距

recycleView（二）Grid，中间有间距，left，right，top，bottom没有间距

1.作用 1.效果图 item的top&#xff0c;bottom&#xff0c;right&#xff0c;left都是0 2.代码 1.关键代码 // 设置RecycleView的item间的间距&#xff0c;上下间距为20排序&#xff0c;左右间距为20排序binding.rv.addItemDecoration(object : RecyclerView.ItemDecorat…
阅读更多...
算法——滑动窗口

算法——滑动窗口

什么是窗口&#xff1f;就是符合题目要求的区域内的数据&#xff0c;将每次符合数据的窗口内的数据记录下来&#xff0c;然后将窗口后移&#xff0c;寻找其他符合要求的数据&#xff0c;每次进入窗口和退出窗口都需要一定的要求 一、 LCR 008. 长度最小的子数组 - 力扣&#…
阅读更多...
数据结构—二叉树的模拟实现（c语言）

数据结构—二叉树的模拟实现（c语言）

目录 一.前言 二.模拟实现链式结构的二叉树 2.1二叉树的底层结构 2.2通过前序遍历的数组"ABD##E#H##CF##G##"构建二叉树 2.3二叉树的销毁 2.4二叉树查找值为x的节点 2.5二叉树节点个数 2.6二叉树叶子节点个数 2.7二叉树第k层节点个数 三.二叉树的遍历 3.1…
阅读更多...
Keras实现图注意力模型GAT

Keras实现图注意力模型GAT

简介&#xff1a;本文实现了一个GAT图注意力机制的网络层&#xff0c;可以在Keras中像调用Dense网络层、Input网络层一样直接搭积木进行网络组合。 一&#xff0c;基本展示 如下图所示&#xff0c;我们输入邻接矩阵和节点特征矩阵之后&#xff0c;可以直接调用myGraphAttention…
阅读更多...
C语言之pthread_once实例总结(八十三)

C语言之pthread_once实例总结(八十三)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…
阅读更多...
史上最全最新Ubuntu20.04安装教程（图文）

史上最全最新Ubuntu20.04安装教程（图文）

总的来说&#xff0c;安装Ubantu包含以下三个步骤&#xff1a; 一、安装虚拟机 二、Ubuntu镜像下载 三、虚拟机配置 一、安装虚拟机 选择安装VMware Workstation&#xff0c;登录其官网下载安装包&#xff0c;链接如下&#xff1a; 下载 VMware Workstation Pro​www.vmwa…
阅读更多...
设计模式之--原型模式(深浅拷贝)

设计模式之--原型模式(深浅拷贝)

原型模式 缘起 某天&#xff0c;小明的Leader找到小明:“小明啊&#xff0c;如果有个发简历的需求&#xff0c;就是有个简历的模板&#xff0c;然后打印很多份&#xff0c;要去一份一份展示出来&#xff0c;用编程怎么实现呢&#xff1f;” 小明一听&#xff0c;脑袋里就有了…
阅读更多...
ARM64 linux并发与同步之内存屏障

ARM64 linux并发与同步之内存屏障

1.2 内存屏障 1.2.1 概念理解 原理部分比较苦涩难懂&#xff0c;我们先不过多详细介绍这部分的由来和经过&#xff0c;接下来着重讲解什么用途和实现&#xff1b; ARM64架构中提供了3条内存屏障指令。 数据存储屏障(Data Memory Barrier, DMB)指令。数据同步屏障(Data Synch…
阅读更多...
劲松HPV防治诊疗中心发布：HPV感染全面防治解决方案

劲松HPV防治诊疗中心发布：HPV感染全面防治解决方案

在当今社会&#xff0c;HPV(人乳头瘤病毒)感染问题已成为广大公众关注的焦点。作为一种高度传染性的病毒&#xff0c;HPV感染不仅可能导致生殖器疣&#xff0c;还可能引发各种癌症。面对这一严重威胁&#xff0c;劲松HPV防治诊疗中心以其专业的医疗团队、正规的治疗流程和全方位…
阅读更多...
Python基础入门例程51-NP51 列表的最大与最小(循环语句)

Python基础入门例程51-NP51 列表的最大与最小(循环语句)

最近的博文&#xff1a; Python基础入门例程50-NP50 程序员节&#xff08;循环语句&#xff09;-CSDN博客 Python基础入门例程49-NP49 字符列表的长度-CSDN博客 Python基础入门例程48-NP48 验证登录名与密码&#xff08;条件语句&#xff09;-CSDN博客 目录 最近的博文&…
阅读更多...
函数极限求解方法归纳

函数极限求解方法归纳

1、连续函数直接代入值&#xff08;加减不可以部分代入值&#xff09; 例题1 配凑构造等价无穷小 等价无穷小 注意&#xff1a;不要在加减中部分使用等价无穷小&#xff0c;可以利用拆极限的方式求&#xff0c;拆出来的每一部分都要有极限&#xff0c;如果有一部分没有极限就是…
阅读更多...
STM32F4X定时器之通用定时器

STM32F4X定时器之通用定时器

一、STM32通用定时器概述 通用定时器包括一个16位或32位自动重载计数器&#xff0c;可通过可编程预分频器进行驱动。定时器可以实现多种功能&#xff0c;包括测量输入信号的脉冲宽度和生成输出波形&#xff0c;通过使用定时器预分频器和RCC时钟控制器预分频器&#xff0c;可以…
阅读更多...
目标检测——Yolo系列（YOLOv1/2/v3/4/5/x/6/7/8）

目标检测——Yolo系列（YOLOv1/2/v3/4/5/x/6/7/8）

目标检测概述 什么是目标检测&#xff1f; 滑动窗口&#xff08;Sliding Window&#xff09; 滑动窗口的效率问题和改进 滑动窗口的效率问题&#xff1a;计算成本很大 改进思路 1&#xff1a;使用启发式算法替换暴力遍历 例如 R-CNN&#xff0c;Fast R-CNN 中使用 Selectiv…
阅读更多...
C++算法：完美矩形

C++算法：完美矩形

题目 给你一个数组 rectangles &#xff0c;其中 rectangles[i] [xi, yi, ai, bi] 表示一个坐标轴平行的矩形。这个矩形的左下顶点是 (xi, yi) &#xff0c;右上顶点是 (ai, bi) 。 如果所有矩形一起精确覆盖了某个矩形区域&#xff0c;则返回 true &#xff1b;否则&#xf…
阅读更多...
AI 绘画 | Stable Diffusion WebUI的基本设置和插件扩展

AI 绘画 | Stable Diffusion WebUI的基本设置和插件扩展

前言 Stable Diffusion WebUI是一个基于Gradio库的浏览器界面&#xff0c;用于配置和生成AI绘画作品&#xff0c;并且进行各种精细地配置。它支持目前主流的开源AI绘画模型&#xff0c;例如NovelAI/Stable Diffusion。 在基本设置方面&#xff0c;Stable Diffusion WebUI的默…
阅读更多...
asp.net外卖网站系统VS开发mysql数据库web结构c#编程Microsoft Visual Studio

asp.net外卖网站系统VS开发mysql数据库web结构c#编程Microsoft Visual Studio

一、源码特点 asp.net外卖网站系统 是一套完善的web设计管理系统&#xff0c;系统采用mvc模式&#xff08;BLLDALENTITY&#xff09;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为vs2010&#xff0c;数据库为mysql&#xff0c;使用c#语…
阅读更多...
Git的原理与使用(一)

Git的原理与使用(一)

目录 Git初始 Git安装 Git基本操作 创建git本地仓库 配置git 工作区,暂存区,版本库 添加文件,提交文件 查看.git文件 修改文件 版本回退 小结 Git初始 git是一个非常强大的版本控制工具.可以快速的将我们的文档和代码等进行版本管理. 下面这个实例看理解下为什么需…
阅读更多...
CountDownLatch和CyclicBarrier详解

CountDownLatch和CyclicBarrier详解

1. CountDownLatch 1.1 简介 CountDownLatch 是 Java 中并发包&#xff08;java.util.concurrent&#xff09;提供的一种同步工具&#xff0c;用于在多线程环境中协调多个线程之间的执行顺序。它的作用是允许一个或多个线程等待其他线程完成操作。 CountDownLatch 通过一个计…
阅读更多...
最新文章

Copyright @ 2022~2023