feat: 增加高德插件案例以及相关文档

This commit is contained in:
shihui 2021-12-02 16:13:44 +08:00
parent eecada672e
commit cf768e04da
7 changed files with 242 additions and 0 deletions

View File

@ -0,0 +1,6 @@
---
title: Amap Plugin
order: 3
---
`markdown:docs/api/amapPlugin/plugin.zh.md`

View File

@ -0,0 +1,49 @@
---
title: 高德插件
order: 3
---
`markdown:docs/common/style.md`
## 简介
L7 在使用高德地图作为地图底图的时候能轻易的使用高德地图底图提供的插件能力
## 注册使用
```javascript
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [116.475, 39.99],
pitch: 0,
zoom: 13,
plugin: ['AMap.ToolBar', 'AMap.LineSearch'],
})
});
// plugin: ['AMap.ToolBar', 'AMap.LineSearch'],
// 为了使用对应插件的能力,应该首先在 plugin 中注册对应的插件
// 加载的 AMap 会挂载在全局的 window 对象上
scene.on('loaded', () => {
window.AMap.plugin(['AMap.ToolBar', 'AMap.LineSearch'], () => {
// add control
scene.map.addControl(new AMap.ToolBar());
var linesearch = new AMap.LineSearch({
pageIndex: 1, //页码默认值为1
pageSize: 1, //单页显示结果条数默认值为20最大值为50
city: '北京', //限定查询城市,可以是城市名(中文/中文全拼)、城市编码,默认值为『全国』
extensions: 'all', //是否返回公交线路详细信息默认值为『base』
});
//执行公交路线关键字查询
linesearch.search('536', function(status, result) {
//打印状态信息status和结果信息result
// ... do something
});
});
});
```
[高德插件案例](../../../examples/amapPlugin/bus#busStop)

View File

@ -0,0 +1,150 @@
import { Scene, PointLayer, LineLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
id: 'map',
map: new GaodeMap({
center: [116.475, 39.99],
pitch: 0,
zoom: 13,
plugin: ['AMap.ToolBar', 'AMap.LineSearch'],
})
});
scene.addImage(
'road',
'https://gw.alipayobjects.com/zos/bmw-prod/ce83fc30-701f-415b-9750-4b146f4b3dd6.svg',
);
scene.addImage(
'start',
'https://gw.alipayobjects.com/zos/bmw-prod/1c301f25-9bb8-4e67-8d5c-41117c877caf.svg',
);
scene.addImage(
'end',
'https://gw.alipayobjects.com/zos/bmw-prod/f3db4998-e657-4c46-b5ab-205ddc12031f.svg',
);
scene.addImage(
'busStop',
'https://gw.alipayobjects.com/zos/bmw-prod/54345af2-1d01-43e1-9d11-cd9bb953202c.svg',
);
scene.on('loaded', () => {
window.AMap.plugin(['AMap.ToolBar', 'AMap.LineSearch'], () => {
scene.map.addControl(new AMap.ToolBar());
var linesearch = new AMap.LineSearch({
pageIndex: 1, //页码默认值为1
pageSize: 1, //单页显示结果条数默认值为20最大值为50
city: '北京', //限定查询城市,可以是城市名(中文/中文全拼)、城市编码,默认值为『全国』
extensions: 'all', //是否返回公交线路详细信息默认值为『base』
});
//执行公交路线关键字查询
linesearch.search('536', function(status, result) {
//打印状态信息status和结果信息result
const { path, via_stops } = result.lineInfo[0];
const startPoint = [path[0]];
const endpoint = [path[path.length - 1]];
const budStopsData = via_stops.map((stop) => ({
lng: stop.location.lng,
lat: stop.location.lat,
name: stop.name,
}));
const data = [
{
id: '1',
coord: path.map((p) => [p.lng, p.lat]),
},
];
const busLine = new LineLayer({ blend: 'normal' })
.source(data, {
parser: {
type: 'json',
coordinates: 'coord',
},
})
.size(5)
.shape('line')
.color('rgb(99, 166, 242)')
.texture('road')
.animate({
interval: 1, // 间隔
duration: 1, // 持续时间,延时
trailLength: 2, // 流线长度
})
.style({
lineTexture: true,
iconStep: 25,
});
scene.addLayer(busLine);
const startPointLayer = new PointLayer({ zIndex: 1 })
.source(startPoint, {
parser: {
x: 'lng',
y: 'lat',
type: 'json',
},
})
.shape('start')
.size(20)
.style({
offsets: [0, 25],
});
scene.addLayer(startPointLayer);
const endPointLayer = new PointLayer({ zIndex: 1 })
.source(endpoint, {
parser: {
x: 'lng',
y: 'lat',
type: 'json',
},
})
.shape('end')
.size(25)
.style({
offsets: [0, 25],
});
scene.addLayer(endPointLayer);
const busStops = new PointLayer()
.source(budStopsData, {
parser: {
x: 'lng',
y: 'lat',
type: 'json',
},
})
.shape('busStop')
.size(13)
.style({
offsets: [20, 0],
});
scene.addLayer(busStops);
const busStopsName = new PointLayer()
.source(budStopsData, {
parser: {
x: 'lng',
y: 'lat',
type: 'json',
},
})
.shape('name', 'text')
.size(12)
.color('#000')
.style({
textAnchor: 'left',
textOffset: [80, 0],
stroke: '#fff',
strokeWidth: 1,
});
scene.addLayer(busStopsName);
});
});
});

View File

@ -0,0 +1,13 @@
{
"title": {
"zh": "高德地图插件",
"en": "other engine"
},
"demos": [
{
"filename": "busStop.js",
"title": "公交线路插件",
"screenshot":"https://gw.alipayobjects.com/mdn/rms_23a451/afts/img/A*1_W2SIR8swwAAAAAAAAAAAAAARQnAQ"
}
]
}

View File

@ -0,0 +1,4 @@
---
title: amapPlugin
order: 0
---

View File

@ -0,0 +1,4 @@
---
title: 高德插件
order: 0
---

View File

@ -246,6 +246,14 @@ module.exports = {
},
order: 5
},
{
slug: 'api/amapPlugin',
title: {
zh: '地图插件',
en: 'map plugin'
},
order: 5
},
],
examples: [
{
@ -288,6 +296,14 @@ module.exports = {
en: 'other engine'
}
},
{
slug: 'amapPlugin',
icon: 'map',
title: {
zh: '高德地图插件',
en: 'amapPlugin'
}
},
{
slug: 'earth',
icon: 'map',