Cesium-GeoJson数据的显示和隐藏
程序员文章站
2022-07-12 18:23:00
...
结果展示
相关代码
// -------------------------- 加载GeoJson数据 ------------------------------
var fireLayer = null;
var borderLayer = null;
var roadLayer = null;
viewer.dataSources.add(Cesium.GeoJsonDataSource.load('Assets/muli/muli_geojson/fire.geojson', {
stroke: Cesium.Color.RED.withAlpha(0.5),
strokeWidth: 2.3,
fill: Cesium.Color.RED.withAlpha(0.1),
clampToGround: true
})).then(data => {
fireLayer = data;
});
viewer.dataSources.add(Cesium.GeoJsonDataSource.load('Assets/muli/muli_geojson/road.geojson', {
stroke: Cesium.Color.CORAL.withAlpha(0.5),
strokeWidth: 2.3,
fill: Cesium.Color.CORAL.withAlpha(0.4),
clampToGround: true
})).then(data => {
roadLayer = data;
});
viewer.dataSources.add(Cesium.GeoJsonDataSource.load('Assets/muli/muli_geojson/border.geojson', {
stroke: Cesium.Color.RED.withAlpha(0.5),
strokeWidth: 2.3,
fill: Cesium.Color.RED.withAlpha(0.5),
clampToGround: true
})).then(data => {
borderLayer = data;
});
// ------------------------- 图层的显式控制 ----------------------------------
checkboxFire = document.getElementById("checkboxFire");
checkboxFire.checked = true;
checkboxFire.addEventListener("click", () => {
fireLayer.show = checkboxFire.checked;
borderLayer.show = checkboxFire.checked;
});
checkboxRoad = document.getElementById("checkboxRoad");
checkboxRoad.checked = true;
checkboxRoad.addEventListener("click", () => {
roadLayer.show = checkboxRoad.checked;
});
如果您觉得这篇文章对您有帮助,欢迎给我的 github项目 点一个⭐ ο(=•ω<=)ρ⌒☆
下一篇: solidworks布局草图
推荐阅读
-
PHP生成和获取XML格式数据的方法
-
Javascript与jQuery方法的隐藏与显示实现方法
-
ajax实现验证数据库里的用户名和密码
-
detectron2训练自己的数据实现目标检测和关键点检测(一) ubuntu18.04安装测试detectron2
-
Android解决ScrollView下嵌套ListView和GridView中内容显示不全的问题
-
Word 如何显示所有内嵌修订打印时隐藏修订和批注等等
-
使用Perl语言去存取mSQL和MySQL数据库的内容_MySQL
-
用DS配置oracle数据库时,使用和客户端相同的账号导致的问题
-
Linux下实现MySQL数据备份和恢复的命令使用全攻略_MySQL
-
js控制页面控件隐藏显示的两种方法介绍_javascript技巧