分享
超级会员免费看
一碗老面i
To be a better man.
展开
-
Cesium加载矢量切片点击事件触发获取矢量切片的矢量信息
结合上篇写的如何加载矢量切片https://blog.csdn.net/qq_29808089/article/details/107941079近来同事使用后，在项目中有需要点击矢量切片并触发获取矢量切片的矢量信息..发现现有的mvt.js里面的 pickFeatures 方法是returnundefined，无奈...只有更新pickFeatures方法。效果图：1.地图事件点击触发var handler = new Cesium...原创 2021-04-14 11:49:30 · 2398 阅读 · 7 评论 -
Cesium 监听模型添加事件
之前遇到的问题都是Cesium底图加载完毕做监听执行一些事件，今天突然同事问到监听entity添加事件...瞬间懵逼，就翻了一下api文档上面有对entity的changedEvent事件说明，那就意味着是可以进行监听的~http://cesium.xin/cesium/cn/Documentation1.62/CustomDataSource.html?classFilter=CustomDataSource话不多说，直接上代码！<!DOCTYPE html><.原创 2021-04-09 14:25:57 · 2256 阅读 · 1 评论 -
cesium之地图显示坐标、视角高度、比例尺、海拔效果篇
效果图:实现代码：const self = this; let lontitude = '', latitude = '', h = ''; var handler3D = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas); handler3D.setInputAction(function (movement) { var pick = new Cesium.Cartesian2(mo原创 2021-01-13 18:19:47 · 2084 阅读 · 1 评论 -
Cesium实现云图时序播放
先上效果图：代码实现：<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-sc.原创 2021-01-06 10:53:40 · 1733 阅读 · 1 评论 -
WebGL和OpenGL的联系和区别
WebGL和OpenGL的区别为：性质不同、插件支持不同、用途不同。WebGLWebGL的缩写为Web图形库。它主要用于渲染二维图形和交互式三维图形。它是可以与HTML5一起使用的Javascript API。它支持跨平台，并且仅以英语提供。WebGL程序由用JavaScript编写的控制代码组成1.WebGL 是基于 OpenGL ES 2.0 的 Javascript API，而不是纯OpenGL(ES代表“嵌入式系统”)。2.WebGL通过 HTML5 的 Canvas 来和 DOM原创 2021-01-04 10:52:33 · 10044 阅读 · 0 评论 -
cesium 设置限制缩放大小
CesiumAPI属性文档viewer.scene.screenSpaceCameraController.minimumZoomDistance = 1000;viewer.scene.screenSpaceCameraController.maximumZoomDistance = 300;原创 2020-12-17 10:16:00 · 4211 阅读 · 0 评论 -
Cesium 鼠标滚轮改变地图层级（height）及视角改变监听
1.viewer鼠标滚轮改变地图层级监控var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);handler.setInputAction(click => {}, Cesium.ScreenSpaceEventType.WHEEL); // cesium 鼠标滚轮行为2.viewer.camera视角改变监控viewer.camera.changed.addEventListener(f.原创 2020-12-10 13:47:40 · 3687 阅读 · 1 评论 -
Cesium imageryLayers，entity remove 删除，漏删问题
问题：删除imageryLayers/entity的时候，使用forEach/ for遍历删除的时候会实时修改 viewer.imageryLayers/viewer.entities的下标，例如 entitys.length = 20，找到第一个设其为第10个实体）的实体删除后，entitys.length 变成 19，而原来的第11个实体变成了第10个实体，所以循环的时候会漏掉。解决方法：1.倒叙遍历for(var i=entities.length-1;i>=0..原创 2020-12-10 11:34:50 · 3438 阅读 · 0 评论 -
Cesium 如何区分单击LEFT_CLICK和双击事件LEFT_DOUBLE_CLICK
var timeoutID = null;handler.setInputAction(function(movement){ clearTimeout(timeoutID); timeoutID= window.setTimeout(function(){ }, 200);},Cesium.ScreenSpaceEventType.LEFT_CLICK); handler.setInputAction(function(movement){ c...原创 2020-12-09 19:16:46 · 658 阅读 · 0 评论 -
Cseium 多个entity叠加点击获取下层属性
Cseium鼠标点击事件//返回多个模型属性viewer.scene.drillPick(click.position);//返回最上层模型属性viewer.scene.pick(click.position);原创 2020-12-09 19:07:05 · 772 阅读 · 1 评论 -
Cesium 坐标转换
cesium中常用的坐标有两种WGS84地理坐标系和笛卡尔空间坐标系(世界坐标)。我们平时常用的以经纬度来指明一个地点就是用的WGS84坐标，笛卡尔空间坐标系常用来做一些空间位置变换如平移旋转缩放等等。二者的联系如下图, 笛卡尔空间坐标的原点就是椭球的中心.Pick----屏幕坐标 Cartesian----世界坐标 cartographic-----地理坐标（弧度） Point----经纬度坐标1.屏幕坐标转世界坐标var pick= new Cesium.Cartesian2(...转载 2020-10-13 14:31:40 · 619 阅读 · 0 评论 -
Cesium 块状专题图统计图
1.块状专题图效果2.代码实现<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-s原创 2020-10-12 18:20:10 · 785 阅读 · 0 评论 -
Cesium 全球数据图表统计
1.效果图2.实现代码<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale原创 2020-10-12 17:52:44 · 730 阅读 · 0 评论 -
Cesium 热力图实现
1.效果图2.实现代码<!DOCTYPE html><html> <head lang="en"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale原创 2020-10-12 16:56:24 · 1746 阅读 · 2 评论 -
Cesium 海面波纹效果实现
1.效果图2.实现代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-原创 2020-10-12 16:30:15 · 2240 阅读 · 0 评论 -
Cesium 对象Entity点击查看属性信息
点击entity实体查看当前entity的属性信息1.效果图2.示例代码<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width原创 2020-10-12 14:46:53 · 4839 阅读 · 1 评论 -
Cesium 绘制对象Entity
前面文章已经提到Cesium dataScources如何使用https://blog.csdn.net/qq_29808089/article/details/107940686但是还是有朋友在问..添加给里面添加内容，那么就写个完整添加实例的例子吧！1.效果图2.代码实现<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta htt.原创 2020-10-12 10:45:31 · 2377 阅读 · 4 评论 -
Cesium 模拟卫星扫描_设置飞行坐标串
1.效果图2.代码实现<!DOCTYPE html><html lang="en"> <head> <!-- Use correct character set. --> <meta charset="utf-8"> <!-- Tell IE to use the latest, best version. --> <meta http-equiv="X-UA-Compatible" conten原创 2020-10-09 15:35:38 · 1032 阅读 · 0 评论 -
Cesium 模拟卫星扫描_随机生成位置
1.效果图2.实现代码缺少卫星gltf使用了飞机的模型<!DOCTYPE html><html lang="en"> <head> <!-- Use correct character set. --> <meta charset="utf-8"> <!-- Tell IE to use the latest, best version. --> <meta http-equiv="X-UA-原创 2020-10-09 15:34:28 · 1393 阅读 · 0 评论 -
cesium 实现经纬线绘制和经纬度标注
废话不对数直接上线效果图及代码1.效果图2.实现代码<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=原创 2020-10-09 14:41:46 · 2155 阅读 · 1 评论 -
Cesium 分屏对比效果实现
实现原理初始化两个view：viewer0,viewer1然后给两个viewer添加鼠标事件，当拖到viewer0的时候把相关参数传递给viewer1，反之，将viewer1的地图事件传递给viewer0即可实现两个球体的分屏联动效果实现代码<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-C原创 2020-10-01 15:32:10 · 2004 阅读 · 10 评论 -
Cesium 卷帘效果实现
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <link rel=".原创 2020-10-01 14:50:30 · 1990 阅读 · 0 评论 -
Cesium 点击球体显示绿色框关闭实现
var viewer = new Cesium.Viewer('cesiumContainer',{ selectionIndicator: false });原创 2020-10-01 14:42:25 · 1022 阅读 · 0 评论 -
Cesium 获取当前相机信息
获取当前相机经纬度信息，高度，方向角，俯仰角等信息 var handler = new Cesium.ScreenSpaceEventHandler(this.viewer.scene.canvas); handler.setInputAction(click => { this.viewer.clock.onTick.removeEventListener(onTickCallback); //查看当前视角的 x,y,z,heading,pitch,r原创 2020-09-08 11:01:57 · 3641 阅读 · 4 评论 -
Cesium 实现地球自转效果
调用方法：this.rotate(4000);自转函数：rotate: function (time) { this.viewer.clock.multiplier = 300; //速度 this.viewer.clock.shouldAnimate = true; var previousTime = this.viewer.clock.currentTime.secondsOfDay; const onTickCallback = () => {原创 2020-09-08 10:59:09 · 1719 阅读 · 1 评论 -
cesium 报错{“code“:“InvalidCredentials“,“message“:“Invalid access token“}
这是因为需要申请token。申请页面为：https://cesium.com/ion/tokens在初始化viewer之前，将token加入即可Cesium.Ion.defaultAccessToken='eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIyMjJjMzI5YS1jZWRkLTQ1YTEtOTIzMy1lNDlmNmQyM2M0YmYiLCJpZCI6MzM2NjksImlhdCI6MTU5OTA1MDM1MH0.Aofdn9Zlfk原创 2020-09-02 20:58:52 · 2629 阅读 · 0 评论 -
Cesium 修改当前时间，显示北京时间
viewer.clock.currentTime=Cesium.JulianDate.addHours(Cesium.JulianDate.now(newDate()),-8,newCesium.JulianDate());原创 2020-08-20 18:10:08 · 3822 阅读 · 0 评论 -
Vue+Cesium设置cesium及viewer全局属性
1.main.jsimportVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'importstorefrom'./store'importElementfrom'element-ui'importmyChartsfrom'echarts'importdataVfrom'@jiaminghi/data-view'import'cesium/Build/Cesi...原创 2020-08-11 17:52:05 · 3454 阅读 · 0 评论 -
Cesium dataSources 添加及删除
1.添加var traceLayer = new Cesium.CustomDataSource("traceLayer");viewer.dataSources.add(traceLayer);2.删除//删除单个dataSources组viewer.dataSources.remove(traceLayer);//删除所有的viewer.dataSources.removeAll();原创 2020-08-11 17:40:52 · 14099 阅读 · 1 评论 -
Cesium圆形波纹/雷达扩散效果扩展类CircleWaveMaterialProperty
本文是基于原创内容进行部分修改，原文出处：https://blog.csdn.net/chudage11/article/details/101632482SuperMapCesium支持该类似扩展类，以下是原生Cesium调用扩展类CircleWaveMaterialProperty说明1.扩展类CircleWaveMaterialProperty.jsimport*asCesiumfrom'cesium'varCircleWaveMaterial={Circl...原创 2020-08-11 17:33:43 · 2607 阅读 · 0 评论 -
Vue+Cesium 流动线纹理扩展类PolylineTrailMaterialProperty
本文是基于原创内容进行部分修改，原文出处：https://blog.csdn.net/chudage11/article/details/101632189SuperMapCesium支持该扩展类，以下是原生Cesium调用扩展类PolylineTrailMaterialProperty说明1.扩展类PolylineTrailMaterialProperty.jsimport*asCesiumfrom'cesium'varTrailMaterial={Polyli...原创 2020-08-11 17:11:45 · 6035 阅读 · 12 评论 -
Cesium加载各种互联网地图
//初始化varimageryLayers=viewer.imageryLayers;1.UrlTemplateImageryProvider支持加载天地图，google，高德地图等var_TileLayer=newCesium.UrlTemplateImageryProvider({url:option.url});imageryLayers.addImageryProvider(_TileLayer...原创 2020-08-11 16:55:33 · 1510 阅读 · 0 评论 -
Cesium加载和取消CesiumTerrainProvider，DEM数据
加载DEMviewer.terrainProvider=newCesium.CesiumTerrainProvider({url:option.url});取消DEMviewer.terrainProvider=newCesium.EllipsoidTerrainProvider({});原创 2020-08-11 16:46:22 · 2455 阅读 · 0 评论 -
Vue+Cesium 引入及初始化设置
1.Vue引入需要注意npm install --save cesium// 引入import 'cesium/Build/Cesium/Widgets/widgets.css'import * as Cesium from 'cesium'2.初始化参数配置let viewerOption = { animation: false, // 控制场景动画的播放速度控件 baseLayerPicker: false, // 底图切换控件原创 2020-08-03 17:58:18 · 2548 阅读 · 1 评论