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>

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

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

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

多级缓存之缓存同步

多级缓存之缓存同步

缓存数据同步的常见方式有三种&#xff1a; 设置有效期&#xff1a;给缓存设置有效期&#xff0c;到期后自动删除。再次查询时更新 优势&#xff1a;简单、方便缺点&#xff1a;时效性差&#xff0c;缓存过期之前可能不一致场景&#xff1a;更新频率较低&#xff0c;时效性要…
阅读更多...
数据库timestamp遇到的小问题

数据库timestamp遇到的小问题

在执行一个简单的更新语句时&#xff0c;当前修改的那一条数据的创建时间create_time会随着更新而变化 update read_feedback SET READ_STATUS ?, READ_ORG_NO ?, READ_ORG ?, READ_USER_NO ?, READ_USER ?, READ_TIME ? where ID ? 打了断点排查也没看到对cr…
阅读更多...
让AI拥有人类的价值观，和让AI拥有人类智能同样重要

让AI拥有人类的价值观，和让AI拥有人类智能同样重要

编者按&#xff1a;2023年是微软亚洲研究院建院25周年。25年来&#xff0c;微软亚洲研究院探索并实践了一种独特且有效的企业研究院的新模式&#xff0c;并以此为基础产出了诸多对微软公司和全球社会都有积极影响的创新成果。一直以来&#xff0c;微软亚洲研究院致力于创造具有…
阅读更多...
推荐系统笔记--Swing模型的原理

推荐系统笔记--Swing模型的原理

1--Swing模型的引入 在 Item CF 召回中&#xff0c;物品的相似度是基于其受众的交集来衡量的&#xff0c;但当受众的交集局限在一个小圈子时&#xff0c;就会误将两个不相似的物品定义为相似&#xff1b; Swing 模型引入用户的重合度来判断两个用户是否属于一个小圈子&#xff…
阅读更多...
基于检索增强生成的LLM应用开发实战【】

基于检索增强生成的LLM应用开发实战【】

大型语言模型&#xff08;LLM&#xff09;无疑改变了我们与信息交互的方式。 然而&#xff0c;对于我们可以向他们提出的要求&#xff0c;它们也有相当多的限制。 LLM&#xff08;例如 Llama-2-70b、gpt-4 等&#xff09;仅了解他们接受过训练的信息&#xff0c;当我们要求他们…
阅读更多...
C语言求数组中出现次数最多的元素

C语言求数组中出现次数最多的元素

一、前言 遇到一个需求&#xff0c;需要求数组中出现次数最多的元素&#xff0c;查找了一些资料&#xff0c;结合自己的思路&#xff0c;编写了程序并验证。 只考虑元素为非负整数的数组&#xff0c;如果有出现次数相同的元素&#xff0c;则返回较小元素。 二、编程思路 以数…
阅读更多...
使用order by 排序后的是10 6 7 8 9 而不是 6 7 8 9 10?

使用order by 排序后的是10 6 7 8 9 而不是 6 7 8 9 10?

问题 sql order by 排序后的为什么 是10 6 7 8 9 而不是 6 7 8 9 10? 思路 在 SQL 中&#xff0c;ORDER BY 默认的排序方式是升序&#xff08;从小到大&#xff09;。所以&#xff0c;如果您简单地使用 ORDER BY 对某个列进行排序&#xff0c;它会将数字按照升序排列&#…
阅读更多...
亚马逊鲲鹏系统可全自动化批量操作亚马逊买家号

亚马逊鲲鹏系统可全自动化批量操作亚马逊买家号

亚马逊鲲鹏系统可以注册买家号、智能养号、自动下单、自动留评、QA等&#xff0c;是一款从注册到下单于一体的软件。 如果想要自动化注册&#xff0c;那么准备好账号所需要的邮箱、ip、手机号之后就可以进行自动注册了&#xff0c;注册时可以自动输入账号密码信息、自动接收验证…
阅读更多...
zabbix的服务器端 server端安装部署

zabbix的服务器端 server端安装部署

zabbix的服务器端 server 主机iplocalhost&#xff08;centos 7&#xff09;192.168.10.128 zabbix官网部署教程 但是不全&#xff0c;建议搭配这篇文章一起看 zabbixAgent部署 安装mysql 所有配置信息和Zabbix收集到的数据都被存储在数据库中。 下载对应的yum源 yum ins…
阅读更多...
基于flask和fomantic-ui的简易p2p文件分享平台的手动实现

基于flask和fomantic-ui的简易p2p文件分享平台的手动实现

背景 开学一个多月了&#xff0c;由于繁重的学业和懒惰&#xff0c;都没怎么更新有意思的博客。 前几天突然想到了一个想法。同学之间平常用网络分享一个文件&#xff0c;大部分都是用的qq。但是qq看起来把文件拖到聊天框点击发送就发给对面同学了。但是实际上是先上传到了腾…
阅读更多...
HCIE-灾备技术和安全服务

HCIE-灾备技术和安全服务

灾备技术 灾备包含两个概念&#xff1a;容灾、备份 备份是为了保证数据的完整性&#xff0c;数据不丢失。全量备份、增量备份&#xff0c;备份数据还原。 容灾是为了保证业务的连续性&#xff0c;尽可能不断业务。 快照&#xff1a;保存的不是底层块数据&#xff0c;保存的是逻…
阅读更多...
相关关系与因果关系

相关关系与因果关系

本文来自&#xff1a;https://towardsdatascience.com/a-step-by-step-guide-in-detecting-causal-relationships-using-bayesian-structure-learning-in-python-c20c6b31cee5 作者&#xff1a;Erdogan Taskesen 在机器学任务中&#xff0c;确定变量间的因果关系&#xff08;c…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023