高德地图
简介
L7 地理可视化侧重于地理数据的可视化表达,地图层需要依赖第三方地图,第三方地图通过 Scene 统一创建管理,只需要通过 Scene 传入地图配置项即可。
L7 在内部解决了不同地图底图之间差异,同时 L7 层面统一管理地图的操作方法。
申请token
高德地图 API 配置参数
- token 注册高德 API token
地图初始化化
const L7AMap = new GaodeMap({
pitch: 35.210526315789465,
style: 'dark',
center: [104.288144, 31.239692],
zoom: 4.4,
token: 'xxxx - token',
plugin: [], // 可以不设置
});
options
zoom 初始化缩放等级
number
地图初始显示级别 {number} Mapbox (0-24) 高德 (2-19)
center 地图中心
地图初始中心经纬度 {Lnglat}
pitch 地图倾角
地图初始俯仰角度 {number} default 0
bearing 地图偏转角
地图初始旋转角度(相对于正北方向顺时针偏转的度数) {number} default 0
minZoom 最小缩放等级
地图最小缩放等级 {number} default 0 Mapbox 0-24) 高德 (2-19)
maxZoom 最大缩放等级
地图最大缩放等级 {number} default 22 Mapbox(0-24) 高德 (2-19)
minPitch 最小倾角
地图最小俯仰角 {number} default 0
maxPitch 最大倾角
地图最大俯仰角 {number} default 60
rotateEnable 是否允许旋转
地图是否可旋转 {Boolean} default true
interactive 是否允许交互
boolean optional default: true
是否允许地图交互(包括鼠标、触摸、键盘等),设为 false 后地图变为静态展示状态
scrollZoom 是否允许滚轮缩放
boolean optional default: true
是否启用滚轮缩放交互
boxZoom 是否允许框选缩放
boolean optional default: true
是否启用框选缩放交互(按住 Shift 拖拽)
dragRotate 是否允许拖拽旋转
boolean optional default: true
是否启用拖拽旋转交互
dragPan 是否允许拖拽平移
boolean optional default: true
是否启用拖拽平移交互
keyboard 是否允许键盘控制
boolean optional default: true
是否启用键盘快捷键控制地图
doubleClickZoom 是否允许双击缩放
boolean optional default: true
是否启用双击缩放交互
touchZoomRotate 是否允许触摸缩放旋转
boolean optional default: true
是否启用双指捏合缩放旋转交互
renderWorldCopies 是否渲染世界副本
boolean optional default: true
超出 -180 和 180 经度范围时,是否在两侧重复渲染地图
maxBounds 地图最大边界范围
限制地图可视范围在指定的地理范围内
bearingSnap 北向吸附阈值
number optional default: 7
当用户旋转地图接近正北方向时,自动吸附到正北方向的角度阈值(度数)
地图事件
Scene 统一代理,见 Scene 文档
或者
scene.map 直接调用 map 实例方法
传入外部实例
为了支持已有地图项目快速接入 L7 的能力,L7 提供传入地图实例的方法。如果你是新项目推荐使用 Scene 初始化地图
⚠️ scene id 参数需要地图的 Map 实例是同个容器。
⚠️ 传入地图实例需要自行引入相关地图的 API
⚠️ viewMode 设置为 3D 模式(GaodeMap2.0 支持 2D 模式,可以不设置)
传入高德地图实例
const map = new AMap.Map('map', {
viewMode: '3D',
resizeEnable: true, // 是否监控地图容器尺寸变化
zoom: 11, // 初始化地图层级
center: [116.397428, 39.90923], // 初始化地图中心点
});
const scene = new Scene({
id: 'map',
map: new GaodeMap({
mapInstance: map,
}),
});
options
zoom 初始化缩放等级
number
地图初始显示级别 {number} Mapbox (0-24) 高德 (2-19)
center 地图中心
地图初始中心经纬度 {Lnglat}
pitch 地图倾角
地图初始俯仰角度 {number} default 0
bearing 地图偏转角
地图初始旋转角度(相对于正北方向顺时针偏转的度数) {number} default 0
minZoom 最小缩放等级
地图最小缩放等级 {number} default 0 Mapbox 0-24) 高德 (2-19)
maxZoom 最大缩放等级
地图最大缩放等级 {number} default 22 Mapbox(0-24) 高德 (2-19)
minPitch 最小倾角
地图最小俯仰角 {number} default 0
maxPitch 最大倾角
地图最大俯仰角 {number} default 60
rotateEnable 是否允许旋转
地图是否可旋转 {Boolean} default true
interactive 是否允许交互
boolean optional default: true
是否允许地图交互(包括鼠标、触摸、键盘等),设为 false 后地图变为静态展示状态
scrollZoom 是否允许滚轮缩放
boolean optional default: true
是否启用滚轮缩放交互
boxZoom 是否允许框选缩放
boolean optional default: true
是否启用框选缩放交互(按住 Shift 拖拽)
dragRotate 是否允许拖拽旋转
boolean optional default: true
是否启用拖拽旋转交互
dragPan 是否允许拖拽平移
boolean optional default: true
是否启用拖拽平移交互
keyboard 是否允许键盘控制
boolean optional default: true
是否启用键盘快捷键控制地图
doubleClickZoom 是否允许双击缩放
boolean optional default: true
是否启用双击缩放交互
touchZoomRotate 是否允许触摸缩放旋转
boolean optional default: true
是否启用双指捏合缩放旋转交互
renderWorldCopies 是否渲染世界副本
boolean optional default: true
超出 -180 和 180 经度范围时,是否在两侧重复渲染地图
maxBounds 地图最大边界范围
限制地图可视范围在指定的地理范围内
bearingSnap 北向吸附阈值
number optional default: 7
当用户旋转地图接近正北方向时,自动吸附到正北方向的角度阈值(度数)
地图事件
Scene 统一代理,见 Scene 文档
或者
scene.map 直接调用 map 实例方法
注册使用高德插件
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
});
});
});