diff --git a/docs/tutorial/map/amapplugin.en.md b/docs/tutorial/map/amapplugin.en.md new file mode 100644 index 0000000000..35fa542b5d --- /dev/null +++ b/docs/tutorial/map/amapplugin.en.md @@ -0,0 +1,5 @@ +--- +title: Amap Plugin +order: 3 +--- +`markdown:docs/tutorial/map/amapplugin.zh.md` diff --git a/docs/tutorial/map/amapplugin.zh.md b/docs/tutorial/map/amapplugin.zh.md new file mode 100644 index 0000000000..95900ec692 --- /dev/null +++ b/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) + diff --git a/examples/amapPlugin/bus/demo/meta.json b/examples/amapPlugin/bus/demo/meta.json index f11c564185..8daeddebcd 100644 --- a/examples/amapPlugin/bus/demo/meta.json +++ b/examples/amapPlugin/bus/demo/meta.json @@ -8,6 +8,16 @@ "filename": "busStop.js", "title": "公交线路插件", "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" } ] } diff --git a/examples/amapPlugin/bus/demo/satellite.js b/examples/amapPlugin/bus/demo/satellite.js new file mode 100644 index 0000000000..ef27b74905 --- /dev/null +++ b/examples/amapPlugin/bus/demo/satellite.js @@ -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()); +}); diff --git a/examples/amapPlugin/bus/demo/xyzTile.js b/examples/amapPlugin/bus/demo/xyzTile.js new file mode 100644 index 0000000000..16e474db62 --- /dev/null +++ b/examples/amapPlugin/bus/demo/xyzTile.js @@ -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); +});