- 博客(24)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 在ArcGIS JS API中使用Three.js加载动画模型
这篇博客介绍了如何在 ArcGIS API for JavaScript 中集成 Three.js 以加载动画模型，适用于 WebGIS 3D 可视化场景，例如智慧城市、无人机模拟、城市规划等应用场景。
2025-03-31 14:41:04
913
原创 安装人大金仓数据库KingbaseES以及PostGIS扩展
通过本文的步骤，您可以成功安装 KingbaseES 数据库并启用 PostGIS 扩展，为空间数据的管理和分析提供强大支持。KingbaseES 作为国产数据库，结合 PostGIS 扩展，能够满足地理信息系统（GIS）和空间数据处理的多样化需求。希望本文能为您的空间数据库实践提供帮助！
2025-02-28 01:07:46
1133
原创 ArcGIS JS API之ExtrudeSymbol3DLayer实现白膜效果
白模通常用来在地图中展示建筑物的基本轮廓和高度信息。本文介绍如何使用ArcGIS JS API实现白模效果。这种效果不仅能够清晰地展示建筑物的轮廓和高度，还能够通过颜色区分不同类型的建筑物。
2025-02-19 00:08:45
887
原创 ArcGIS JS API之通过客户端要素创建FeatureLayer
学习如何使用ArcGIS JS API在没有要素服务地址时，通过客户端要素创建FeatureLayer，并展示在地图上。
2025-02-16 17:06:28
851
原创 在ArcGIS JS API中使用WebGL实现波纹扩散特效
波纹扩散特效是一种常见的视觉效果，通常用于表示某个点的扩散过程，比如地震波的传播、污染物的扩散等。本文将使用ArcGIS JS API创建的三维场景SceneView和WebGL技术来实现这一效果。通过自定义渲染节点RenderNode，我们可以在3D场景中生成波纹扩散动态效果。ArcGIS JS API从4.29版本开始提供了RenderNode类，该类提供对 SceneView 渲染管道的底层访问，以创建自定义可视化和效果。渲染节点在渲染管道的不同阶段注入自定义 WebGL 代码以更改其输出。
2025-02-11 16:32:15
1266
原创 如何部署npm私有仓库以及在项目中如何使用
使用 Verdaccio 可以很轻松容易的搭建一个私有的 npm 仓库，可以为团队或个人提供一个方便管理和分享 npm 包的平台，部署和使用都非常简单，大家快用起来吧！
2024-04-18 16:40:53
3338
1
原创 ArcGIS JS API实现小车导航效果
本文详细介绍了如何利用ArcGIS JS API实现小车导航效果。借助ArcGIS JS API的强大功能和灵活性，构建出一个小车实时位置更新可视化效果页面。本示例最主要使用了ArcGIS JavaScript API中的渲染器、符号图层以及图层等API。
2023-07-06 20:29:47
1183
1
原创 三维场景路径流线效果实现及如何发布npm包
如何在ArcGIS JS API创建的三维场景中实现路径流线效果，以及如何将成果发布成npm包，方便在其它项目中使用。
2023-03-26 14:18:00
456
原创 使用ArcGIS JS API与Tween.js实现图层闪烁动画效果
在本文中，我们使用ArcGIS JS API 和tween.js库创建了一个简单的图层闪烁动画效果。我们使用tween.js库来创建Tween对象，该对象将图层的不透明度从1渐变到0，然后再渐变回来。我们使用使动画无限循环，使用yoyo(true)使动画在循环时反转方向，使图层看起来像是在闪烁。希望这篇文章能够帮助您在自己的地图应用程序中创建动画效果。
2023-03-19 19:23:33
1272
原创 不常用但有用的HTML标签
作为一名前端开发人员，不管是高级前端还是入门级前端，都应该至少掌握HTML、CSS和JavaScript这三门技术。其中HTML作为页面的骨架，是最不可缺少的，平常大家用于构建页面的标签应该不多，特别是用了第三方UI组件库后，基本上应该只有几个标签被用到了。今天就来给大家总结下平常我们不常用但是有用的HTML标签。...
2022-07-01 00:54:21
1292
原创 ArcGIS JS API创建自定义图层实现在2D地图中渲染水波纹扩散效果
在2D地图中渲染水波纹扩散效果，首先来看下效果。该效果在地图放大、缩小、平移、旋转过程中不会出现卡顿、效果偏移的现象。效果实现起来非常简单，利用ArcGIS API中的BaseLayerView2D(点击查看文档)类以及canvas相关方法就能实现。也可以下载示例代码查看。点击下载示例完整代码。最后，有什么疑惑或想法可以留言评论以及私信我，看到后一定会第一时间回复~最后的最后，希望大家点个赞再走~...
2021-05-19 16:36:59
1139
3
原创 ArcGIS JS API+Three.js实现下雪特效
ArcGIS JS API+Three.js实现下雪特效首先还是来看下效果图。通过观察图片知道，在三维场景中移动和旋转地图，雪花也会有所变化。这是因为本示例中的雪花效果确实是添加进场景中的，是三维空间中的一部分。而有些在三维地图中展示下雪效果的解决方案只是在地图的表面添加了一张GIF的动图，展现不出空间效果。本示例效果实现的原理是利用Three.js创建我们自定义的三维场景以及渲染器，在场景中添加雪花效果，雪花效果其实就是粒子效果，然后通过ArcGIS API中的externalRenderers接
2021-04-19 17:09:11
1460
2
原创 ArcGIS JS API+Three.js实现动态航线效果
ArcGIS JS API+Three.js实现动态航线效果首先我们来看下效果吧~该示例里有两个动态效果，一个是光线沿着类似抛物线轨迹运动的效果，一个是光线落地后有一个类似波纹扩散的效果。下面就来详细看看怎么实现这两个效果。动态航线效果实现动态航线的原理很简单，就是每隔一段时间就更新线段的位置，连贯起来就是线段流动的效果。那么首先我们就要得到一条曲线轨迹，three.js中有一个CatmullRomCurve3类，可以用来创建一条平滑的曲线。我们需要三个点来创建曲线，除了起点，终点，我们还需要一
2021-04-14 16:34:11
3001
10
原创 Three.js实现抛物线动态流向效果
Three.js实现抛物线动态流向效果老规矩，首先来看下最终实现的效果。该效果可能会用在飞机航线起点到终点的演示、导弹发射轨迹效果演示等场景。掌握思路以后，效果实现起来非常简单，总结下来要点其实就两个：1.绘制抛物线；2.实现流向动态效果。下面就来看看具体实现过程吧。创建三维场景首先我们要创建一个三维场景，创建场景非常简单，仅仅一句代码就能实现。const scene = new THREE.Scene();创建了场景后，我们还不能显示任何东西，因为还需要用到渲染器和相机。// 创建相机
2021-04-08 16:46:55
1977
3
原创 使用ArcGIS API和Three.js在三维场景中实现动态立体墙效果
使用ArcGIS API和Three.js在三维场景中实现动态立体墙效果废话不多说，直接先来看下最终实现的动态立体墙效果图。如果图片还不够直观，那么点击链接查看在线示例。首先我们需要用到ArcGIS API中的externalRenderers类将外部的Three.js渲染器加载到地图三维场景中，如果不知道怎么使用的可以查看我的这篇文章《ArcGIS API在视图中渲染Three.js场景》。那篇文章中加载的是一个三维模型，而本示例中只需加载一面“墙”，也就是一个平面，并增加一个动态效果。所以重点就
2020-08-27 15:10:57
3926
4
原创 ArcGIS API中PictureMarkerSymbol使用GIF图片
在前几天，ArcGIS API for JavaScript发布了新版本，也就是4.15版本。其中有一个小功能更新，我认为还是挺有用的，可以使我们地图的表现形式更加丰富。这个小的功能更新就是PictureMarkerSymbol支持GIF动态图和PNG格式的透明图了，不过有点遗憾的是不支持在3D场景SceneView中使用，只能在2D MapView中使用。下面我们就来试一下这个功能，做一个简单的...
2020-04-14 15:58:21
3143
8
原创 ArcGIS API在视图中渲染Three.js场景
ArcGIS API在视图中渲染Three.js场景ArcGIS API中的SceneView使用WebGL在屏幕上渲染地图和场景，还提供了一个底层接口来访问SceneView的WebGL上下文，因此可以创建与场景交互的自定义可视化效果，方式与内置图层相同。那么我们可以直接编写WebGL代码，也可以集成第三方WebGL库（例如Three.js）。现在我门就来尝试在ArcGIS的三维场景中加...
2020-04-04 18:53:30
3387
9
原创 Three.js实现简单开门动画
Three.js实现简单开门动画先来看一下简单的开门动画实现效果，如下图所示：可以看得出这个开门动画还是比较简单的，主要关键点有2个地方：实现门围绕右门框旋转。利用关键帧实现动画。1.实现门围绕右门框旋转Three.js中物体的默认旋转中心为物体自身的中心，例如有一扇门（实际上是一个宽为10，高为20，深度为0.5的立方体），如果让它绕Y轴旋转90度，也就是设置rotation....
2020-03-27 15:47:43
3279
3
原创 Three.js实现光照阴影
Three.js实现光照阴影在Three.js中，物体可以形成阴影投影效果，但是由于渲染阴影需要消耗计算机大量资源，所以Three.js在默认情况下是不会渲染阴影的。 为了实现渲染阴影效果，我们还需要完成以下四个部分的设置。1. renderer设置首先我们需要告诉渲染器我们需要阴影效果：renderer.shadowMap.enabled = true;更多详细内容可以查看WebGL...
2020-03-23 17:50:05
2271
原创 PM2常用命令
PM2常用命令最简单的命令：$ pm2 start app.js # 启动app.js应用程序还可以加入一些参数，例如：$ pm2 start app.js --name <app_name> # 指定应用名称$ pm2 start app.js --watch # 当文件变化时自动重启应用$ pm2 start app.js --log <log_path>...
2020-03-19 23:29:39
150
ArcGIS JS API+Three.js实现下雪特效.zip
2021-04-19
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人