Skip to content

Release v0.1.7

Latest
Latest

Choose a tag to compare

View all tags
@leongaooo leongaooo released this 29 Sep 11:50
· 7 commits to main since this release
v0.1.7
890cffe

🚀 Cesium-Kit v0.1.7 Release Notes

🎉 What's New

✨ Enhanced RippleMarker Component

我们大幅改进了 RippleMarker 组件，现在它更加强大和灵活！

🎯 Fixed Click Events

  • 问题：之前多个 marker 的点击事件会相互冲突，只有最后一个创建的 marker 能响应点击
  • 解决：实现了全局事件处理器，现在每个 marker 都能独立响应点击事件
  • 效果：✅ 支持在循环中创建多个 marker，每个都有独立的点击回调

🏷️ Custom Label Backgrounds

  • 新增：支持自定义标签背景板样式
  • 特性：
    • 🎨 背景颜色 (backgroundColor)
    • 🔲 边框颜色和宽度 (backgroundBorderColor, backgroundBorderWidth)
    • 📐 圆角半径 (backgroundCornerRadius)
    • 📏 内边距 (backgroundPadding)
    • 📍 文字对齐方式 (textAlign, verticalAlign)

🔧 Technical Improvements

  • ID 管理：修复了实体 ID 匹配问题，确保点击检测准确
  • 事件处理：使用全局事件处理器避免重复绑定
  • 类型安全：增强了 TypeScript 类型定义

🛠️ Development Workflow Enhancements

📦 Cross-Platform Build Scripts

  • 新增：TypeScript 版本的构建脚本
  • 支持：Windows、macOS、Linux 全平台兼容
  • 命令： 
    npm run tag      # 创建 git tag
npm run tph      # 创建并推送 tag
npm run release  # 完整发布流程

🎨 CSS Bundling Optimization

  • 改进：自动化的 CSS 导出生成
  • 特性：构建时自动扫描 src/styles 并更新 package.json exports
  • 优势：无需手动维护 CSS 导出配置

🐛 Bug Fixes

RippleMarker Issues

  • ❌ 修复：多个 marker 点击事件冲突
  • ❌ 修复：标签位置随相机移动的问题
  • ❌ 修复：pickedObject.id.startsWith is not a function 错误
  • ❌ 修复：实体 ID 设置问题

ViewerClick Issues

  • ❌ 修复：pickPosition 返回 null 时的处理
  • ❌ 修复：与 RippleMarker 点击事件冲突

📚 Documentation Updates

📖 Enhanced Documentation

  • 新增：CameraControl 组件详细使用文档
  • 优化：开发流程指引 (CONTRIBUTING.md, DEVELOPMENT.md)
  • 改进：主 README.md 结构优化

🎯 Usage Examples

Basic RippleMarker with Custom Label

const marker = RippleMarker(viewer, {
  lon: 116.4074,
  lat: 39.9042,
  data: { name: "北京" },
  label: {
    text: "北京市",
    font: "18px sans-serif",
    fillColor: "#ffffff",
    backgroundColor: "rgba(0, 0, 0, 0.8)",
    backgroundBorderColor: "#ffffff",
    backgroundCornerRadius: 20,
    backgroundBorderWidth: 1,
    backgroundPadding: { x: 12, y: 6 },
    textAlign: "center",
    verticalAlign: "middle",
  },
  onClick: (data, position) => {
    console.log("点击了标记:", data);
  },
});

Multiple Markers Support

// 现在可以在循环中创建多个 marker，每个都有独立的点击事件
const cities = [
  { name: "北京", lon: 116.4074, lat: 39.9042 },
  { name: "上海", lon: 121.4737, lat: 31.2304 },
  { name: "广州", lon: 113.2644, lat: 23.1291 },
];

cities.forEach((city) => {
  RippleMarker(viewer, {
    lon: city.lon,
    lat: city.lat,
    data: { name: city.name },
    label: { text: city.name },
    onClick: (data) => {
      console.log(`点击了${data.name}`);
    },
  });
});

🚀 Getting Started

Installation

npm install cesium-kit

Import

import { RippleMarker, ViewerClick, createCameraControl } from "cesium-kit";
import "cesium-kit/styles/camera-control.css";

🎊 What's Next

我们正在计划以下功能：

  • 🌍 更多 3D 可视化组件
  • 📱 移动端优化
  • 🎨 更多主题样式
  • 📊 数据可视化工具

🙏 Acknowledgments

感谢所有贡献者和用户的支持！特别感谢报告 bug 和提出改进建议的开发者们。

Happy Coding! 🎉

Cesium-Kit Team

Assets 2
Loading