079：vue+cesium 利用Primitive绘制2000+不同颜色矩形，超快速度

最新推荐文章于 2025-06-21 00:00:00 发布
最新推荐文章于 2025-06-21 00:00:00 发布
阅读量818 收藏 1
点赞数 11
CC 4.0 BY-SA版权
分类专栏： # cesium综合教程200+ 文章标签： 大剑师 cesium教程 cesium入门 cesium示例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/cuclife/article/details/145014439

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，优快云知名博主，深耕openlayers、leaflet、mapbox、cesium，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

查看本专栏目录 - 本文是第 079篇文章

文章目录

一、示例效果图

二、示例介绍

本示例介绍如何在vue+cesium中利用Primitive来绘制多个多边形。组合多个GeometryInstances 为一个Primitive可以极大的提高性能，以下示例绘制了2000+个颜色各异的矩形，覆盖整个地球。

直接复制下面的 vue+cesium源代码，操作2分钟即可运行实现效果.

三、配置说明

1）查看基础设置：htt

了解本专栏 订阅专栏 解锁全文 超级会员免费看
105：vue+cesium 使用Primitive循环生成10个矩形
大剑师兰特的GIS世界
03-10 255
本示例在 Vue + cesium 项目中在球体上设置一个透明窗口，查看球体内部。这里设置一个窗口能看到里面的透明部分，里面放置了一个黄色的小球，为了方面看进去。直接复制下面的 vue+cesium源代码，操作2分钟即可运行实现效果.
075：vue+cesium 导出场景图片
大剑师兰特的GIS世界
06-06 1203
本示例介绍如何在vue+cesium中 导出场景图片。Cesium可以通过canvas的方式将场景导出为图片文件，达到我们想要的效果。直接复制下面的 vue+cesium源代码，操作2分钟即可运行实现效果.
CesiumJS性能优化绝杀技：10个技巧让3D地球加载速度提升
最新发布
贝格前端工场的博客
06-21 1267
在讨论如何优化之前，首先需要明确影响CesiumJS性能的主要因素。地形与影像数据量过大：全球范围内的高分辨率地形和卫星影像数据量巨大，直接导致加载时间延长。复杂的三维模型渲染：精细的城市建筑模型或地质构造增加了GPU负担。频繁的数据请求：动态更新的地图图层或实时监控信息频繁触发网络请求，造成阻塞。不当的资源管理：如未合理利用缓存机制，重复加载相同资源。通过对CesiumJS项目的深入理解和上述十个优化技巧的应用，即使是面对复杂的3D地球场景，我们也能够实现流畅且高效的渲染体验。
cesium-场景出图场景截屏导出图片或pdf
zslsh44的专栏
02-01 1533
如果安装的插件Canvas2Image不好用，可自建js。cesium把当前的场景截图，下载图片或pdf。
Cesium场景导出为图片功能
xt3d的博客
10-31 2614
Cesium场景导出为图片 前言 很多时候用户需要将场景导出为图片进行使用，Cesium可以通过canvas的方式将场景导出为图片文件，达到我们想要的效果 效果图 关键代码 export function saveToFile(scene) { let canvas = scene.canvas; let image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); let li
Cesium场景出图
MLAY
01-04 726
saveToFile() { viewer.render();//重新渲染界面 let canvas = viewer.scene.canvas; let image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream") let link = document.createElement("a"); let blob = this..
Cesium动态绘制面，线，点.vue
09-17
c
cesium 综合教程200+【目录】（已包含178篇文章）
大剑师兰特的GIS世界
09-07 6751
cesium示例教程100+旨在为开发者提供简单快捷的，。在每一个示例中，解释相应的API知识点，做到。目录中有链接的为已有文章，没链接的为目标文章，不断更新中…
cesium绘制网格_Cesium教程中级7 -几何图形和外观
weixin_39962341的博客
12-22 1199
本教程将向您介绍提供使用Primitive API的几何图形和外观系统。这是一个高级主题，用于扩展具有自定义网格、形状、体积和外观的CesiumJS，而不是面向通用的Cesium用户。如果您有兴趣学习如何在地球上绘制各种形状和体积，请查看创建实体教程。CesiumJS可以使用实体(如多边形和椭圆体)创建不同的几何类型。例如，将以下代码复制并粘贴到Hello World Sandcastle示例中，...
cesium 场景出图
weixin_42274795的博客
01-19 1105
cesium 导出为图片 cesium 场景出图的代码很简单，但是有一个坑，导出的图片就是黑色背景其他任何元素都没有，一开始以为是编码有问题。viewer.render() //不加会出现导出是一张黑乎乎的图片， <template> <div class="printout"> <div class="title" @click="saveFile">场景出图</div> </div> </template> <scr
Cesium 展示——地球以及渲染数据导出（下载）为图片或 pdf
虎康的博客
11-23 1002
获取场景 scene 信息，转为image 的 octet-stream 流 进行下载为图片。将 Cesium 球体以及渲染数据导出为 jpg/png/pdf。
Cesium导出图片
m0_62317155的博客
02-08 728
cesium 导出图片
Cesium:三维场景导出为图片
席木木的博客
06-15 810
Cesium导出当前三维场景，保存为本地图片的示例代码。
cesium下载当前场景图
m0_63701303的博客
01-12 327
下载当前场景图
cesium实现场景导出图片功能
专注GIS开发
05-10 3049
cesium实现场景导出图片功能
Cesium场景导出为图片
掘铁
07-31 1456
//将当前场景输出Base64编码。 var promise = viewer.scene.outputSceneToFile(); //异步 Cesium.when(promise,function(base64data){ download(base64data); }) 下面为附件 base64 》Image 》canvas 》可下载图片 function download(base64data) { var image = new Ima..
cesium 地图场景范围导出
wangyong_h
12-02 1511
一、场景导出效果 二、核心代码 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[.
Cesium场景导出为本地PNG图片
Le_Sir的博客
06-25 1457
Cesium场景导出为本地PNG图片 声明 : 本文参考了网上的一些论坛和国外的一些帖子，所有不能算作原创，只做交流学习用途 步骤： 1、获取cesium的canvas,并导出为base64编码的字符串（一定注意render（）函数，不然导出是一张黑乎乎的图片） viewer.render(); var canvas = viewer.scene.canvas; let dataurl = canvas.toDataURL("image/png"); 2、将base64转为图片并存为本地文件（参考知
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

还是大剑师兰特

打赏一杯可口可乐

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值