vislite 1.12.0 → 1.12.1

package/skills/vislite-lib/PieLayout.md

@@ -1,132 +1,132 @@
-# PieLayout 饼图布局
-
-PieLayout 用于绘制饼图/环形图，支持交互和动画。
-
-## 引入
-
-```js
-import { PieLayout } from 'vislite';
-```
-
-## 初始化
-
-```js
-var pieLayout = new PieLayout(config);
-```
-
-### config 配置
-
-```js
-{
-    // 获取名称
-    name: function(pieData, initPie) {
-        return pieData.name;
-    },
-
-    // 获取值
-    value: function(pieData, initPie) {
-        return pieData.value;
-    }
-}
-```
-
-## setOption 设置布局行为
-
-```js
-pieLayout.setOption({
-    cx: 200,                    // 圆心x坐标
-    cy: 200,                    // 圆心y坐标
-    radius: [50, 100],          // 半径：[内半径, 外半径]
-    duration: 200               // 动画时长(ms)
-});
-```
-
-## use 坐标计算
-
-```js
-var pie = pieLayout.use(initPie, hoverIndex);
-```
-
-### 返回值 pie 结构
-
-```js
-{
-    count: 数据项数量,
-    cx: 圆心x,
-    cy: 圆心y,
-    radius: [内半径, 外半径],
-    hoverIndex: 当前悬浮项索引,
-    node: [
-        {
-            value: 数值,
-            name: 名称,
-            beginDeg: 开始弧度,
-            deg: 跨越弧度,
-            isHover: 是否悬浮,
-            radius: [当前内半径, 当前外半径],
-            label: {
-                line: [[x1,y1], [x2,y2], [x3,y3]],  // 标签线
-                position: [x, y],                  // 标签位置
-                align: 'left' | 'right'             // 对齐方式
-            }
-        }
-    ]
-}
-```
-
-## bind 绑定渲染
-
-```js
-pieLayout.bind(initPie, function(pie) {
-    // 绘制饼图
-    for (var i = 0; i < pie.count; i++) {
-        var node = pie.node[i];
-        // 绘制扇形...
-    }
-});
-```
-
-## 交互方法
-
-```js
-// 设置悬浮项
-pieLayout.setHover(index);
-
-// 更新布局
-pieLayout.doUpdate();
-
-// 解绑
-pieLayout.unbind();
-```
-
-## 使用示例
-
-```js
-var pieLayout = new PieLayout();
-
-pieLayout.setOption({
-    cx: 200,
-    cy: 200,
-    radius: [30, 100],
-    duration: 300
-});
-
-var data = [
-    { name: 'HTML', value: 30 },
-    { name: 'CSS', value: 20 },
-    { name: 'JavaScript', value: 50 }
-];
-
-var pie = pieLayout.use(data);
-
-// 绘制饼图
-for (var i = 0; i < pie.count; i++) {
-    var node = pie.node[i];
-    var colors = ['red', 'green', 'blue'];
-
-    painter.config({
-        fillStyle: colors[i]
-    }).fillArc(pie.cx, pie.cy, node.radius[0], node.radius[1],
-               node.beginDeg, node.deg);
-}
+# PieLayout 饼图布局
+
+PieLayout 用于绘制饼图/环形图，支持交互和动画。
+
+## 引入
+
+```js
+import { PieLayout } from 'vislite';
+```
+
+## 初始化
+
+```js
+var pieLayout = new PieLayout(config);
+```
+
+### config 配置
+
+```js
+{
+    // 获取名称
+    name: function(pieData, initPie) {
+        return pieData.name;
+    },
+
+    // 获取值
+    value: function(pieData, initPie) {
+        return pieData.value;
+    }
+}
+```
+
+## setOption 设置布局行为
+
+```js
+pieLayout.setOption({
+    cx: 200,                    // 圆心x坐标
+    cy: 200,                    // 圆心y坐标
+    radius: [50, 100],          // 半径：[内半径, 外半径]
+    duration: 200               // 动画时长(ms)
+});
+```
+
+## use 坐标计算
+
+```js
+var pie = pieLayout.use(initPie, hoverIndex);
+```
+
+### 返回值 pie 结构
+
+```js
+{
+    count: 数据项数量,
+    cx: 圆心x,
+    cy: 圆心y,
+    radius: [内半径, 外半径],
+    hoverIndex: 当前悬浮项索引,
+    node: [
+        {
+            value: 数值,
+            name: 名称,
+            beginDeg: 开始弧度,
+            deg: 跨越弧度,
+            isHover: 是否悬浮,
+            radius: [当前内半径, 当前外半径],
+            label: {
+                line: [[x1,y1], [x2,y2], [x3,y3]],  // 标签线
+                position: [x, y],                  // 标签位置
+                align: 'left' | 'right'             // 对齐方式
+            }
+        }
+    ]
+}
+```
+
+## bind 绑定渲染
+
+```js
+pieLayout.bind(initPie, function(pie) {
+    // 绘制饼图
+    for (var i = 0; i < pie.count; i++) {
+        var node = pie.node[i];
+        // 绘制扇形...
+    }
+});
+```
+
+## 交互方法
+
+```js
+// 设置悬浮项
+pieLayout.setHover(index);
+
+// 更新布局
+pieLayout.doUpdate();
+
+// 解绑
+pieLayout.unbind();
+```
+
+## 使用示例
+
+```js
+var pieLayout = new PieLayout();
+
+pieLayout.setOption({
+    cx: 200,
+    cy: 200,
+    radius: [30, 100],
+    duration: 300
+});
+
+var data = [
+    { name: 'HTML', value: 30 },
+    { name: 'CSS', value: 20 },
+    { name: 'JavaScript', value: 50 }
+];
+
+var pie = pieLayout.use(data);
+
+// 绘制饼图
+for (var i = 0; i < pie.count; i++) {
+    var node = pie.node[i];
+    var colors = ['red', 'green', 'blue'];
+
+    painter.config({
+        fillStyle: colors[i]
+    }).fillArc(pie.cx, pie.cy, node.radius[0], node.radius[1],
+               node.beginDeg, node.deg);
+}
 ```

package/skills/vislite-lib/Projections.md

@@ -1,159 +1,159 @@
-# 坐标投影 API
-
-VISLite 提供多种地图坐标投影算法，用于地图可视化开发。
-
-## Mercator 墨卡托投影
-
-墨卡托投影是航海和航空中常用的投影方式。
-
-### 引入
-
-```js
-import { Mercator } from 'vislite';
-```
-
-### 初始化
-
-```js
-var mercator = new Mercator(scale, center);
-```
-
-### 参数说明
-
-- **scale**: 缩放比例，默认7
-- **center**: 投影中心经纬度 `[经度, 纬度]`，默认 `[107, 36]`（中国中心附近）
-
-### 使用方法
-
-```js
-var mercator = new Mercator(7, [107, 36]);
-
-// 将经纬度转换为平面坐标
-var [x, y, z] = mercator.use(经度, 纬度);
-```
-
-### 使用示例
-
-```js
-var mercator = new Mercator(7, [116.4, 39.2]); // 北京
-
-// 北京的经纬度
-var [x, y] = mercator.use(116.4, 39.2);
-console.log(x, y); // 输出平面坐标
-```
-
----
-
-## Eoap 等角斜方位投影
-
-等角斜方位投影是一种适合显示以某点为中心区域的投影方式。
-
-### 引入
-
-```js
-import { Eoap } from 'vislite';
-```
-
-### 初始化
-
-```js
-var eoap = new Eoap(scale, center);
-```
-
-### 参数说明
-
-- **scale**: 缩放比例，默认7
-- **center**: 投影中心经纬度 `[经度, 纬度]`，默认 `[107, 36]`
-
-### 使用方法
-
-```js
-var eoap = new Eoap(7, [116.4, 39.2]);
-
-// 将经纬度转换为平面坐标
-var [x, y, z] = eoap.use(经度, 纬度);
-```
-
-### 特点
-
-- 以投影中心为原点，周围的区域变形较小
-- 适合绘制局部地图（如某个国家或城市）
-- 保持了角度的正确性
-
----
-
-## MapCoordinate 地图坐标系
-
-MapCoordinate 用于处理地图坐标转换和边界计算。
-
-### 引入
-
-```js
-import { MapCoordinate } from 'vislite';
-```
-
-### 初始化
-
-```js
-var mapCoord = new MapCoordinate(projection, option);
-```
-
-### 参数说明
-
-- **projection**: 投影对象（Mercator 或 Eoap）
-- **option**: 配置项
-  - `width`, `height`: 画布尺寸
-  - `x`, `y`: 偏移量
-
-### 主要功能
-
-```js
-// 经纬度转屏幕坐标
-mapCoord.lonlatToScreen(lon, lat);
-
-// 屏幕坐标转经纬度
-mapCoord.screenToLonlat(x, y);
-
-// 获取地图边界
-mapCoord.getBoundary();
-```
-
-### 使用示例
-
-```js
-var mercator = new Mercator(7, [107, 36]);
-var mapCoord = new MapCoordinate(mercator, {
-    width: 800,
-    height: 600
-});
-
-// 绘制地图
-geoJson.features.forEach(feature => {
-    feature.geometry.coordinates.forEach(polygon => {
-        painter.beginPath();
-        polygon[0].forEach((point, i) => {
-            var [x, y] = mapCoord.lonlatToScreen(point[0], point[1]);
-            if (i === 0) painter.moveTo(x, y);
-            else painter.lineTo(x, y);
-        });
-        painter.closePath().fill();
-    });
-});
-```
-
----
-
-## 投影对比
-
-| 特性 | Mercator | Eoap |
-|------|----------|------|
-| 适用场景 | 全球航海图 | 局部区域图 |
-| 中心点 | 固定赤道 | 可自定义 |
-| 变形 | 高纬度变形大 | 中心区域变形小 |
-| 角度 | 保持方向 | 保持角度 |
-
-## 选择建议
-
-- **全球地图或航海图**: 使用 Mercator
-- **某个国家/城市的局部图**: 使用 Eoap
+# 坐标投影 API
+
+VISLite 提供多种地图坐标投影算法，用于地图可视化开发。
+
+## Mercator 墨卡托投影
+
+墨卡托投影是航海和航空中常用的投影方式。
+
+### 引入
+
+```js
+import { Mercator } from 'vislite';
+```
+
+### 初始化
+
+```js
+var mercator = new Mercator(scale, center);
+```
+
+### 参数说明
+
+- **scale**: 缩放比例，默认7
+- **center**: 投影中心经纬度 `[经度, 纬度]`，默认 `[107, 36]`（中国中心附近）
+
+### 使用方法
+
+```js
+var mercator = new Mercator(7, [107, 36]);
+
+// 将经纬度转换为平面坐标
+var [x, y, z] = mercator.use(经度, 纬度);
+```
+
+### 使用示例
+
+```js
+var mercator = new Mercator(7, [116.4, 39.2]); // 北京
+
+// 北京的经纬度
+var [x, y] = mercator.use(116.4, 39.2);
+console.log(x, y); // 输出平面坐标
+```
+
+---
+
+## Eoap 等角斜方位投影
+
+等角斜方位投影是一种适合显示以某点为中心区域的投影方式。
+
+### 引入
+
+```js
+import { Eoap } from 'vislite';
+```
+
+### 初始化
+
+```js
+var eoap = new Eoap(scale, center);
+```
+
+### 参数说明
+
+- **scale**: 缩放比例，默认7
+- **center**: 投影中心经纬度 `[经度, 纬度]`，默认 `[107, 36]`
+
+### 使用方法
+
+```js
+var eoap = new Eoap(7, [116.4, 39.2]);
+
+// 将经纬度转换为平面坐标
+var [x, y, z] = eoap.use(经度, 纬度);
+```
+
+### 特点
+
+- 以投影中心为原点，周围的区域变形较小
+- 适合绘制局部地图（如某个国家或城市）
+- 保持了角度的正确性
+
+---
+
+## MapCoordinate 地图坐标系
+
+MapCoordinate 用于处理地图坐标转换和边界计算。
+
+### 引入
+
+```js
+import { MapCoordinate } from 'vislite';
+```
+
+### 初始化
+
+```js
+var mapCoord = new MapCoordinate(projection, option);
+```
+
+### 参数说明
+
+- **projection**: 投影对象（Mercator 或 Eoap）
+- **option**: 配置项
+  - `width`, `height`: 画布尺寸
+  - `x`, `y`: 偏移量
+
+### 主要功能
+
+```js
+// 经纬度转屏幕坐标
+mapCoord.lonlatToScreen(lon, lat);
+
+// 屏幕坐标转经纬度
+mapCoord.screenToLonlat(x, y);
+
+// 获取地图边界
+mapCoord.getBoundary();
+```
+
+### 使用示例
+
+```js
+var mercator = new Mercator(7, [107, 36]);
+var mapCoord = new MapCoordinate(mercator, {
+    width: 800,
+    height: 600
+});
+
+// 绘制地图
+geoJson.features.forEach(feature => {
+    feature.geometry.coordinates.forEach(polygon => {
+        painter.beginPath();
+        polygon[0].forEach((point, i) => {
+            var [x, y] = mapCoord.lonlatToScreen(point[0], point[1]);
+            if (i === 0) painter.moveTo(x, y);
+            else painter.lineTo(x, y);
+        });
+        painter.closePath().fill();
+    });
+});
+```
+
+---
+
+## 投影对比
+
+| 特性 | Mercator | Eoap |
+|------|----------|------|
+| 适用场景 | 全球航海图 | 局部区域图 |
+| 中心点 | 固定赤道 | 可自定义 |
+| 变形 | 高纬度变形大 | 中心区域变形小 |
+| 角度 | 保持方向 | 保持角度 |
+
+## 选择建议
+
+- **全球地图或航海图**: 使用 Mercator
+- **某个国家/城市的局部图**: 使用 Eoap
 - **复杂地图交互**: 使用 MapCoordinate 配合投影