Cesium
文章平均质量分 51
向着太阳往前冲
分享GIS相关技术开发经验成果及资料;
分享内容仅为个人理解和经验总结。
展开
-
vue + cesium 洪水淹没分析完整示例
vue cesium 洪水淹没分析完整示例原创 2022-04-19 14:06:03 · 6492 阅读 · 11 评论 -
vue + cesium加载krigingjs插件库生成等值线图
vue + cesium加载krigingjs插件库生成等值线图原创 2021-12-03 09:58:19 · 4504 阅读 · 16 评论 -
Vue + Cesium 缓冲分析实现
目录一、缓冲分析效果图二、部分关键代码1、点缓冲分析2、线缓冲分析3、面缓冲分析4、生成缓冲区三、vue中调用1、引入缓冲分析对应类2、点线面的缓冲分析调用方法四、缓冲分析类源码原创 2022-03-16 15:44:39 · 2779 阅读 · 1 评论 -
vue + cesium 线/面流动纹理实现
一、 封装PolylineTrailLinkMaterialProperty类,只需输入颜色、纹理图片路径、持续时间即可(color、imgUrl、duration);let Cesium = require('cesium/Cesium')const PolylineTrailLinkMaterialProperty = (function(){/* 流动纹理线 color 颜色 duration 持续时间 毫秒*/function PolylineTrailLin原创 2021-09-24 10:28:39 · 2654 阅读 · 17 评论 -
基于cesium的地形开挖地形剖切
基于cesium地形开挖结合示例以及官方代码修改后封装TerrainClipPlan.js文件,在代码引入即可使用,详细介绍请往下看一、地形剖切效果图 :图一图二二、核心代码根据绘制范围构建剖切点数据for (var r = 0; r < i; ++r) { var s = (r + 1) % i, u = Cesium.Cartographic.fromCartesian(e[r]), ...原创 2021-09-28 19:56:32 · 7612 阅读 · 53 评论 -
cesium 模型裁剪分析(模型内部裁剪和外部裁剪)
一、模型裁剪分析对3D Tileset模型进行裁剪分析,可任意绘制多边形范围进行裁剪,具体效果如下未裁剪模型局部范围效果图外部裁剪效果图内部裁剪效果图二、完整代码<template> <div id="geologyClipPlanDiv" v-if="geologyClipPlanIsShow"> <table style="text-align: right;"> <tr> ..原创 2021-11-09 10:01:46 · 4173 阅读 · 12 评论 -
vue + Echart + Cesium 绘制剖面分析图
目录一、实现效果图二、核心代码1.世界坐标转换为经纬度2.计算两点空间距离3.线段插值4.绘制剖面分析线段三、完整源码原创 2022-03-15 16:25:29 · 3074 阅读 · 4 评论 -
cesium 热力图(基于CesiumHeatmap源码修改后实现)
一、热力图效果图二、核心代码 // 模拟热力图坐标范围及核心代码 loadCesiumHeatMapFun(){ let tmpXYList = [ new Cesium.Cartographic(111.2300232,39.5279085, 0), new Cesium.Cartographic(111.2300178,39.5256063, 0), new Cesium.Cartographic(111.19880原创 2021-11-15 15:02:48 · 1934 阅读 · 3 评论 -
vue + cesium 人和车路线全景漫游播放
全景漫游核心代码如下:处理Cartesian3点的数据集合添加到positionsList中 trackView(positionsList) { if(trackedEntity) window.viewer.entities.remove(trackedEntity) trackedEntity = undefined window.viewer.trackedEntity = undefined window.viewer....原创 2021-09-15 11:08:15 · 1277 阅读 · 0 评论 -
vue + cesium 加载gltf三维模型
在Cesium中除了使用3dtiles加载海量模型还可以使用 ModelInstanceCollection 来批量加载 gltf 或 glb 格式的三维模型;核心代码如下:/* 批量处理gltf或glb格式模型 */function getModelPostInstances(data) { var modelPosts = []; for (var y = 0; y < data.length; ++y) { var longitude ...原创 2022-02-17 09:38:30 · 2969 阅读 · 9 评论 -
Vue+Cesium创建项目并加载地图全过程
Vue2创建项目并配置Cesium加载三维地图cesium 安装配置npm run dev 运行错误处理原创 2022-03-05 16:46:21 · 6079 阅读 · 4 评论 -
“数字孪生”技术与 AI 技术的融合应用
国家发展改革委重磅发布《关于推进“上云用数赋智”行动 培育新经济发展实施方案》(以下简称《方案》),其中“数字孪生”技术在《方案》中被提及多次,和云计算、人工智能、5G、物联网等前沿技术一样,受关注程度上升到国家高度。一、数字孪生是什么早在2002年,“数字孪生(Digital Twin)”这一概念被美国Michael Grieves教授提出。12年后,他再次详细地解释了数字孪生概念,是指在信息空间构建一个可以映射表征物理设备的虚拟系统,他们之间的联系并不是单向...原创 2021-12-07 14:14:04 · 5906 阅读 · 3 评论 -
cesium 地图场景范围导出
一、场景导出效果二、核心代码function sceneImgDatatoBlob(sceneImgUrl){ let arrList = sceneImgUrl.split(','), mime = arrList[0].match(/:(.*?);/)[1], bstr = atob(arrList[1]), n = bstr.length, u8arr = new Uint8Array(n); while (n--) { u8arr[.原创 2021-12-02 15:50:30 · 1343 阅读 · 0 评论 -
WebGL、ThreeJS、BabylonJS、SceneJS和Cesium框架对比及简介
主要介绍WebGL的各个框架的特点,适用范围,优缺点以及相关网址范例;以便于后续更快速的开发,提高生产效率,最后进行总结;一、 BabylonJS(开源;JavaScript、TypeScript)(一)特点强大,美观,简单和开放的3D渲染体验。(二)适用范围Babylon.js是一款WebGL开发框架。 适合做中大型项目,尤其是多种媒体混杂的或者是游戏项目VR体验项目(三)支持格式glTF,OBJ,STL,.babylon (...原创 2021-10-22 18:36:52 · 9542 阅读 · 1 评论 -
cesium glb模型参数动态修正工具
在cesium中加载glb模型时需要反复调整参数,为了方便编写了一个页面辅助模型位置修正;现分享给大家,不足之处请包涵组件页面如下:组件完整代码如下:<template> <div id="glbToolBar" v-if="glbToolBarIsShow"> <table style="text-align: right;"> <tr> <td colspan="2" style="text.原创 2021-09-27 20:39:06 · 1138 阅读 · 0 评论