- 博客(7)
- 收藏
- 关注
RSS订阅原创 Leaflet TIFF图层交互：鼠标悬停显示像素值
本文介绍了如何实现在Leaflet地图上显示TIFF文件像素值的交互功能。主要内容包括：准备工作（引入Leaflet核心库和geotiff.js等插件）、封装获取TIFF信息的方法（获取经纬度坐标并转换为图像坐标）、创建自定义弹窗（显示像素值）以及处理鼠标移出事件。通过该方法，当用户在地图上移动鼠标时，可以实时显示当前点的TIFF数值，并在地图边缘自动关闭弹窗。文章提供了完整的代码实现细节和样式自定义方案。
2025-09-27 15:29:20
1970
原创 Leaflet渲染TIFF文件全攻略
本文介绍了如何在Leaflet地图中渲染TIFF文件（如遥感/高程数据）的核心方法。通过三个关键插件组合实现：geotiff.js解析TIFF数据，proj4.js处理坐标转换，plotty.js进行可视化渲染。具体步骤包括：1）解析TIFF像素数据和地理信息；2）将像素值映射为彩色图像；3）转换坐标系至WGS84；4）叠加到Leaflet地图。文章还提供了避坑指南（跨域问题、投影校准等）和优化建议，并推荐相关资源文档。该方案实现了TIFF数据从解析到可视化呈现的全流程技术链路。
2025-09-26 11:18:33
1144
原创 Leaflet风向箭头聚类实现指南
本文介绍了在Leaflet地图中实现风向箭头聚类功能的方法。核心步骤包括：1）准备包含经纬度、风向角度和风速的数据；2）初始化Leaflet.markercluster插件创建聚类器；3）自定义带旋转角度的风向箭头图标；4）批量添加箭头标记到聚类器实现自动聚合。文章详细说明了数据生成、聚类配置、SVG箭头创建等关键技术点，并提供了动态更新数据和性能优化的建议。最终实现了在不同缩放级别下自动聚类的风向可视化效果，适用于大规模气象站点数据的展示需求。
2025-09-19 16:10:03
1779
1
原创 Leaflet地图开发进阶：区域着色与风向箭头绘制
本文介绍了使用Leaflet实现区域着色和风向箭头可视化的方法。首先加载重庆区县GeoJSON数据，通过数值区间匹配不同颜色实现区域着色。然后利用leaflet-arrowheads插件绘制风向箭头，通过计算终点坐标和设置箭头参数展示风向。最终实现了基于数值的区域着色和直观的风向可视化效果，适用于气象、环境监测等应用场景。文章提供了完整的代码实现和效果展示。
2025-09-09 15:11:46
1043
原创 轻松打造个性化Leaflet地图标记
本文介绍了Leaflet地图库中自定义标记(marker)的多种实现方法。主要内容包括：基础标记加载方式；使用L.icon自定义图片标记；通过L.divIcon实现HTML+CSS完全自定义标记；带数字/文字的标记实现技巧；以及使用CSS动画创建动态水波纹特效标记。文章详细说明了每种方法的实现步骤和关键参数，如iconAnchor偏移量计算、Vue/React框架中的深度样式选择等，并提供了阿里巴巴矢量图标库等资源推荐。这些方法可满足不同类型地图标记的样式需求，开发者可根据项目实际情况选择适合的实现方案。
2025-09-08 12:05:44
1918
原创 Leaflet行政区划边界开发全攻略
本文介绍了基于Leaflet地图库实现行政边界功能的技术方案。首先完成基础环境配置，包括npm包管理、HTML结构和天地图底图集成。重点讲解了GeoJSON数据的获取与加载方法，以成都行政区划为例，展示了如何通过L.geoJson()方法解析数据并自定义样式。文章还提供了交互功能增强代码，包括区域高亮、视图缩放等效果。最后介绍了科幻风格大屏的实现技巧，包括透明背景设置、渐变效果和发光边框等视觉优化方案。该方案适用于数据可视化大屏、指挥中心等需要科技感的展示场景。
2025-08-27 17:28:54
1008
原创 快速上手Leaflet：轻松创建你的第一个交互地图
本文介绍了使用Leaflet库创建地图的基本流程。首先通过npm安装Leaflet，然后初始化HTML容器并设置宽高。代码演示了如何创建地图实例、设置天地图服务地址、初始化地图视图（中心点坐标和缩放级别），以及添加影像底图和标注图层。文章还提到如何添加标记点，并提供了天地图API的使用方法和开发者密钥申请途径。最后展示了销毁旧地图实例和创建新地图的完整代码示例，为Leaflet初学者提供了基础实现参考。
2025-08-25 17:50:48
597
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人