ArcGIS JSAPI 高级教程 - ArcGIS Maps SDK for JavaScript - 自定义范围后处理效果

已于 2024-08-02 14:22:05 修改
阅读量1.2k 收藏 24
点赞数 16
CC 4.0 BY-SA版权
分类专栏： ArcGIS Maps SDK for JS 高级教程 文章标签： arcgis jsapi 自定义后处理 rendernode后处理 rendernode后处理范围 rendernode后处理效果 jsapi自定义后处理范围 jsapi自定义后处理效果
于 2024-06-14 09:36:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/linzi19900517/article/details/139636185

ArcGIS JSAPI 高级教程 - ArcGIS Maps SDK for JavaScript - 自定义范围后处理效果

ArcGIS Maps SDK for JavaScript 从 4.29 开始增加 RenderNode 类，可以添加数据以及操作 FBO（ManagedFBO）；

通过操作 FBO，可以通过后处理实现很多效果，官方提供了几个示例，感兴趣可以看看。

本文介绍一下通过 FBO，实现自定义范围后处理效果（自定义三角形范围）。

本文包括核心代码、完整代码以及在线示例。

核心代码

首先介绍一下原理：通过地图构建三角形数据，转为 WebGL 内部坐标，即世界坐标；

顶点着色器中，传递顶点数据；

片元着色器中，根据顶点数据以及三角形顶点数据，判断是否在三角形内，三角形内外显

了解本专栏 订阅专栏 解锁全文 超级会员免费看
ArcGIS JSAPI 高级教程 - ArcGIS Maps SDK for JavaScript - 高斯模糊效果
非科班Java出身GISer的博客
06-14 733
ArcGIS JSAPI 高级教程 - ArcGIS Maps SDK for JavaScript - 高斯模糊效果。
ArcGIS JSAPI 高级教程 - ArcGIS Maps SDK for JavaScript - 添加自定义（GLSL）数据
非科班Java出身GISer的博客
06-14 729
ArcGIS JSAPI 高级教程 - ArcGIS Maps SDK for JavaScript - 添加自定义（GLSL）数据。
ArcGIS JSAPI 学习教程 - ArcGIS Maps SDK for JavaScript 所有版本 - （4.5-4.20，4.21，4.22-最新版4.28）引入使用方式
非科班Java出身GISer的博客
03-25 2189
ArcGIS Maps SDK for JavaScript 所有版本 - 旧版（4.5、4.19、4.20）与新版（4.21至最新版4.28）引入使用使用方式
ArcGIS JSAPI 学习教程 - ArcGIS Maps SDK for JavaScript 不同版本4.8-4.28（最新版）离线部署
非科班Java出身GISer的博客
03-11 2058
ArcGIS JSAPI 学习教程 - ArcGIS Maps SDK for JavaScript 不同版本4.8-4.28（最新版）离线部署。
05-ArcGIS For JavaScript-RenderNode后处理效果
haitunxiaomo的专栏
07-30 714
ArcGIS For JavaScript提供了RenderNode类，去实现一些后处理的效果，比如颜色混合、高亮处理、法线等功能。
ArcGIS JSAPI 高级教程 - ArcGIS Maps SDK for JavaScript - 自定义范围后处理效果（优化版）
非科班Java出身GISer的博客
08-22 1393
ArcGIS JSAPI 高级教程 - ArcGIS Maps SDK for JavaScript - 自定义范围后处理效果（优化版）。
ArcGIS JSAPI 高级教程 - ArcGIS Maps SDK for JavaScript - 设置图层范围（Extent）后处理效果
非科班Java出身GISer的博客
09-29 1162
ArcGIS JSAPI 高级教程 - ArcGIS Maps SDK for JavaScript - 设置图层范围（Extent）后处理效果。
ArcGIS JSAPI 高级教程 - ArcGIS Maps SDK for JavaScript - 添加自定义数据（优化版）
非科班Java出身GISer的博客
07-30 558
ArcGIS JSAPI 高级教程 - ArcGIS Maps SDK for JavaScript - 添加自定义数据（优化版）。
ArcGIS API for JavaScript 基础应用+实例展示+水波纹特效
m0_51244077的博客
11-03 1609
ArcGIS API for JavaScript 基础应用+实例展示+水波纹特效
ArcGIS Maps SDK for JavaScript 资源项目安装和配置指南
gitblog_09597的博客
09-13 510
ArcGIS Maps SDK for JavaScript 资源项目安装和配置指南 jsapi-resources A collection of useful resources for developers using the ArcGIS API for JavaScript. ...
ArcGIS API for JS之基础篇（三）可视化
weixin_41665391的博客
02-21 6511
ArcGIS API for JS之基础篇（三）可视化 终于到家了，可以接着写有意思的东西。如何把数据简洁美观易读的呈现出来，数据可视化内容小结可以给你们惊喜。这篇文章跨域了美赛+新年，它非常有魅力，希望大家可以多多实践！ Demo 首先看一个显示井和地震之间关系的动图，把井和地震的数据同时渲染在视图上，我们可以看到地震频发与挖井是否相关。点击井和地震的符号可以显示他们的详细信息，点击...
WebGL自学课程(3):原生WebGL+ArcGIS JS API绘制旋转的地球
热门推荐
孙群
07-02 1万+
注：转载请注明出处 通过ArcGIS JS API获取地理数据，然后用原生WebGL将其绘制成旋转的地球。一共需要241271个点，绘制了247个国家或地区。 截图： 以下是代码： World html,body,div{margin:0;padding:0}
【ArcGIS】水资源单项评价
qq_45695920的博客
06-25 859
水资源单项评价操作步骤
spring-ai-alibaba官方 Playground 示例
zsj777的专栏
06-30 142
示例使用 Spring AI Alibaba 开发，可以体验聊天机器人、多轮对话、图片生成、多模态、工具调用、MCP集成、RAG知识库等所有框架核心能力。阿里云信息查询服务iqs-search api-key对应环境变量 IQS_SEARCH_API_KEY。阿里云百炼api-key 对应环境变量 AI_DASHSCOPE_API_KEY。百度云翻译sk对应环境变量 BAIDU_TRANSLATE_SECRET_KEY。百度云地图ak对应环境变量 BAIDU_MAP_API_KEY。
OpenLayers 上传Shapefile文件
GIS之路
06-25 594
Shapefile是一种矢量数据文件，使用起来简单、方便。作为数据交换文件，在WebGIS开发中，经常需要实现实现上传shp文件。比如用户需要上传选址范围线或者叠加分析范围，都会选择上传shp文件。本文实现用户即可上传一个单独的shp文件，也可以上传包含所有shp文件的压缩包。jszip。
pnpm命令
i_am_a_div的博客
06-27 216
pnpm命令
【前端】⭐️通过vite构建项目
z2768557792的博客
06-27 206
目前TypeScript语言使用的繁多，而这次模板是 Vite 项目（monorepo）
Vue3项目引入高德地图【超详细教程】
qq_44919431的博客
06-27 805
本文介绍了在Vue 3项目中集成高德地图的完整流程。首先通过Vite初始化Vue 3项目并安装高德地图JS API加载器，然后在高德开放平台申请开发者Key和安全密钥。接着详细讲解了如何创建地图容器、加载地图实例，以及添加各类地图控件（比例尺、工具条、方向盘等）。文章还展示了3D地图的实现方式，并提供了完整的代码示例。通过本文指导，开发者可以快速在Vue 3项目中实现高德地图的基础功能。
从入门到精通：npm、npx、nvm 包管理工具详解及常用命令
最新发布
blackpeach的博客
06-30 472
本文将详细介绍npm、npx、nvm的定义、用途、区别以及常见命令，帮助你从入门到精通，全面掌握 Node.js 包管理工具的使用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

非科班Java出身GISer

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值