- 博客(82)
- 资源 (23)
- 收藏
- 关注
RSS订阅
原创 vue+cesium案例：智慧城市多种可视化特效(附源码下载)
基于vue和cesium实现的智慧城市，集成了多种可视化特效，包括建筑物高亮渲染、动态光锥、区域流光飞线、道路飞线、雷达扫描、光波扩散、光墙特效以及粒子烟花等。配置方式：下载demo源码，vscode打开，然后顺序执行以下命令： （1）下载demo环境依赖包命令：npm i。运行环境：依赖Node安装环境，demo本地Node版本:推荐v16+。运行工具：vscode或者其他工具。（2）启动demo命令：npm run dev （3）打包demo命令： npm run build。
2025-04-05 09:18:37
376
原创 关于个人工作总结的一点浅见
我的简介：来自于广东茂名，西南大学gis专业毕业。从毕业至今，已经七年多，在这七年多的时间里，一直在从事着跟gis相关的工作，专注webgis开发领域。总结一下自己的工作涉及领域包括以下几个部分：(1)gis地图数据处理：arcgis以及qgis桌面软件，导入处理gis地图数据，数据源主要是shp、kml、geojson等矢量数据以及tif、img、dem等影像地形数据。数据处理好之后配...
2022-03-30 21:54:00
1157
原创 cesium入门开发基础版本源码demo
系统演示视频地址 ceisum入门开发系列完整版本 demo部署环境jdk1.8环境配置，geoserver集成在tomcat运行需要；geoserver，发布地图服务；demo项目工程html+js+css；demo里面提供tomcat，里面集成geoserver以及三维模型数据，建议直接用；版本更新说明2018-12-23：1.cesium api 1.42版本升
2021-10-30 10:43:50
1861
原创 vue3+arcgisAPI4示例:轨迹点模拟移动(附源码下载)
文章摘要： 本文介绍了一个基于Vue3和ArcGIS API 4的轨迹点平滑移动模拟实现方案。通过加载GeoJSON格式的模拟轨迹线数据，对路径点进行插值处理，生成连续轨迹点集合。利用requestAnimationFrame实现动画效果，控制移动速度和流畅度。核心代码展示了地图初始化、数据加载、动画逻辑及清除功能。运行环境需Node.js支持，通过VSCode执行yarn dev启动示例。最终效果实现轨迹点沿预设路径平滑移动，支持开始/清除模拟操作。
2025-07-31 11:12:54
168
原创 vue3+arcgisAPI4示例:自定义多个气泡窗口展示(附源码下载)
本文介绍了在ArcGIS API 4.x for JavaScript中实现自定义多气泡窗口的方法。由于原生API仅支持单气泡窗口，作者通过监听地图变化事件动态调整窗口位置，结合Leaflet样式和jQuery实现了多窗口展示功能。文章提供了完整的环境配置说明（需Node.js环境）、运行命令和核心代码片段，展示了如何初始化地图、创建多个气泡窗口并实现位置同步更新。该方案解决了ArcGIS API在多窗口展示方面的局限性，为开发者提供了灵活的自定义解决方案。
2025-07-14 16:24:21
316
原创 vue3+leaflet案例:南京市充电站可视化平台(附源码下载)
基于vue3+leaflet+postgresql+postgis的南京市充电站可视化平台案例，覆盖功能点包括底图切换、地图工具栏、充电站点查询（属性和框选查询）、充电站点聚合+热力图以及充电站数量的柱状图/各区县充电站柱状图饼图等，适合学习leaflet与前端框架结合开发webgis开发可视化项目。
2025-07-10 09:55:35
290
原创 vue+cesium示例：风场图(附源码下载)
基于cesium+vue实现风场图功能效果，适合学习Cesium与前端框架结合开发3D可视化项目。
2025-07-02 14:45:42
239
原创 vue3+arcgisAPI4案例:智慧林业资源监测分析平台(附源码下载)
基于vue3+arcgisapi4的智慧林业资源监测分析平台简单案例，覆盖功能点包括图层管理，生态环境监测点，防火路径选线以及智能问答等，适合学习arcgisapi4与前端框架结合开发3D可视化项目。
2025-06-21 12:20:15
412
原创 vue+cesium示例：压平模型(附源码下载)
基于cesium+vue实现压平模型功能效果，适合学习Cesium与前端框架结合开发3D可视化项目。
2025-06-18 20:52:45
221
原创 vue+cesium示例：3D热力图(附源码下载)
接到一位知识星友的邀请，随机模拟三维数据点，结合heatmap.js实现基于cesium+vue的3D热力图需求，适合学习Cesium与前端框架结合开发3D可视化项目。
2025-06-09 11:44:24
778
2
原创 vue+cesium示例：地形开挖(附源码下载)
基于cesium和vue绘制多边形实现地形开挖效果，适合学习Cesium与前端框架结合开发3D可视化项目。
2025-06-03 16:58:37
735
原创 vue+cesium示例：3Dtiles三维模型高度调整(附源码下载)
接到一位知识星友的邀请，实现他需要3Dtiles三维模型的简单高度调整需求，适合学习Cesium与前端框架结合开发3D可视化项目。
2025-05-26 15:10:33
1004
原创 vue+cesium示例：可视域分析(附源码下载)
本文介绍了如何基于Cesium和Vue实现可视域分析效果，适合学习Cesium与前端框架结合开发3D可视化项目。运行环境依赖Node，推荐使用v18+版本，开发工具为VSCode。技术栈包括Vue 3.5.13、Vite 6.2.0和Cesium 1.128.0。核心源码展示了如何初始化Cesium Viewer、加载底图和地形、设置默认视图位置，并实现可视域分析的开始与清除功能。通过加载外部JS文件，实现了可视域分析的核心逻辑，并确保Viewer的生命周期与可视域分析对象一致。
2025-05-16 09:17:40
276
原创 vue3+arcgisAPI4示例:船舶可视化(附源码下载)
使用船舶模拟数据geojson，结合arcgis api 4实现船舶可视化功能，地图不同比例尺显示不同符号化的船舶。（1）下载demo环境依赖包命令：npm install -g。（4）打包demo命令： yarn build:prod。运行环境：依赖Node安装环境，需要安装Node。（3）启动demo命令：yarn dev。运行工具：vscode或者其他工具。
2025-05-06 11:25:38
260
原创 vue+cesium示例：实现动态绘制几何体设置颜色拖动效果(附源码下载)
接到一位知识星友的邀请，他那边的需求是需要动态绘制几何体，并且可以设置颜色以及拖动。所以，本篇的demo是基于cesium和vue实现动态绘制几何体设置颜色拖动效果，适合学习Cesium与前端框架结合开发3D可视化项目。配置方式：下载demo源码，vscode打开，然后顺序执行以下命令： （1）下载demo环境依赖包命令：npm install。（2）启动demo命令：npm run dev （3）打包demo命令： npm run build。运行工具：vscode或者其他工具。
2025-04-27 15:43:27
302
原创 vue+cesium示例：克里金空间插值渲染效果(附源码下载)
在kriging-contour插件基础上，我稍做修改，把canvas加上全国边界范围裁剪，效果跟@sakitam-gis/kriging插件一致，但是渲染速度比@sakitam-gis/kriging插件快。配置方式：下载demo源码，vscode打开，然后顺序执行以下命令： （1）下载demo环境依赖包命令：npm install。1 基于@sakitam-gis/kriging插件实现，根据全国边界范围裁剪渲染，但是渲染效率比较慢；运行工具：vscode或者其他工具。
2025-04-20 11:01:35
332
2
原创 vue+cesium示例：三维建筑物自定义材质(附源码下载)
基于目前最新版本cesium和vue实现三维建筑物自定义材质效果customShader，适合学习Cesium与前端框架结合开发3D可视化项目。自定义着色器customShader，然后赋值给3D建筑物三维模型tileset的customShader属性。运行环境：依赖Node安装环境，demo本地Node版本:推荐v18+。（1）下载demo环境依赖包命令：npm install。（3）打包demo命令： npm run build。（2）启动demo命令：npm run dev。
2025-04-17 09:07:02
315
原创 vue+cesium示例：建筑物单体化分层(附源码下载)
地图初始化加载楼层json数据，按照默认的楼层长宽高，楼层默认高度3米，绘制楼层的外壳几何体ClassificationPrimitive，用于分层高亮；配置方式：下载demo源码，vscode打开，然后顺序执行以下命令： （1）下载demo环境依赖包命令：npm install。（2）启动demo命令：npm run serve （3）打包demo命令： npm run build。运行环境：依赖Node安装环境，demo本地Node版本:推荐v16+。地图点击交互，单击建筑物楼层高亮弹窗。
2025-04-14 11:00:00
365
原创 vue+openlayers示例：地图克里金插值渲染(附源码下载)
kriging.js 插值需要插值点，包括点坐标以及插值权重字段值，还需要插值范围边界，我这里的模拟插值点以及插值边界分别存储在。利用开源 js 库克里金插值 kriging.js，源码 github 见这里：github；运行环境：依赖Node安装环境，demo本地Node版本:推荐v16+。（3）打包demo命令： npm run build。point.js 以及 world.js 文件。（2）启动demo命令：npm run dev。（1）下载demo环境依赖包命令：npm i。
2025-04-08 14:13:55
562
原创 vue+openlayers示例：全图以及框选导出地图功能(附源码下载)
本篇主要参考截图插件domtoimage:https://github.com/tsayen/dom-to-image。配置方式：下载demo源码，vscode打开，然后顺序执行以下命令： （1）下载demo环境依赖包命令：npm i。前端框架 ：Vue 3.5.13 地图库 ：OpenLayers 10.4.0 构建工具 ：Vite 6.2.0。运行工具：vscode或者其他工具。（2）启动demo命令：npm run dev （3）打包demo命令： npm run build。
2025-04-06 10:14:58
394
2
原创 vue+openlayers示例：线水流效果(附源码下载)
3.矢量图层样式组底层保持不变，改变矢量图层的要素feature属性值，动态更新顶层样式的线间隔lineDashOffset属性值，达到线水流动效果。关键点：矢量图层的样式style内部更新渲染机制，在图层可见范围，地图缩放会自动触发；矢量图层的要素设置属性值变化的话，也会触发。运行环境：依赖Node安装环境，demo本地Node版本:推荐v16+。（3）打包demo命令： npm run build。（2）启动demo命令：npm run dev。（1）下载demo环境依赖包命令：npm i。
2025-04-06 10:11:56
295
原创 vue+openlayers矢量瓦片示例：GeoJSON数据源模式渲染(附源码下载)
接到一位星友的邀请，他那边的需求是需要矢量瓦片渲染点数据，所以针对他的业务需求定制开发一个vue+oepnlayers版本的矢量瓦片渲染示例。包含1000+中国城市和地点数据 提供数据生成脚本，可自定义生成更多数据。在tileLoadFunction中从瓦片索引获取对应瓦片数据。使用geojson-vt将GeoJSON数据转换为矢量瓦片。将瓦片数据转换为OpenLayers的Feature对象。这种方式可以高效处理大量点位数据，提升地图渲染性能。矢量瓦片处理 ：geojson-vt 4.0.2。
2025-04-06 10:09:04
361
原创 vue3+arcgisAPI4示例:台风轨迹显示(附源码下载)
运行环境：依赖Node安装环境，需要安装Node。运行工具：vscode或者其他工具。配置方式：下载demo源码，vscode打开，然后顺序执行以下命令：（1）下载demo环境依赖包命令：npm install -g（3）启动demo命令：yarn dev（4）打包demo命令： yarn build:prod。
2025-04-05 09:22:21
308
原创 vue3+arcgisAPI4示例:底图切换显示（附源码下载）
运行环境：依赖Node安装环境，需要安装Node。运行工具：vscode或者其他工具。配置方式：下载demo源码，vscode打开，然后顺序执行以下命令：（1）下载demo环境依赖包命令：npm i（2）启动demo命令：npm run dev（3）打包demo命令： npm run build:prod。
2025-04-05 09:20:54
289
原创 leaflet前端JS实现高德地图POI兴趣点批量分类下载(附源码下载)
详细介绍 leaflet 每个类的函数以及属性等等，leaflet 的插件库，非常有用。
2025-04-04 08:17:13
470
原创 leaflet结合PostGIS动态渲染矢量瓦片(附源码下载)
详细介绍 leaflet 每个类的函数以及属性等等，leaflet 的插件库，非常有用。
2025-04-04 08:15:44
867
原创 leaflet框选范围下载地图离线瓦片:以高德地图为例(附源码下载)
运行环境：依赖Node安装环境，demo本地Node版本:14.19.1。运行工具：vscode或者其他工具。配置方式：下载demo源码，vscode打开，然后顺序执行以下命令：（1）下载demo环境依赖包命令：npm i（2）启动Node后端接口命令：node nodeServer.js（3）打包demo命令： npm run build（4）直接打开index.html页面即可浏览。
2025-04-04 08:13:51
422
原创 vue+leaflet示例:地图截图批量导出(附源码下载)
运行环境：依赖Node安装环境，demo本地Node版本:14.19.1。运行工具：vscode或者其他工具。配置方式：下载demo源码，vscode打开，然后顺序执行以下命令：（1）下载demo环境依赖包命令：npm i（2）启动demo命令：npm run dev（3）打包demo命令： npm run build:release。
2025-04-04 08:12:20
291
原创 vue+leaflet示例:结合Leaflet-Geoman插件实现绘制以及动态配置样式(附源码下载)
运行环境：依赖Node安装环境，demo本地Node版本:14.19.1。运行工具：vscode或者其他工具。配置方式：下载demo源码，vscode打开，然后顺序执行以下命令：（1）下载demo环境依赖包命令：npm i（2）启动demo命令：npm run dev（3）打包demo命令： npm run build:release。
2025-04-04 08:11:02
329
2
原创 vue+leaflet示例:快速渲染聚合矢量瓦片(附源码下载)
运行环境：依赖Node安装环境，demo本地Node版本:14.19.1。运行工具：vscode或者其他工具。配置方式：下载demo源码，vscode打开，然后顺序执行以下命令：（1）下载demo环境依赖包命令：npm i（2）启动demo命令：npm run dev（3）打包demo命令： npm run build:release。
2025-04-03 09:20:24
792
原创 vue+leaflet示例:拓展wms以及wmts地图范围裁剪(附源码下载)
运行环境：依赖Node安装环境，demo本地Node版本:14.19.1。运行工具：vscode或者其他工具。配置方式：下载demo源码，vscode打开，然后顺序执行以下命令：（1）下载demo环境依赖包命令：npm i（2）启动demo命令：npm run dev（3）打包demo命令： npm run build:release。
2025-04-03 09:18:56
327
原创 vue+leaflet示例:实现简单量算工具功能(附源码下载)
运行环境：依赖Node安装环境，demo本地Node版本:14.19.1。运行工具：vscode或者其他工具。配置方式：下载demo源码，vscode打开，然后顺序执行以下命令：（1）下载demo环境依赖包命令：npm i（2）启动demo命令：npm run dev（3）打包demo命令： npm run build:release。
2025-04-03 09:17:29
360
原创 vue+leaflet示例:热力图(附源码下载)
运行环境：依赖Node安装环境，demo本地Node版本:14.19.1。运行工具：vscode或者其他工具。配置方式：下载demo源码，vscode打开，然后顺序执行以下命令：（1）下载demo环境依赖包命令：npm i（2）启动demo命令：npm run dev（3）打包demo命令： npm run build:release。
2025-04-03 09:16:14
368
原创 vue+leaflet示例:直接读取geoTIFF像素值(附源码下载)
运行环境：依赖Node安装环境，demo本地Node版本:14.19.1。运行工具：vscode或者其他工具。配置方式：下载demo源码，vscode打开，然后顺序执行以下命令：（1）下载demo环境依赖包命令：npm i（2）启动demo命令：npm run dev（3）打包demo命令： npm run build:release。
2025-04-03 09:14:09
299
原创 vue+leaflet示例:聚合图功能(附源码下载)
运行环境：依赖Node安装环境，demo本地Node版本:14.19.1。运行工具：vscode或者其他工具。配置方式：下载demo源码，vscode打开，然后顺序执行以下命令：（1）下载demo环境依赖包命令：npm i（2）启动demo命令：npm run dev（3）打包demo命令： npm run build:release。
2025-04-02 17:05:47
351
原创 vue+leaflet示例:地图全图以及框选截图导出功能(附源码下载)
运行环境：依赖Node安装环境，demo本地Node版本:14.19.1。运行工具：vscode或者其他工具。配置方式：下载demo源码，vscode打开，然后顺序执行以下命令：（1）下载demo环境依赖包命令：npm i（2）启动demo命令：npm run dev（3）打包demo命令： npm run build:release。
2025-04-02 17:03:07
663
原创 vue+leaflet示例:结合geoserver利用WFS服务实现图层删除功能(附源码下载)
运行环境：依赖Node安装环境，demo本地Node版本:14.19.1。运行工具：vscode或者其他工具。配置方式：下载demo源码，vscode打开，然后顺序执行以下命令：（1）下载demo环境依赖包命令：npm i（2）启动demo命令：npm run dev（3）打包demo命令： npm run build:release。
2025-04-02 16:56:09
345
原创 vue+leaflet示例:结合geoserver利用WFS服务实现图层编辑功能(附源码下载)
运行环境：依赖Node安装环境，demo本地Node版本:14.19.1。运行工具：vscode或者其他工具。配置方式：下载demo源码，vscode打开，然后顺序执行以下命令：（1）下载demo环境依赖包命令：npm i（2）启动demo命令：npm run dev（3）打包demo命令： npm run build:release。
2025-04-02 16:53:36
313
原创 vue+leaflet示例:结合geoserver利用WFS服务实现图层新增功能(附源码下载)
运行环境：依赖Node安装环境，demo本地Node版本:14.19.1。运行工具：vscode或者其他工具。配置方式：下载demo源码，vscode打开，然后顺序执行以下命令：（1）下载demo环境依赖包命令：npm i（2）启动demo命令：npm run dev（3）打包demo命令： npm run build:release。
2025-04-02 16:51:35
369
arcgis api 4.x for js地图加载arcgis server本地离线瓦片源码
2023-02-03
arcgis api 3.x for js定制开发加载shp以及json源码
2022-04-02
arcgis api 3.x for js大连市地图克里金插值渲染demo源码
2022-04-02
arcgis api 3.x for js 入门开发系列二十二地图模态层源码
2022-04-02
arcgis api 3.x for js 入门开发系列十八风向流动图源码
2022-04-02
arcgis api 3.x for js 地图加载多个气泡窗口展示源码
2022-04-02
arcgis api 3.x for js 解决 textSymbol 文本换行显示源码
2022-04-02
arcgis api 3.x for js 入门开发系列十七在线天地图、百度地图、高德地图源码
2022-04-01
arcgis api 3.x for js入门开发系列九热力图效果源码
2022-01-05
arcgis api 3.x for js 入门开发系列批量叠加zip压缩SHP图层源码
2022-01-05
计算机课程设计题目参考
2023-02-06
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人