mirror of https://gitee.com/antv-l7/antv-l7
docs: 完善官网高德插件文档demo
This commit is contained in:
parent
bc92f70873
commit
eadbd1397f
|
@ -0,0 +1,5 @@
|
||||||
|
---
|
||||||
|
title: Amap Plugin
|
||||||
|
order: 3
|
||||||
|
---
|
||||||
|
`markdown:docs/tutorial/map/amapplugin.zh.md`
|
|
@ -0,0 +1,71 @@
|
||||||
|
---
|
||||||
|
title: 使用高德插件
|
||||||
|
order: 3
|
||||||
|
---
|
||||||
|
`markdown:docs/common/style.md`
|
||||||
|
|
||||||
|
高德地图为我们提供和许多好用的插件,借助这些插件的能力我们可以覆盖更多的业务场景。
|
||||||
|
|
||||||
|
### AMap.LineSearch
|
||||||
|
道路查询
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const scene = new Scene({
|
||||||
|
id: 'map',
|
||||||
|
map: new Mapbox({
|
||||||
|
style: 'blank',
|
||||||
|
center: [ 103.83735604457024, 1.360253881403068 ],
|
||||||
|
pitch: 4.00000000000001,
|
||||||
|
zoom: 10.210275860702593,
|
||||||
|
rotation: 19.313180925794313
|
||||||
|
})
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
[在线案例](/zh/examples/amapPlugin/bus#busStop)
|
||||||
|
|
||||||
|
### AMap.ToolBar
|
||||||
|
地图工具栏
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
scene.on('loaded', () => {
|
||||||
|
window.AMap.plugin([ 'AMap.ToolBar', 'AMap.LineSearch' ], () => {
|
||||||
|
scene.map.addControl(new AMap.ToolBar());
|
||||||
|
|
||||||
|
const linesearch = new AMap.LineSearch({
|
||||||
|
pageIndex: 1, // 页码,默认值为1
|
||||||
|
pageSize: 1, // 单页显示结果条数,默认值为20,最大值为50
|
||||||
|
city: '北京', // 限定查询城市,可以是城市名(中文/中文全拼)、城市编码,默认值为『全国』
|
||||||
|
extensions: 'all' // 是否返回公交线路详细信息,默认值为『base』
|
||||||
|
});
|
||||||
|
...
|
||||||
|
```
|
||||||
|
|
||||||
|
[在线案例](/zh/examples/amapPlugin/bus#busStop)
|
||||||
|
|
||||||
|
### AMap.TileLayer
|
||||||
|
加载使用 xyz 地图瓦片
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
scene.on('loaded', () => {
|
||||||
|
var xyzTileLayer = new window.AMap.TileLayer({
|
||||||
|
getTileUrl:
|
||||||
|
'https://wprd0{1,2,3,4}.is.autonavi.com/appmaptile?x=[x]&y=[y]&z=[z]&size=1&scl=1&style=8<ype=11',
|
||||||
|
zIndex: 100,
|
||||||
|
});
|
||||||
|
scene.getMapService().map.add(xyzTileLayer);
|
||||||
|
});
|
||||||
|
```
|
||||||
|
[在线案例](/zh/examples/amapPlugin/bus#xyzTile)
|
||||||
|
|
||||||
|
### AMap.TileLayer.Satellite
|
||||||
|
加载使用默认的卫星瓦片
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
scene.on('loaded', () => {
|
||||||
|
scene.getMapService().map.add(new window.AMap.TileLayer.Satellite());
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
[在线案例](/zh/examples/amapPlugin/bus#satellite)
|
||||||
|
|
|
@ -8,6 +8,16 @@
|
||||||
"filename": "busStop.js",
|
"filename": "busStop.js",
|
||||||
"title": "公交线路插件",
|
"title": "公交线路插件",
|
||||||
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*9MHrRZTvaiAAAAAAAAAAAAAAARQnAQ"
|
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*9MHrRZTvaiAAAAAAAAAAAAAAARQnAQ"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename": "xyzTile.js",
|
||||||
|
"title": "xyz瓦片地图",
|
||||||
|
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*ydN_QpzVraQAAAAAAAAAAAAAARQnAQ"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"filename": "satellite.js",
|
||||||
|
"title": "卫星地图",
|
||||||
|
"screenshot":"https://gw.alipayobjects.com/mdn/rms_816329/afts/img/A*bYbdT6N6IGwAAAAAAAAAAAAAARQnAQ"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
@ -0,0 +1,16 @@
|
||||||
|
import { Scene } from '@antv/l7';
|
||||||
|
import { GaodeMap } from '@antv/l7-maps';
|
||||||
|
|
||||||
|
const scene = new Scene({
|
||||||
|
id: 'map',
|
||||||
|
map: new GaodeMap({
|
||||||
|
center: [105, 30],
|
||||||
|
pitch: 0,
|
||||||
|
zoom: 2,
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
scene.on('loaded', () => {
|
||||||
|
scene.getMapService().map.add(new window.AMap.TileLayer.Satellite());
|
||||||
|
});
|
|
@ -0,0 +1,20 @@
|
||||||
|
import { Scene } from '@antv/l7';
|
||||||
|
import { GaodeMap } from '@antv/l7-maps';
|
||||||
|
|
||||||
|
const scene = new Scene({
|
||||||
|
id: 'map',
|
||||||
|
map: new GaodeMap({
|
||||||
|
center: [105, 30],
|
||||||
|
pitch: 0,
|
||||||
|
zoom: 2,
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
scene.on('loaded', () => {
|
||||||
|
var xyzTileLayer = new window.AMap.TileLayer({
|
||||||
|
getTileUrl:
|
||||||
|
'https://wprd0{1,2,3,4}.is.autonavi.com/appmaptile?x=[x]&y=[y]&z=[z]&size=1&scl=1&style=8<ype=11',
|
||||||
|
zIndex: 100,
|
||||||
|
});
|
||||||
|
scene.getMapService().map.add(xyzTileLayer);
|
||||||
|
});
|
Loading…
Reference in New Issue