在二维开发中,openlayers4 入门开发系列结合 echarts4 实现散点图,下图是GIS之家的效果图,那么在三维中,则可借助Entity来变相构造下图的效果。

思路:

构造实体ellipse,造一个用作实心中心区域的表征位置,再造两个圆,控制他们的半径动态变化,然后轮回播放,这其中涉及的是

Cesium.CallbackProperty

Cesium.ImageMaterialProperty

具体实现步骤:

1、数据准备

我构造一个北京各区的中心作为测试数据

[
{"name":"北京A", "value":100,"coordinates":[116.47202, 40.291]},
{"name":"北京B", "value":500,"coordinates":[116.606235, 40.698838]},
{"name":"北京C", "value":30,"coordinates":[115.895015, 40.143259]},
{"name":"北京D", "value":40,"coordinates":[116.259491, 39.593590]},
{"name":"北京E", "value":10,"coordinates":[117.264262, 40.184631]}
]

2、读取Json文件,建议不要用eval或者AJAX

//解析JSON文件
//_url的路径例如:"assets/data/configSites.json"
function analyseJSON(_url,_callback) {
let url=_url;
let request = new XMLHttpRequest();
request.open("get",url);
request.send(null);
request.onload = function () {
if (request.status == 200) {/*返回状态为200,即为数据获取成功*/
var json = JSON.parse(request.responseText);
_callback(json);
}
}
}

3。遍历Json文件中每个特征点的属性,构造外部涟漪的效果

 //构造动的扩散涟漪  实际上就是把图片圆形按时间改变半径
addCircleRipple({
json:_JsonData[i],
deviationR:50,//差值 差值也大 速度越快
eachInterval:2000,//两个圈的时间间隔
imageUrl:"assets/home/redCircle2.png",
maxR:(_JsonData[i].value)*20
});
/**
*两个圆扩散纹理
* */
function addCircleRipple(data){
var r1=0,r2=0; var r3=0,r4=0;
function changeR1() { //这是callback,参数不能内传
r1=r1+data.deviationR;
if(r1>=data.maxR){
r1=0;
}
return r1;
}
function changeR2() {
r2=r2+data.deviationR;
if(r2>=data.maxR){
r2=0;
}
return r2;
}
//第一个圆先跑
viewer.entities.add({
description:"LIGHT_POINTS",
position:Cesium.Cartesian3.fromDegrees(data.json.coordinates[0],data.json.coordinates[1],0),
show:true,
ellipse:{
semiMinorAxis :new Cesium.CallbackProperty(changeR1,false),
semiMajorAxis :new Cesium.CallbackProperty(changeR2,false),
height:10,
material:new Cesium.ImageMaterialProperty({
image:data.imageUrl,
repeat:Cesium.Cartesian2(1.0, 1.0), //指定图像在每个方向上重复的次数,默认为Cesium.Cartesian2(1.0, 1.0),{Cartesian2}类型
transparent:true,// 默认为false,当图像具有透明性时设置为true(例如,当png具有透明部分时)
color:new Cesium.CallbackProperty(function () {
var alp=1-r1/data.maxR;
return Cesium.Color.WHITE.withAlpha(alp)
//entity的颜色透明 并不影响材质,并且 entity也会透明
},false)
})
}
});
//第二个圆开始跑
setTimeout(function () {
function changeR11() { //这是callback,参数不能内传
r3=r3+data.deviationR;
if(r3>=data.maxR){
r3=0;
}
return r3;
}
function changeR12() {
r4=r4+data.deviationR;
if(r4>=data.maxR){
r4=0;
}
return r4;
}
viewer.entities.add({
description:"LIGHT_POINTS",
position:Cesium.Cartesian3.fromDegrees(data.json.coordinates[0],data.json.coordinates[1],0),
show:true,
ellipse:{
semiMinorAxis :new Cesium.CallbackProperty(changeR11,false),
semiMajorAxis :new Cesium.CallbackProperty(changeR12,false),
height:10,
material:new Cesium.ImageMaterialProperty({
image:data.imageUrl,
repeat:Cesium.Cartesian2(1.0, 1.0),
transparent:true,
color:new Cesium.CallbackProperty(function () {
var alp=1-r1/data.maxR;
return Cesium.Color.WHITE.withAlpha(alp)
//entity的颜色透明 并不影响材质,并且 entity也会透明
},false)
})
}
});
},data.eachInterval)
}

使用的波纹圆是类似于这种的:

4、构造中心圆实体:

  viewer.entities.add({
description:"LIGHT_POINTS",
position:Cesium.Cartesian3.fromDegrees(data.json.coordinates[0],data.json.coordinates[1],0),
show:true,
ellipse:{
semiMinorAxis :(_JsonData[i].value)*5,
semiMajorAxis :(_JsonData[i].value)*5,
height:10,
material:new Cesium.Color(1,0,0,1)
}
});

最后的实现效果:

Supermap/Cesium 开发心得----动态散点图(波纹点/涟漪点)的更多相关文章

  1. Supermap/Cesium 开发心得----定位

    SuperMap的WebGL是基于开源JS库Cesium做的修改而形成的产品,理论上用起来大同小异,如果在有不一样的地方再看,基本上还是与Cesium的接口名称和结构是一样的. 定位方法有基于Cesi ...

  2. Supermap/Cesium 开发心得----飞天动线的实现

    在实际开发中,我遇到这样的问题,只给了两地点的坐标,要求会出从A地到B地的在天上飞的那种动态线 本质上动线的效果就是构造实体Entity中的polyline来实现,设置好材质,颜色和运动频率 具体实现 ...

  3. Supermap/Cesium 开发心得----本地视频接入播放

    在三维中,为了增加现实感.给人一种带入感,我们会采取接入视频的方式来实现,那么如何接入视频呢? 由于没有截至写文章为止,我没有视频流数据,所以只能采取本地视频文件的方式来做. 本文介绍结束视频的其中一 ...

  4. Supermap/Cesium 开发心得----获取三维视角的四至范围

    网上目前有两种获取当前Camera的四至范围的方法 方法一    这种方法是最通用的,即使在哥伦布视角(2.5D下依旧能准确获取值) function getCurrentExtent() { // ...

  5. AEAI Portlet开发心得

    1 背景概述 Portlet是AEAI Portal组件API,是基于Java的Web组件,由Portlet容器管理,并由容器处理请求,生产动态内容.AEAI Portal中已经预置了许多Portle ...

  6. Cesium学习2:如何从零开始在Eclipse IDE,Java语言搭建cesium开发环境

    废话不多说,今天就先在Eclipse上搭建Cesium开发环境吧~ 零.Cesium简介 Cesiumjs 是一套javascript库,用来渲染3D地球,2D区域地图,和多种GIS要素.不需要安装任 ...

  7. 安卓版App开发心得

    从2016年4月到6月主要做的工作是网站的开发,而6月到现在2016年8月初,主要做的工作是Android和IOS两种App的开发,又以Android为主. 将这段时间的Android开发心得记录如下 ...

  8. ios 开发中 动态库 与静态库的区别

    使用静态库的好处 1,模块化,分工合作 2,避免少量改动经常导致大量的重复编译连接 3,也可以重用,注意不是共享使用 动态库使用有如下好处: 1使用动态库,可以将最终可执行文件体积缩小 2使用动态库, ...

  9. 分享:写了一个 java 调用 C语言 开发的动态库的范例

    分享:写了一个 java 调用 C语言 开发的动态库的范例 cfunction.h   代码#pragma once#ifdef __cplusplusextern "C" {#e ...

随机推荐

  1. Electron存储简单数据和用户首选项推荐用electron-store

    electron-store1可以用来保存Electron应用程序或模块的简单数据持久性-保存和加载用户首选项,应用程序状态,缓存等. 1https://github.com/sindresorhus ...

  2. OAuth 2.0 概念及授权流程梳理

    本文可以转载,但请注明出处https://www.cnblogs.com/hellxz/p/oauth2_process.html OAuth2 的概念 OAuth是一个关于授权的开放网络标准,OAu ...

  3. Elasticsearch系列---增量更新原理及优势

    概要 本篇主要介绍增量更新(partial update,也叫局部更新)的核心原理,介绍6.3.1版本的Elasticsearch脚本使用实例和增量更新的优势. 增量更新过程与原理 简单回顾 前文我们 ...

  4. day20191009jdbc学习笔记

    周三Wednesday JDBC(Java DataBase Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Ja ...

  5. Bootstrap 元素居中设置

    一.Bootstrap水平居中 1. 文本:class ="text-center" 2. 图片居中:class = "center-block" 3.其他元素 ...

  6. 大白话OSI七层协议

    目录 一.物理层 二.数据链路层 2.1 以太网协议 2.2 Mac地址 2.3 广播地址 三.网络层 3.1 IP协议详解 3.1.1 IP地址的两部分 3.2 子网掩码详解 3.3 IP数据包详解 ...

  7. 计算购物车金额总和( jquery )

    今天简单写了一个jq版购物车计算金额总和的例子,如图: 整体页面代码如下: <!DOCTYPE html> <html> <head> <meta chars ...

  8. 简单实现TodoList

    Todolist实例 储备知识js的splice的用法 实例逻辑 1 在data里面做一个存一条条留言的列表,往里面添加或者删除留言内容. 2 做一个变量和input双向绑定,然后做一个点击事件把这个 ...

  9. 《Windows内核安全与驱动开发》 5.1&5.2 内核与应用方面的编程

    <Windows内核安全与驱动开发>阅读笔记 -- 索引目录 <Windows内核安全与驱动开发>  5.1&5.2 内核与应用方面的编程 一.生成控制设备 如果一个驱 ...

  10. python笔记01

    一.编码: (一)编码分类 ①ascii编码: 占有1个字节,8位,可表示2**8个字符,(py2默认编码方式). ②unicode: 万国码,占有4个字节,32位,可表示2**32个字符. ③utf ...