cesium添加多个geojson文件并分别控制显示和隐藏
/*获取geojson数据*/
function get_geojson(name,h,n){
let x=document.getElementById(n);
if(x.className === "la"){
loadgeojson(name,h,n);
x.className = "la2";
}else{
x.className = "la";
let len = viewer.dataSources.length;
if(len>0){
for(let i=0;i<len;i++){
var dataSource = viewer.dataSources.get(i);
if(dataSource._name === n){
viewer.dataSources.remove(dataSource);
}
}
}
}
}
var promise=new Array(9);
function loadgeojson(name,h,n){
let xmlhttp,p;
if (window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
} else
{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP_geo");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200 )
{
p=xmlhttp.response;
Cesium.Math.setRandomNumberSeed(0);//设置随机数种子
promise[n] = Cesium.GeoJsonDataSource.load(p);
promise[n].then(function (dataSource) {
viewer.dataSources.add(dataSource);
dataSource.name= n;
let entities = dataSource.entities.values;
entities.id=n;
let colorHash = {};
//可对单个实体进行设置
for (let i = 0; i < entities.length; i++) {
let entity = entities[i];//geojson里面必须得有一个name属性,entity.name对应
let name = entity.name;//可以使两个同名要素使用同一种颜色
let color = colorHash[name];
if (!color) {
color = Cesium.Color.fromRandom({
alpha : 1.0
});
colorHash[name] = color;
}
entity.polygon.material = color;
entity.polygon.outline = true;// polygon边线显示与否
entity.polygon.height=h;//底面距离地面高度
entity.polygon.extrudedHeight =h+0.2;//顶面距离地面高度
}
});
/*viewer.flyTo(promise[n]);*/
}
};
xmlhttp.open("GET","./jsp/get_geojson.jsp?floor_name="+name,true);
xmlhttp.send();
}
完整代码如上所示。
1创建promise数组,长度为geojson数据的个数;
2loadgeojson(name,h,n)函数异步加载geojson文件(服务器后台从数据库中下载json数据到本地,返回文件地址p),name为geojson数据名称,h为高度,n为id,设为datasource名称;
3getjson(name,h,n)函数,name为geojson数据名称,h为高度,n为datasource名称(参数与loadgeojson相同),datasource的id从1开始记录geojson加载顺序,判断名称是否一致,删除该资源(无序)。
4代码实现了在页面通过button控制geojson的加载和移除,对于已经加载的geojson数据,button.style.backgroundcolor变为红色(.la2样式),当移除该数据时,button回到.la样式。
cesium添加多个geojson文件并分别控制显示和隐藏的更多相关文章
- 使用 Cesium 动态加载 GeoJSON 数据
前言 需求是这样的,我需要在地图中显示 08 年到现在的地震情况,地震都是发生在具体的时间点的,那么问题就来了,如何实现地震情况按照时间动态渲染而不是一次全部加载出来. 一. 方案分析 这里面牵扯到两 ...
- MVC学习随笔----如何在页面中添加JS和CSS文件
http://blog.csdn.net/xxjoy_777/article/details/39050011 1.如何在页面中添加Js和CSS文件. 我们只需要在模板页中添加JS和CSS文件,然后子 ...
- 要将 ASP.NET 访问权限授予某个文件,请在资源管理器中右击该文件,选择“属性”,然后选择“安全”选项卡。单击“添加”添加适当的用户或组。突出显示 ASP.NET 帐户,选中所需访问权限对应的框。
找到该文件所在文件夹,右键属性,安全选项卡,添加-aspnet用户,并设置其权限为完全控制.如果还是不行,就添加一个Everyone用户并赋予完全控制权限windows server 2008中IIS ...
- VC6在win7环境下无法添加以及打开现有文件的解决办法
在VC6.0中使用键盘快捷键或者是文件菜单打开现有文件以及添加文件出现编辑器停止响应,弹出内容为Microsoft(R) Developer Studio已停止工作 Windows正在检查解决该 ...
- php添加数据到xml文件的例子
php添加数据到xml文件中 时间:2015-12-17 06:30:37来源:网络 导读:php添加数据到xml文件中 xml文件:stu.xml: 复制代码代码如下: <?xml ver ...
- Sql server之路 (三)添加本地数据库SDF文件
12月25日 今天搞了半天 添加本地数据库Sdf文件到项目里.总是出现问题. 安装环境 Vs2008 没有安装的环境 1.Vs2008 sp1 2. 适用于 Windows 桌面的 Microsoft ...
- 添加Ubuntu的库文件路径
添加Ubuntu的库文件路径 http://blog.csdn.net/r91987/article/details/6879062 关于ubuntu添加共享库路径: 1. 将绝对路径写入 /etc/ ...
- android 添加依赖的库文件
Notpad: 2016-3-16: 1.android 添加依赖的库文件 右键自己的项目 -> properties ->android ->在Library处点击add -> ...
- svn管理代码在cornerstone上无法添加.a 静态库文件
有时候.a静态库不能上传到svn的服务器 导致别人拉代码运行不了 这是因为cornerstone设置里面默认不会提交.a文件, 在上图选项栏里是cornerstone默认忽略上传的文件名后缀,在这里 ...
随机推荐
- python items和setdefault函数
items() dict = {'runoob': '菜鸟教程', 'google': 'Google 搜索'} print("Value : %s" % dict.setdefa ...
- AtCoder Grand Contest 038
目录 \(\bf A - 01 \ Matrix\) \(\bf B- Sorting \ a \ Segment\) \(\bf C-LCMs\) \(\bf D-Unique \ Path\) 这 ...
- dp的林林总总(持续更新,dp骚气解法等等)
写在前面: 本人dp较弱,所以总结了一些坑点,转化思路以供复习使用,勿喷,甚至一些不是dp的题(贪心等等)也会放在这. 每个点后面会有我自己的题解,如果没有链接,向下找第一个链接,可能会有多题. 1. ...
- 线段树合并学习笔记(P4556)
直入主题: 学习线段树合并..... 从名字就能看出,这个东西要合并线段树..... 线段树怎么能合并呢...... 暴力合就行了啊...... 一次从上往下的遍历,把所有的节点信息暴力合并,然后就没 ...
- hadoop2.9.0之前的版本yarn RM fairScheduler调度性能优化
对一般小公司来说 可能yarn调度能力足够了 但是对于大规模集群1000 or 2000+的话 yarn的调度性能捉襟见肘 恰好网上看到一篇很好的文章https://tech.meituan.com ...
- Promise对象及它在js中的执行顺序
关于Promise对象的学习及它的执行顺序 学习阮一峰老师的ES6入门后的记录 1.promise的定义 promise是一个对象,通常包裹着一个异步操作,promise对象提供一些接口的方法,返回一 ...
- NOIP 模拟19
考试状态一次不如一次,所以这次.......我经无言以对 考完试T1就A了,但不是考试时A的,所以屁用没有! 这次考试其实T1想的是正解但是自己傻逼了,感觉自己只能拿部分分,(而且我还把数据范围少看一 ...
- Linux跨网段通信小实验
一.实验场景. 实验准备,Linux主机4台.分别是主机A,路由主机R1,路由主机R2,主机 C,主机A的ip是192.168.56.66/24,且只有一块网卡eth0:路由主机R1有两块网卡eth0 ...
- Jsp自学2
Jsp简单来说就是java代码与Html代码的组合,类,方法,属性跟网页展示夹杂在一起.Jsp就是Servlet,但比Servle简单,不需要配置web.xml(当然也可以配置).Jsp由模板数据与元 ...
- Ubuntu清空回收站
ubuntu 回收站的具体位置:$HOME/.local/share/Trash/ 执行如下命令清空回收站: sudo rm -fr $HOME/.local/share/Trash/files/ 如 ...