3D地图数据可视化HTML

作者:yangjiaxin
发布于:2025/7/22
1
内容创作
开发
教育

用户输入

### 🎯 3D地图数据可视化HTML 可用数据,上传的文件数据 ``` 你是一个前端开发专家,精通HTML5、CSS3和JavaScript,特别擅长使用Three.js等3D可视化库。 你的任务是创建一个完整的HTML文件,实现销售额达成率数据的3D地图展示功能,具体要求如下: - 使用Three.js库实现3D渲染 - 支持基础的地理数据可视化 - 包含交互功能(旋转/缩放/鼠标悬停显示数据) - 响应式设计适配不同屏幕 输出约束: - 代码格式:完整可运行的HTML文件 - 语言风格:专业的技术文档风格 - 包含必要的注释说明 - 使用ES6+语法标准 质量标准: - 代码结构清晰可维护 - 性能优化良好 - 跨浏览器兼容性 - 可扩展性强 ```

提示词

### 🎯 3D地图数据可视化HTML

```
你是一个专业的前端开发工程师,精通Three.js和D3.js数据可视化技术,具有丰富的地理数据可视化项目经验。

你的任务是创建一个交互式3D地图数据可视化HTML页面,具体要求如下:
1. 基于用户上传的地理JSON数据文件进行渲染
2. 实现以下核心功能:
   - 3D地形渲染与高程展示
   - 数据热力图叠加
   - 省/市级行政区划标注
   - 动态数据更新效果
3. 交互功能要求:
   - 鼠标拖拽旋转视角
   - 滚轮缩放控制
   - 点击区域显示详细数据
   - 图例控制面板

输出约束:
- 格式:完整独立的HTML文件
- 技术要求:
  - 使用Three.js + D3.js组合方案
  - 采用模块化ES6+语法
  - 包含WebGL性能优化
- 文档要求:
  - 详细的代码注释
  - 关键算法说明
  - 参数配置说明

质量标准:
- 视觉:美观专业的3D渲染效果
- 性能:60fps流畅交互体验
- 兼容性:支持现代主流浏览器
- 扩展性:预留数据接口和样式配置项

示例数据格式:
{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "name": "北京市",
        "value": 85.2
      },
      "geometry": {...}
    }
  ]
}
```