前言 今天有人在Cesium实验室QQ群里问如何把地球背景做成透明的,当时我以为Cesium比较复杂的渲染机制可能即使context设置了alpha属性也未必能透明,所以和同学说可能得改Cesium代码,可以使用ViewportQuad来实现. 后来自己实验一下,发现实际上context设置为alpha还是起作用的...惭愧误导了某位同学.. 最终效果 最终效果如下所示,其中背景图片时通过设置css样式background-image来实现的.   输入图片说明 源码 把以下代码拷贝到Cesiu

前言 最近折腾了一下三维地球,本文简单为大家介绍一款开源的三维地球软件--Cesium,以及如何快速上手Cesium.当然三维地球重要的肯定不是数据显示,这只是数据可视化的一小部分,重要的应该是背后的数据生成及处理等.本文先为大家介绍这简单的部分. 一. Cesium简介 Github地址:https://github.com/AnalyticalGraphicsInc/cesium.官方介绍如下: An open-source JavaScript library for world-clas

CesiumJS是一个基于javascript的浏览器器3d地图引擎 下载 https://cesiumjs.org/downloads/ 下载的Cesium-1.56.1,解压后的结构为 1.设置Web服务器 为了运行Cesium的应用,需要一个本地Web服务器的主机文件 下载安装所需要的模块 npm install 启动Web服务器 node server.js 注: node server.js --port -- public 192.168.1.100 2.helloworld 新建h

既然给我发了参与方式,不参加似乎有点不给人面子,反正也没多少人看我的博客,那我就试试吧,也欢迎大家自己参与:2017年度全网原创IT博主评选活动投票:http://www.itbang.me/goVote/215 前言 最近折腾了一下三维地球,本文简单为大家介绍一款开源的三维地球软件——Cesium,以及如何快速上手Cesium.当然三维地球重要的肯定不是数据显示,这只是数据可视化的一小部分,重要的应该是背后的数据生成及处理等.本文先为大家介绍这简单的部分. 一. Cesium简介 Github

原文地址:https://cesiumjs.org/tutorials/Imagery-Layers-Tutorial/ 影像图层 Cesium支持多种服务来源的高精度影像(地图)数据的加载和渲染.图层支持排序和透明混合.每个图层的 亮度(brightness),对比度( contrast), gamma, hue, and saturation 都可以动态修改. 快速开始 我们忽略细节,直接写代码去添加一些影像图层.打开SandCastle中的 Hello World 示例. 这个示例创建了一

之前的最长的一帧系列,我们主要集中在地形和影像服务方面.简单说,之前我们都集中在地球是怎么造出来的,从这一系列开始,我们的目光从GLOBE上解放出来,看看球面上的地物是如何渲染的.本篇也是先开一个头,讲一下涉及到的类结构和整体的流程,有一个系统的,概括的理解. 我们先看看Cesium的渲染队列: var Pass = { // 环境,比如大气层,月亮,天空盒等 ENVIRONMENT : 0, //之前介绍的ComputeEngine,比如影像服务里面的投影涉及的计算 COMPUTE : 1,

只贴实现淹没分析这块的代码. import styles from './cesium.less'; import React from 'react'; import Cesium from 'cesium/Cesium'; Cesium.BingMapsApi.defaultKey = '必应地图Key.具体请自己申请'; require('cesium/Widgets/widgets.css'); export default class CesiumPage extends React.

http://52.4.31.236/convertmodel.html https://blog.csdn.net/UmGsoil/article/details/74572877 var viewer = new Cesium.Viewer('cesiumContainer') var entity = viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706), model

cesium编程入门(八)设置材质 Cesium中为几何形状设置材质有多种方法 第一种方法 Material 直接构建Cesium.Material对象,通过设置Material的属性来进行控制,官方示例和API描述的比较清楚, API说明 材质示例 第二种方法 MaterialProperty 今天介绍通过MaterialProperty设置: Cesium 材质相关的类为 MaterialProperty,它有一下几个子类: ColorMaterialProperty ImageMateri

一.学习资料:http://cesiumjs.org/tutorials.html,看完6个教程后对图层加载.控件控制开关.地形数据叠加.模型添加.相机控制.图形绘制有一点了解.这也是cesium的主要功能. 二.下载cesium 1.3的压缩包. 1.模块功能的演示:Apps/Sandcastle/gallery,能更加快速的入门. 2.API查询.Build\Documentation\,对函数.参数有了解. 三.实践:主要实现车辆位置的监控及厂区.道路的显示. 1.初始化控件 <span 

Cesium支持3D模型,包括关键帧动画,皮肤的改变还有单个节点的选择等,Cesium还提供了了一个基于网络的工具,将COLLADA模型转换为glTF,方便和优化模型添加 还记得我们在实体添加的时候添加过一个3D模型么,具体是这样的 var viewer = new Cesium.Viewer('cesiumContainer'); var entity = viewer.entities.add({ position : Cesium.Cartesian3.fromDegrees(-123.0

https://blog.csdn.net/UmGsoil/article/details/74912638 我们先直接来看一个例子 var viewer = new Cesium.Viewer('cesiumContainer'); var flag = viewer.entities.add({ rectangle : { coordinates : Cesium.Rectangle.fromDegrees(-100.0, 20.0, -90.0, 30.0), material : new

参考资料: https://cesiumjs.org/tutorials/Cesium-Workshop/ https://github.com/geoadmin/workshop-cesium3d https://github.com/AnalyticalGraphicsInc/cesium-workshop 概述 通过该教程,能够大致了解Cesium的功能,包括: 配置1个Cesium viewer 加载各种数据集 创建几何和设置样式 加载3D Tiles 控制相机 添加鼠标交互 1. 设置

原文地址:https://cesiumjs.org/tutorials/Particle-Systems-More-Effects-Tutorial/ 高级粒子系统特效 这篇教程学习更多的效果,包括天气和火箭推进器. 如果没有学习过粒子系统基础知识,请学习这篇教程 粒子系统介绍 . 天气   下雪   下雨 最开始下雪的教程是来自 追踪圣诞老人项目里的实现. 步骤 我们即将介绍如何做下雪效果,然后怎么把下雪变为下雨效果. 我们将给每个粒子添加雪花图片,然后在updateParticle函数里定义

fabric 材质定义:着色器实践 1. 示例代码 贴到沙盒里就可以运行: var viewer = new Cesium.Viewer("cesiumContainer"); viewer.scene.globe.depthTestAgainstTerrain = true; viewer.camera.setView({ destination : new Cesium.Cartesian3(-2644963.9889313546, 5763731.142118295, 21994

制作自己的骑行轨迹 马上国庆节了,计划骑车回家,突然想到把所有的骑行线路汇总一下,无奈码表和APP不支持这样的操作,出于职业病,在此操作一下. 我用的是黑鸟码表,可以导出fit运动轨迹,但是fit还需要转gpx格式才能读取,否在二进制无法读取.想到在官网也可以看骑行记录,做为一名开发,我嗅到了可以从官网的个人中心去爬取骑行数据,比直接读取文件更为方便和快捷. 效果 链接地址 壮壮壮壮壮的骑行记录. 获取轨迹数据 登陆 登陆黑鸟官网,右上角进入个人中心 查单条数据 F12打开开发人员选项后,随便点

Cesium中文网:http://cesiumcn.org/ | 国内快速访问:http://cesium.coinidea.com/ Cesium支持从几个标准服务绘制和添加高分辨率图像(地图)图层.图层可以按顺序排列,并混合在一起.每一层的亮度.对比度.伽玛.色调和饱和度可以动态地改变.本节教程介绍了图层的概念以及相关的Cesuim APIs. 快速入门 我们暂时忽略细节,直接编写代码来添加一些图像层.在Sandcastle中打开Hello World示例.此示例创建一个Viewer组件,默

通过之前的Material和Entity介绍,不知道你有没有发现,当我们需要添加一个rectangle时,有两种方式可供选择,我们可以直接添加到Scene的PrimitiveCollection,也可以构造一个Entity,添加到Viewer的EntityCollection中,代码如下: // 直接构造Primitive,添加 rectangle = scene.primitives.add(new Cesium.Primitive({ geometryInstances : new Cesi

Shader 首先,在本文开始前,我们先普及一下材质的概念,这里推荐材质,普及材质的内容都是截取自该网站,我觉得他写的已经够好了.在开始普及概念前,推荐一首我此刻想到的歌<光---陈粒>. 在真实世界里,每个物体会对光产生不同的反应.钢看起来比陶瓷花瓶更闪闪发光,一个木头箱子不会像钢箱子一样对光产生很强的反射.每个物体对镜面高光也有不同的反应.有些物体不会散射(Scatter)很多光却会反射(Reflect)很多光,结果看起来就有一个较小的高光点(Highlight),有些物体散射了很多,它们

Android 透明度百分比对应的 十六进制 先把结果放在这里,方便大家查询,也方便自己,UI太喜欢用百分比表示了=.=! 透明度百分比对应的十六进制: (说明:百分比计算出来会有小数,按照常规的四舍五入处理,详情请往下查看) 百分比:0% HEX: 00 百分比:1% HEX: 30 百分比:2% HEX: 50 百分比:3% HEX: 80 百分比:4% HEX: A0 百分比:5% HEX: D0 百分比:6% HEX: F0 百分比:7% HEX: 12 百分比:8% HEX: 14 百

前段时间,项目要开发热力图插件,研究了heatmap.js,打算好好总结一下. 本文主要有以下几部分内容: 部分源码理解 如何迁移到v2.0 v2.0官方文档译文 关于heatmap.js介绍,请看这里: http://www.oschina.net/p/heatmap-js 目前,对于热力图的开发,百度.高德开发平台上使用的都是这款JS开源库.当然,现在还有我们公司:P 百度示例:http://developer.baidu.com/map/jsdemo.htm#c1_15 高德示例:http