Cesium根据地图的缩放zoom实现不同级别下geojson行政边界的对应展示
实现效果:
随着地图的缩放,展示对应缩放级别下的行政边界。

准备数据:
1.国家行政边界数据 (country.json)
2.省级行政边界数据 (province.json)
3.市级行政边界数据(city.json)
数据形式类似于下图:

准备方法:
以下几种准备的方法可为公用方法,写在js文件中,在需要使用的vue文件中,直接引如使用。
1.加载geojson数据的方法
function addGeoJson(urlStr, colorStr, name, callback, alpha, lineAlpha) {let entity = null;if (!urlStr) return;return new Promise((resolve, reject) => {Cesium.GeoJsonDataSource.load(urlStr).then(dataSource => {polygonDataSource = dataSource;let color;dataSource.name = name;for (let i = 0; i < dataSource.entities.values.length; ++i) {entity = dataSource.entities.values[i];if (!entity.polygon) continue;color = Cesium.Color.fromCssColorString(colorStr).withAlpha(alpha);entity.polygon = new Cesium.PolygonGraphics({hierarchy: entity.polygon.hierarchy._value,outline: false,material: color,classificationType: Cesium.ClassificationType.TERRAIN,zIndex: 10,});entity.polyline = new Cesium.PolylineGraphics({positions: [...entity.polygon.hierarchy._value.positions, entity.polygon.hierarchy._value.positions[0]],width: 2,material: Cesium.Color.fromCssColorString(colorStr).withAlpha(lineAlpha),clampToGround: true,classificationType: Cesium.ClassificationType.TERRAIN,});entity.name = name;entity.elId = entity.properties._adcode._value;Cesium.Cartesian3.fromDegrees(entity.properties.centroid._value[0], entity.properties.centroid._value[1]),entity.cursor = true;}addGeoJsonData.push(dataSource);viewer.dataSources.add(dataSource);callback(dataSource.entities.values);resolve(entity);});});
}
2.获取zoom缩放级别的方法
// 获取层级高度
function heightToZoom() {// height 取整const height = Math.ceil(viewer.camera.positionCartographic.height);const A = 40487.57;const B = 0.00007096758;const C = 91610.74;const D = -40467.74;return (D + (A - D) / (1 + Math.pow(height / C, B))).toFixed(2);
}
3.隐藏或显示geojson数据的方法
// 隐藏或显示边界
function hidenModelByID(name, bool) {if (typeof name === 'string') {if(viewer.dataSources._dataSources) {viewer.dataSources._dataSources.forEach(item=>{if(item._name == name){item.show = bool}})}}
}
实现方式:
实现思路:在页面初始化时将3种边界数据均加载,通过控制显隐来展示不同缩放级别下的数据。该种方法是为了避免两种缩放级别切换边界展示时加载间隙无边界的情况。
1.初始页面加载3种geojson数据
默认展示国界,剩下两种不展示,同时在mounted中添加监听方法
import provinceData from '@/assets/data/province.json'
import countryData from '@/assets/data/country.json'
import cityData from '@/assets/data/city.json'
import { heightToZoom } from '@/utils/utils'
import { addGeoJson, hidenModelByID } from '@/earth/others/addJsonProvince.js' // 上面添加geojson和隐藏geojson的方法export default {
data() {return {boundaryList: [{id: 'country',name: '国界',data: countryData,minimumLevel: 1,maximumLevel: 3.33,isloaded: true},{id: 'province',name: '省界',data: provinceData,minimumLevel: 3.33,maximumLevel: 4.99,isloaded: false},{id: 'city',name: '市界',data: cityData,minimumLevel: 4.99,maximumLevel: 20,isloaded: false}],countryEntity: null, // 国界实体provinceEntity: null, // 省界实体cityEntity: null, // 市界实体}}
mounted() {this.loadCountryData() // 默认添加国界this.getBoundary() // 添加监听},
methods: {
// 加载国界loadCountryData() {addGeoJson(countryData, '#25FF96', 'country', () => {}, 0.01, 1).then((entity) => {this.countryEntity = entity}) // 添加国界addGeoJson(provinceData, '#25FF96', 'province', () => {}, 0.01, 1).then((entity) => {this.provinceEntity = entityhidenModelByID('province', false)}) // 添加省界addGeoJson(cityData, '#25FF96', 'city', () => {}, 0.01, 1).then((entity) => {this.cityEntity = entityhidenModelByID('city', false)}) // 添加市界},
}
}
2. 添加鼠标缩放事件监听方法
getBoundary() {hidenModelByID('country', true)hidenModelByID('province', false)hidenModelByID('city', false)viewer.camera.changed.addEventListener(this.cameraChangedListener)},
3.根据缩放层级进行不同geojson数据的展示
cameraChangedListener() {let that = thisconst currentZoomLevel = heightToZoom() // 准备方法中已经写了该方法直接引入使用console.log('zoomLevel', currentZoomLevel)// 根据当前缩放级别加载相应的边界数据that.boundaryList.forEach((boundary) => {if (currentZoomLevel >= boundary.minimumLevel && currentZoomLevel <= boundary.maximumLevel) {this.hiddenAllBoundary()hidenModelByID(boundary.id, true)}})},
4.重置所有geojson数据,仅是全部置为不展示,并没有移除监听
// 隐藏所有的行政边界hiddenAllBoundary() {hidenModelByID('country', false)hidenModelByID('province', false)hidenModelByID('city', false)},
5.页面不在需要geojson行政边界时,移除监听,避免影响其他操作
removeBoundary() {this.hiddenAllBoundary()viewer.camera.changed.removeEventListener(this.cameraChangedListener);},
相关文章:
Cesium根据地图的缩放zoom实现不同级别下geojson行政边界的对应展示
实现效果: 随着地图的缩放,展示对应缩放级别下的行政边界。 准备数据: 1.国家行政边界数据 (country.json) 2.省级行政边界数据 (province.json) 3.市级行政边界数据(city.json&…...
Linux初识:【shell命令以及运行原理】【Linux权限的概念与权限管理】
目录 一.shell命令以及运行原理 二.Linux权限的概念与权限管理 2.1Linux权限的概念 sudo普通用户提权 2.2Linux权限管理 2.2.1文件访问者的分类(人) 2.2.2文件类型和访问权限(事物属性) 2.2.3文件权限值的表示方法 字符…...
深入剖析 Wireshark:网络协议分析的得力工具
在网络技术的广阔领域中,网络协议分析是保障网络正常运行、优化网络性能以及进行网络安全防护的关键环节。而 Wireshark 作为一款开源且功能强大的网络协议分析工具,在网络工程师、安全专家以及网络技术爱好者中广受欢迎。本文将深入介绍 Wireshark 的功…...
【AIGC】SYNCAMMASTER:多视角多像机的视频生成
标题:SYNCAMMASTER: SYNCHRONIZING MULTI-CAMERA VIDEO GENERATION FROM DIVERSE VIEWPOINTS 主页:https://jianhongbai.github.io/SynCamMaster/ 代码:https://github.com/KwaiVGI/SynCamMaster 文章目录 摘要一、引言二、使用步骤2.1 TextT…...
PyTorch框架——基于深度学习YOLOv5神经网络水果蔬菜检测识别系统
基于深度学习YOLOv5神经网络水果蔬菜检测识别系统,其能识别的水果蔬菜有15种,# 水果的种类 names: [黑葡萄, 绿葡萄, 樱桃, 西瓜, 龙眼, 香蕉, 芒果, 菠萝, 柚子, 草莓, 苹果, 柑橘, 火龙果, 梨子, 花生, 黄瓜, 土豆, 大蒜, 茄子, 白萝卜, 辣椒, 胡萝卜,…...
Redisson中红锁(RedLock)的实现
一、什么是红锁 当在单点redis中实现redis锁时,一旦redis服务器宕机,则无法进行锁操作。因此会考虑将redis配置为主从结 构,但在主从结构中,数据复制是异步实现的。假设在主从结构中,master会异步将数据复制到slave中…...
小结:路由器和交换机的指令对比
路由器和交换机的指令有一定的相似性,但也有明显的区别。以下是两者指令的对比和主要差异: 相似之处 基本操作 两者都支持类似的基本管理命令,比如: 进入系统视图:system-view查看当前配置:display current…...
使用yarn命令创建Vue3项目
文章目录 1.技术栈2.创建流程2.1创建vue3项目2.2选择配置项2.3进入项目目录 3.使用Yarn启动项目3.1安装依赖3.2运行项目 1.技术栈 yarnvitevue3 2.创建流程 2.1创建vue3项目 vue create 项目名称2.2选择配置项 直接回车可选择Vue3 2.3进入项目目录 cd 项目名称默认在当前…...
Three.js+Vue3+Vite应用lil-GUI调试开发3D效果(三)
前期文章中我们完成了创建第一个场景、添加轨道控制器的功能,接下来我们继续阐述其他的功能,本篇文章中主要讲述如何应用lil-GUI调试开发3D效果,在开始具体流程和步骤之前,请先查看之前的内容,因为该功能必须在前期内容…...
K8S集群常用命令
1,查看pod kubectl get pods -A 查看所有的pod kubectl get pods 这个只查看namespace为default下的pod,也就是只查看默认命名空间下的pod kubectl get pod -A -o wide 查看所有的pod,并且放出的信息更全(包含了pod的ip࿰…...
【优先算法】滑动窗口--(结合例题讲解解题思路)(C++)
目录 1. 例题1:最大连续1的个数 1.1 解题思路 1.2代码实现 1.3 错误示范如下:我最开始写了一种,但是解答错误,请看,给大家做个参考 2. 将 x 减到 0 的最小操作数 2.1解题思路 2.2代码实现 1. 例题1ÿ…...
mayavi -> python 3D可视化工具Mayavi的安装
前言 Mayavi是一个基于VTK(Visualization Toolkit)的科学计算和可视化工具,主要用于数据可视化和科学计算领域。 它提供了一系列的高级可视化工具,包括2D和3D图形、表面和体积渲染、流场可视化等。Mayavi可以通过Python脚本进行调…...
【C++】B2112 石头剪子布
博客主页: [小ᶻ☡꙳ᵃⁱᵍᶜ꙳] 本文专栏: C 文章目录 💯前言💯题目描述游戏规则:输入格式:输出格式:输入输出样例:解题分析与实现 💯我的做法实现逻辑优点与不足 💯…...
【Vue】vue3 video 保存视频进度,每次进入加载上次的视频进度
使用 localStorage 存储每个视频的播放进度在组件加载时恢复上次的播放进度在视频播放过程中实时保存进度在组件卸载前保存最终进度使用 timeupdate 事件来监听视频播放进度的变化 在模板中为视频元素添加事件监听: <videoloopautoplaycontrols:id"video_…...
C# 25Dpoint
C# 25Dpoint ,做一个备份 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms;namespace _25Dpoint {public partial cl…...
如何制作一个高质量的 Dockerfile 镜像:从入门到实践
Docker 是一种轻量级的容器化技术,能够将应用程序及其依赖打包到一个可移植的容器中。Dockerfile 是构建 Docker 镜像的核心文件,它定义了镜像的构建步骤和配置。通过编写 Dockerfile,我们可以自动化地构建镜像,确保应用程序在不同…...
Linux 机器学习
Linux 机器学习是指在 Linux 操作系统环境下进行机器学习相关的开发、训练和应用。 具体步骤 环境搭建: 选择合适的 Linux 发行版:如 Ubuntu、Fedora、Arch Linux 等。Ubuntu 因其易用性和丰富的软件包管理系统,适合初学者;Fed…...
青少年编程与数学 02-006 前端开发框架VUE 25课题、UI数据
青少年编程与数学 02-006 前端开发框架VUE 25课题、UI数据 一、UI数据二、Element Plus处理响应式数据三、Vuetify处理响应式数据 课题摘要:本文探讨了UI数据在用户界面中的重要性和处理方法。UI数据包括展示数据、用户输入、状态数据等,对用户体验和应用交互性有直…...
css实现响应式详解
一、媒体查询(Media Queries) 基本概念 媒体查询是 CSS3 中用于根据不同的设备特性(如屏幕宽度、高度、设备类型等)应用不同样式规则的技术。它允许你为特定的媒体类型(如屏幕、打印、手持设备等)和条件&a…...
python-应用自动化操作方法集合
python-PC应用自动化操作 pywinauto:适合Windows系统的软件(GUI),通过遍历窗口(对话框)和窗口里的UI控件进行定位操作,也可以控制鼠标和键盘输入等 https://geekdaxue.co/read/pywinauto-doc-zh…...
连锁超市冷库节能解决方案:如何实现超市降本增效
在连锁超市冷库运营中,高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术,实现年省电费15%-60%,且不改动原有装备、安装快捷、…...
质量体系的重要
质量体系是为确保产品、服务或过程质量满足规定要求,由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面: 🏛️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限,形成层级清晰的管理网络…...
Swagger和OpenApi的前世今生
Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章,二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑: 🔄 一、起源与初创期:Swagger的诞生(2010-2014) 核心…...
Java多线程实现之Thread类深度解析
Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...
第7篇:中间件全链路监控与 SQL 性能分析实践
7.1 章节导读 在构建数据库中间件的过程中,可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中,必须做到: 🔍 追踪每一条 SQL 的生命周期(从入口到数据库执行)&#…...
《信号与系统》第 6 章 信号与系统的时域和频域特性
目录 6.0 引言 6.1 傅里叶变换的模和相位表示 6.2 线性时不变系统频率响应的模和相位表示 6.2.1 线性与非线性相位 6.2.2 群时延 6.2.3 对数模和相位图 6.3 理想频率选择性滤波器的时域特性 6.4 非理想滤波器的时域和频域特性讨论 6.5 一阶与二阶连续时间系统 6.5.1 …...
前端调试HTTP状态码
1xx(信息类状态码) 这类状态码表示临时响应,需要客户端继续处理请求。 100 Continue 服务器已收到请求的初始部分,客户端应继续发送剩余部分。 2xx(成功类状态码) 表示请求已成功被服务器接收、理解并处…...
【51单片机】4. 模块化编程与LCD1602Debug
1. 什么是模块化编程 传统编程会将所有函数放在main.c中,如果使用的模块多,一个文件内会有很多代码,不利于组织和管理 模块化编程则是将各个模块的代码放在不同的.c文件里,在.h文件里提供外部可调用函数声明,其他.c文…...
职坐标物联网全栈开发全流程解析
物联网全栈开发涵盖从物理设备到上层应用的完整技术链路,其核心流程可归纳为四大模块:感知层数据采集、网络层协议交互、平台层资源管理及应用层功能实现。每个模块的技术选型与实现方式直接影响系统性能与扩展性,例如传感器选型需平衡精度与…...
【工具教程】多个条形码识别用条码内容对图片重命名,批量PDF条形码识别后用条码内容批量改名,使用教程及注意事项
一、条形码识别改名使用教程 打开软件并选择处理模式:打开软件后,根据要处理的文件类型,选择 “图片识别模式” 或 “PDF 识别模式”。如果是处理包含条形码的 PDF 文件,就选择 “PDF 识别模式”;若是处理图片文件&…...
