不做牛马的咩咩羊-CSDN博客

原创 leaflet.js API 结合动画逻辑实现在 leaflet 地图上的实体平滑运动与播放器控制实体运动效果

本章讲述的是通过 leaflet.js 的 API 结合实体动画逻辑实现了在 leaflet 地图上的实体轨迹平滑运动，包括动态路线轨迹、图标样式及点击菜单、实体攻击事件效果等等，同时采用 el-slider 滑块绑定时间控制实体轨迹播放进度，实现一个播放器的效果。requestAnimationFrame 动画结合Turf.js实现平滑运动；el-slider 控制实体运动实现播放效果。

2025-06-09 10:35:57 848

原创自定义 L.draw 折线编辑并扩展末尾添加点位功能

本章讲述的是在 Leaflet 地图和 L.draw 控件的使用下实现自定义 L.draw 折线编辑及折线末尾添加点位的效果。分成初始化以及三个模块递进说明，每个部分都有对应完整代码。如果过程需要了解 Leaflet 的基本使用可以参考 Leaflet的基本使用【入门】。初始化 Leaflet 地图以及 L.draw 控件；绘制折线添加标记并实现点击高亮；自定义折线编辑与删除；在编辑模式上添加点位

2024-12-26 16:23:07 1094

原创创建 leaflet 地图实例并使用 L.draw 控件

本文章主要介绍 Leaflet 的安装初始化以及 L.draw 控件的安装基本使用和自定义 L.draw 控件提示文本，同时对过程中遇到的一些问题进行说明。了解更多关于 Leaflet 的使用可以参见 Leaflet的基本使用【入门】这篇博客。问题1：类型“typeof Control”上不存在属性“Draw”；问题2：无法为“drawLocal”赋值，因为它是只读属性；问题3：设置配置项为true报错。

2024-12-26 16:18:11 1117

原创 three.js动态实现物体显隐以及点击交互事件

最近研究了一个风力发电机监控平台的GitHub项目，然后找了使用three.js的场景功能，将关键代码和页面效果进行展示并说明。一个是实现物体的动态显示与隐藏，一个是实现物体点击交互事件，可以作为参考。

2024-11-05 14:20:49 649

原创 threejs将2D图片转换成3D效果

使用threejs来实现2D图片转换成3D的视觉效果

2024-10-18 17:50:27 948

原创 HTML使用AJAX发送请求、导出数据为JSON文件

完成了一个在HTML文件中测试用户推荐内容接口，将数据整理导出为JSON文件的需求。主要记录一下在HTML中使用AJAX发送请求以及最后导出JSON文件这两个功能。

2024-10-11 15:28:44 643

原创 Cesium案例-三维模型的轨迹运动（动画控制）

本章讲述的是在Cesium中实现飞机模型动画的案例，主要实现实体路线绘制、场景视图切换、路径运动过渡效果等功能。初始化地图与viewer.clock时间配置、Entity实体加载与路线绘制、场景视图切换、路径过渡效果插值变化；内容补充：如何获取Cesium库的三维模型、viewer.zoomTo和viewer.camera.setView对比等等

2024-09-12 16:10:10 4720 4

原创 Cesium的下载与使用

介绍了如何从Cesium官网中下载Cesium完整的项目代码，以及在已有项目中通过npm来安装Cesium，并运行使用。同时了解如何获取Cesium的模型示例，并拷贝代码启动项目进行自定义与操作。

2024-09-12 16:01:02 6608 2

原创 Cesium入门教程

本章将从Cesium的基本使用入手，了解它的常见对象并介绍相应属性及方法。包括：Cesium的初始化、Scene场景、Camera相机、Clock时钟、Entity实体以及Invalid access token的获取问题等等。

2024-08-28 15:52:25 5407

原创 Leaflet的基本使用【入门】

Leaflet的基本使用【入门】——Leaflet的初始化；Leaflet的基本事件：onMapClick 点击事件；marker标记、polyline折线的添加；removeLayer删除图层；popup弹出窗口；Leaflet的使用：1、绘制多条polyline折线；2、自定义marker标记并高亮替换

2024-08-20 15:09:25 1114