Cesium
关注
分享
扫一扫
Cesium
mouka~
西南石油大学2015级 13-305
展开
-
Cesium 加载模型比较暗
通过调整模型的漫反射和高光参数将模型变亮。原创 2023-08-04 16:35:06 · 1194 阅读 · 0 评论 -
Cesium 指北针、导航罗盘、缩放按钮
这两个文件是自己为了适配自己的代码重新进行编译过的（Cesium挂载在Windows下，通过引入。这两个文件来实现指北针和导航罗盘、缩放按钮；其中对视角还原进行了扩展，实现了视角。进行编译适配自己这边的代码。在html文件中引用。原创 2022-10-13 12:02:51 · 3373 阅读 · 1 评论 -
Cesium 初始化慢优化
原因：看过源码后发现，其实Label就是将文字按照对应格式渲染上去后转成了一个Image然后绘制上去的，去掉Label后就会发现Cesium加载速度会变快，提高很多。解决：按需加载Label，设置Label显示高度，当界面缩放过去后设置范围内Label开始初始化加载。该文章会持续更新，对Cesium加载优化原因进行查找解决。原创 2022-09-26 11:10:27 · 2898 阅读 · 0 评论 -
Cesium实现地图反选遮罩
实现原理：绘制一个面（遮罩范围）中间挖出我们需要使用的区域，然后把这个面设置成遮罩层，如上图所示：实现代码：范围可自行定义控制AddConvertLayer(points) { let cs = Cesium.Cartesian3.fromDegreesArray(points); let hole = new Cesium.PolygonHierarchy(cs); this.viewer.entities.add({ name: "conver...原创 2022-05-12 14:16:59 · 2095 阅读 · 2 评论 -
Cesium 范围Bound获取（多边形wkt、xys、当前范围）
WKT WKT转XY点数组 /** * 将wkt转换为 X,Y,X,Y结构的数组 * @param {string} wkt 多边形的wkt * @returns */ WktToXY(wkt) { const coors = []; const xyzs = wkt.substring(wkt.indexOf("((") + 2, wkt.indexOf("))")); xyzs.split(",").forEach((e) => { .原创 2022-04-13 11:02:51 · 4291 阅读 · 0 评论 -
Cesium 设置实体要素闪烁
设置要素闪烁：//id-要素实体id，second-闪烁时间SetEntityFlicker(id, second) { let entity = viewer.entities.getById(id); if (!entity) return; let x = 1; let flog = true; let fs = []; let callback = new Cesium.CallbackProperty(() => { ...原创 2022-04-13 10:56:04 · 1763 阅读 · 0 评论 -
Cesium 获取简单的XYZ平移矩阵 Matrix4
加载倾斜的时候发现要去平移倾斜到指定的位置上需要进行平移变换这里使用了简单的平移方法（XYZ方向上）参数描述：layer:Cesium.Cesium3DTileset图层 offsetX：X方向上的平移 offsetY：Y方向上的平移 offsetZ：Z方向上的平移 let tans = Cesium.Matrix4.fromTranslation( new Cesium.Cartesian3(offsetX, offsetY, offsetZ),..原创 2021-11-29 10:28:01 · 2645 阅读 · 0 评论 -
Cesium 地下模式
解决方法：设置地球透明度 设置相机可以进入地下代码:OpenUnderGroup() { //设置鼠标进去地下 this._viewer.scene.screenSpaceCameraController.enableCollisionDetection = false; //设置地球透明 this._viewer.scene.globe.translucency.enabled = true; this._viewer.scene.globe.t...原创 2021-09-01 15:31:11 · 3402 阅读 · 4 评论 -
Cesium 模拟下雪
代码://定义下雪场景 着色器function FragmentShader_Snow() { return "uniform sampler2D colorTexture;\n\ varying vec2 v_textureCoordinates;\n\ \n\ float snow(vec2 uv,float scale)\n\ {\n\ float time = czm_frameNumber / 60.0;\n\ ..原创 2021-09-01 15:13:25 · 537 阅读 · 0 评论 -
Cesium 模拟下雨
代码://定义下雨场景 着色器function FragmentShader_Rain() { return "uniform sampler2D colorTexture;\n\ varying vec2 v_textureCoordinates;\n\ \n\ float hash(float x){\n\ return fract(sin(x*133.3)*13.13);\n\ }\n\ \n\ void main...原创 2021-09-01 15:08:00 · 1028 阅读 · 0 评论 -
Cesium 获取当前视图的中心经纬度
背景：需要进行设置不同的视角高度，刚开始获取的相机高度发现相机位置和当前的位置不匹配，差异很大可能是因为我是2d模式下的，相机位置超出了范围。解决办法：获取当前的视角中心点（经纬度） var result = window.viewer.camera.pickEllipsoid( new Cesium.Cartesian2( window.viewer.canvas.clientWidth / 2, window.viewer.can.原创 2021-08-30 15:00:37 · 3124 阅读 · 0 评论 -
Cesium设置面Entity高亮显示
结果：参数描述：id: Entity实体id heightEntity：高亮结果Entity defaultLayer和tempLayer均是DataSource的集合 代码：let heightEntity = null;HighlightPolygonEntity(id) { if (heightEntity) { defaultLayer.entities.remove(heightEntity); } if (!id) {.原创 2021-08-20 10:37:55 · 4925 阅读 · 8 评论 -
Cesium控制Entity闪烁，闪烁时间可以设定
结果：参数介绍:id: Entity id second: 闪烁时间（秒）注意：设置Entity的show参数是没有用的：SetEntityFlicker(id, second) { let entity = tempLayer.entities.getById(id); if (!entity) return; let x = 1; let flog = true; let fs = []; let callbac...原创 2021-08-20 10:21:15 · 1636 阅读 · 0 评论 -
Cesium通过Geojson批量加载广告牌即Billboard
GeoJsonDataSource官方文档entity官方文档 AddGeojsonBillboardLayer(id, data, image) { let promise = Cesium.GeoJsonDataSource.load(data); //数据加载后渲染 promise.then((ds) => { let entitys = ds.entities.values; entitys.forEach((e) => {..原创 2021-07-28 15:36:09 · 1477 阅读 · 0 评论 -
Cesium加载XYZ切片服务数据
官方文档 let l = new Cesium.UrlTemplateImageryProvider({ url: url, }); this._viewer.imageryLayers.addImageryProvider(l);这时候我们的后台会出现这种错误：原因：我们切片的时侯一般最高也就17-19的样子，但是我们底图的zoom不止19的缩放级别，当大于19的时候再去请求数据那就请求不到了，我们将代码稍作修改就不会出现这种问题了。解决..原创 2021-07-28 15:27:21 · 3460 阅读 · 8 评论 -
Cesium 飞行或缩放至指定点
官方文档CamerasetView // 设置相机视角 ZoomToXY(x, y, z, heading = 0, pitch = -90, roll = 0) { let options = { destination: Cesium.Cartesian3.fromDegrees(x, y, z), orientation: { heading: Cesium.Math.toRadians(heading), // 水平偏角，..原创 2021-07-28 15:07:07 · 2812 阅读 · 0 评论 -
Cesium环境 Primitives加载广告牌出现Cannot read property ‘globe‘ of undefined
AddBillboardPrimitives(id, data, image) { let promise = Cesium.GeoJsonDataSource.load(data); promise.then((ds) => { let bs = this._viewer.scene.primitives.add( new Cesium.BillboardCollection({ scene: this._viewer.scene...原创 2021-07-13 11:28:57 · 1444 阅读 · 0 评论 -
Cesium环境实现Geojson河流效果并实现贴地（任何Polygon均可）
成果演示:官方河流效果primitive和entity之间的区别与应用河流材质效果Cesium.Material看了这个文档我尝试加载geojson然后遍历设置每个Entity的材质，发现两个材质新建的对象不一样Entity中材质设置是new Cesium.MaterialProperty()Primitive中材质设置是new Cesium.Material()明显可以发现二者的材质是有区别的，主要是因为Entity用法简单偏向数据，基于底层的封装。Primi.原创 2021-07-12 09:59:22 · 6519 阅读 · 23 评论 -
Cesium将笛卡尔坐标转经纬度坐标
鼠标左键事件：handler = new Cesium.ScreenSpaceEventHandler(viewer.canvas);handler.setInputAction(function (event) { let pick =viewer.camera.pickEllipsoid(event.position); }, Cesium.ScreenSpaceEventType.LEFT_CLICK);//添加一个鼠标左键操作let pick =viewer.cam原创 2021-06-15 15:25:57 · 6569 阅读 · 7 评论 -
Cesium加载本地IIS发布的地形数据和影像数据
数据准备地形数据：我是通过在91位图上下载的DEM生产而来，通过IIS发布影像数据：91位图上下载的google影像，使用maptiler切片并通过IIS发布分别设置IIS跨域（Cesium专栏（四）中）实现代码 //加载本地影像数据 let imageryProvider = new Cesium.UrlTemplateImageryProvider({ url: "http://localhost:8055/{z}/{x}/{y}.png" });原创 2021-03-01 17:04:55 · 1417 阅读 · 1 评论 -
Cesium+Vue加载倾斜数据3DTile
实现代码段（代码网上很容易找到，主要是倾斜数据发布部署问题）： let tileSet = new Cesium.Cesium3DTileset({ url: "http://localhost:8099//tileset.json" }); viewer.scene.primitives.add(tileSet); viewer.zoomTo(tileSet);其中url是本地iis发布的倾斜数据（倾斜数据如下图所示）需要注意的配置：新建 .b..原创 2021-02-24 10:40:09 · 2041 阅读 · 2 评论 -
Cesium+Geoserver 加载WMS
其中url和layers参数不晓得怎么填的请参考（注意：不是照搬哈，只是参考，格式类型还请参考代码） let privide = new Cesium.WebMapServiceImageryProvider({ url: "http://localhost:8098/geoserver/LjPipeGIS/wms", //服务地址 layers: "LjPipeGIS:BaseBoundaryTown", //服务图层，需要修改成你自己发布的名称 p.原创 2021-02-22 17:26:42 · 612 阅读 · 0 评论 -
Cesium加载Geojson并设置贴地
Cesium环境搭建请参考：https://blog.youkuaiyun.com/qq_38370387/article/details/1139425451. Geojson文件可以用以下方式获取通过QGIS软件右键图层另存为导出 http://geojson.io/#map=20/26.90717/100.21731生成json2. 加载json数据let gjson = require("@/assets/lj.json"); Cesium.Math.setRandomNumber原创 2021-02-22 17:16:41 · 5506 阅读 · 7 评论 -
Cesium+vue 环境部署
部署过程主要参考了该作者的文章https://blog.youkuaiyun.com/w_gold_qin/article/details/105553596补充：主要是引入方式改变：import * as Cesium from 'cesium/Cesium'import * as widgets from 'cesium/Widgets/widgets.css'Vue.prototype.Cesium = CesiumVue.prototype.widgets = widgets自己ces原创 2021-02-22 16:45:49 · 2453 阅读 · 0 评论