Add SEO metadata and security headers

2026-05-23 11:17:29 +08:00
parent cc65395b59
commit 582a4214b6
40 changed files with 15323 additions and 5 deletions
@@ -0,0 +1,186 @@
+# 矢量图形 (Vector Graphics)
+
+JSAPI v2.0 支持在地图上绘制各种矢量图形，如折线、多边形、圆和贝塞尔曲线。所有矢量图形均支持 WebGL 渲染。
+
+## 1. 折线 (Polyline)
+
+用于绘制路径、轨迹或边界线。
+
+```javascript
+const path = [
+    [116.368904, 39.913423],
+    [116.382122, 39.901176],
+    [116.387271, 39.912501],
+    [116.398258, 39.904600]
+];
+
+const polyline = new AMap.Polyline({
+    path: path,
+    isOutline: true,         // 是否显示描边
+    outlineColor: '#ffeeff', // 描边颜色
+    borderWeight: 3,         // 描边宽度
+    strokeColor: "#3366FF",  // 线颜色
+    strokeOpacity: 1,        // 线透明度
+    strokeWeight: 6,         // 线宽
+    strokeStyle: "solid",    // 线样式: solid, dashed
+    strokeDasharray: [10, 5], // 虚线间隔
+    lineJoin: 'round',       // 折线拐点样式
+    lineCap: 'round',        // 折线端点样式
+    zIndex: 50,
+});
+
+map.add(polyline);
+```
+
+### Polyline 配置项
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| path | Array | - | 路径坐标 `[[lng, lat], ...]` |
+| strokeColor | String | '#00D' | 线条颜色 |
+| strokeOpacity | Number | 1 | 线条透明度 0-1 |
+| strokeWeight | Number | 1 | 线条宽度（像素） |
+| strokeStyle | String | 'solid' | 线条样式：solid / dashed |
+| strokeDasharray | Array | - | 虚线间隔，如 `[10, 5]` |
+| isOutline | Boolean | false | 是否显示描边 |
+| outlineColor | String | '#000' | 描边颜色 |
+| borderWeight | Number | 1 | 描边宽度 |
+| lineJoin | String | 'miter' | 拐点样式：miter / round / bevel |
+| lineCap | String | 'butt' | 端点样式：butt / round / square |
+| geodesic | Boolean | false | 是否大地线（地球曲面最短路径） |
+| showDir | Boolean | false | 是否显示方向箭头 |
+| zIndex | Number | 10 | 层叠顺序 |
+| extData | Any | - | 自定义数据 |
+
+## 2. 多边形 (Polygon)
+
+用于绘制区域、围栏或建筑物轮廓。
+
+```javascript
+const polygonPath = [
+    [116.403322, 39.920255],
+    [116.410703, 39.897555],
+    [116.402292, 39.892353],
+    [116.389846, 39.891365]
+];
+
+const polygon = new AMap.Polygon({
+    path: polygonPath,
+    fillColor: '#ccebc5',   // 填充颜色
+    fillOpacity: 0.5,       // 填充透明度
+    strokeColor: '#2b8cbe', // 轮廓线颜色
+    strokeWeight: 2,        // 轮廓线宽度
+});
+
+map.add(polygon);
+```
+
+### Polygon 配置项
+
+| 参数 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| path | Array | - | 多边形路径 `[[lng, lat], ...]`，支持带孔 `[外环, 孔1, 孔2]` |
+| fillColor | String | '#00D' | 填充颜色 |
+| fillOpacity | Number | 0.5 | 填充透明度 0-1 |
+| strokeColor | String | '#00D' | 边框颜色 |
+| strokeOpacity | Number | 1 | 边框透明度 0-1 |
+| strokeWeight | Number | 1 | 边框宽度（像素） |
+| strokeStyle | String | 'solid' | 边框样式：solid / dashed |
+| strokeDasharray | Array | - | 虚线间隔 |
+| zIndex | Number | 10 | 层叠顺序 |
+| extData | Any | - | 自定义数据 |
+
+## 3. 圆 (Circle)
+
+用于绘制圆形区域，常用于周边搜索范围展示。
+
+```javascript
+const circle = new AMap.Circle({
+    center: [116.403322, 39.920255], // 圆心
+    radius: 1000,           // 半径 (米)
+    fillColor: '#ee2200',
+    fillOpacity: 0.5,
+    strokeColor: '#F33',
+    strokeWeight: 1,
+});
+
+map.add(circle);
+```
+
+## 4. 贝塞尔曲线 (BezierCurve)
+
+绘制平滑曲线，常用于航线或流向图。
+
+```javascript
+const path = [
+    // 起点
+    [116.39, 39.91, 116.37, 39.91], // 控制点1, 控制点2
+    // 途经点
+    [116.38, 39.92, 116.38, 39.93, 116.39, 39.93], 
+    // ...
+];
+
+const bezier = new AMap.BezierCurve({
+    path: path,
+    isOutline: true,
+    outlineColor: '#ffeeff',
+    borderWeight: 3,
+    strokeColor: "#3366FF", 
+    strokeWeight: 6,
+    strokeOpacity: 0.9,
+});
+
+map.add(bezier);
+```
+
+## 矢量图形编辑器
+
+高德提供了 `AMap.PolyEditor`, `AMap.CircleEditor` 等插件，允许用户在地图上交互式编辑矢量图形。
+
+```javascript
+// 需先加载插件 AMap.PolyEditor
+const polyEditor = new AMap.PolyEditor(map, polyline);
+
+polyEditor.open(); // 开启编辑
+// polyEditor.close(); // 结束编辑
+
+polyEditor.on('end', function(event) {
+    console.log('编辑结束，新路径：', event.target.getPath());
+});
+```
+## 5. 最佳实践
+
+### 性能优化
+
+```javascript
+// 大量坐标点时，使用 setPath 而非重新创建
+polyline.setPath(newPath);  // 推荐
+// map.remove(old); map.add(new);  // 不推荐
+
+// 批量操作使用数组
+map.add([polyline1, polyline2, polygon1]);
+map.remove([polyline1, polyline2]);
+```
+
+### 常见问题
+
+**Q: 多边形不显示？**
+
+检查路径是否闭合（首尾相连），确保至少 3 个点。
+
+**Q: 编辑器报错？**
+
+确保先加载插件：
+
+```javascript
+AMap.plugin(['AMap.PolyEditor', 'AMap.CircleEditor'], function() {
+  // 使用编辑器
+});
+```
+
+**Q: 如何判断点是否在多边形内？**
+
+```javascript
+const isInside = polygon.contains([lng, lat]);
+```
+