187 lines
5.0 KiB
Markdown
187 lines
5.0 KiB
Markdown
# 矢量图形 (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]);
|
|
```
|
|
|