diff --git a/docs/api/amapPlugin/plugin.en.md b/docs/api/amapPlugin/plugin.en.md new file mode 100644 index 0000000000..098ab8ae64 --- /dev/null +++ b/docs/api/amapPlugin/plugin.en.md @@ -0,0 +1,6 @@ +--- +title: Amap Plugin +order: 3 +--- + +`markdown:docs/api/amapPlugin/plugin.zh.md` diff --git a/docs/api/amapPlugin/plugin.zh.md b/docs/api/amapPlugin/plugin.zh.md new file mode 100644 index 0000000000..a3ca458dff --- /dev/null +++ b/docs/api/amapPlugin/plugin.zh.md @@ -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) diff --git a/examples/amapPlugin/bus/demo/busStop.js b/examples/amapPlugin/bus/demo/busStop.js new file mode 100644 index 0000000000..df65a08e39 --- /dev/null +++ b/examples/amapPlugin/bus/demo/busStop.js @@ -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); + }); + }); +}); \ No newline at end of file diff --git a/examples/amapPlugin/bus/demo/meta.json b/examples/amapPlugin/bus/demo/meta.json new file mode 100644 index 0000000000..47b09f7835 --- /dev/null +++ b/examples/amapPlugin/bus/demo/meta.json @@ -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" + } + ] +} diff --git a/examples/amapPlugin/bus/index.en.md b/examples/amapPlugin/bus/index.en.md new file mode 100644 index 0000000000..a01d1eda7c --- /dev/null +++ b/examples/amapPlugin/bus/index.en.md @@ -0,0 +1,4 @@ +--- +title: amapPlugin +order: 0 +--- diff --git a/examples/amapPlugin/bus/index.zh.md b/examples/amapPlugin/bus/index.zh.md new file mode 100644 index 0000000000..68d74fd306 --- /dev/null +++ b/examples/amapPlugin/bus/index.zh.md @@ -0,0 +1,4 @@ +--- +title: 高德插件 +order: 0 +--- diff --git a/gatsby-config.js b/gatsby-config.js index 36baab2a7d..16b9f42682 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -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',