简介

// Module 引用
import { Scene } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
const scene = new Scene({
  id: 'map',
  map: new GaodeMap({
    style: 'dark',
    center: [110.770672, 34.159869],
    pitch: 45,
  }),
});

// CDN 使用方法
const scene = new L7.Scene({
  id: 'map',
  map: new L7.GaodeMap({
    style: 'dark',
    center: [110.770672, 34.159869],
    pitch: 45,
  }),
});

Map

L7 地理可视化侧重于地理数据的可视化表达，地图层需要依赖第三方地图，第三方地图通过 Scene 统一创建，创建管理 只需要通过 Scene 传入地图配置项即可。

目前 L7 支持两种地图底图

• 高德地图 国内业务场景 合规中国地图
• MapBox 国际业务，或者内网离线部署场景

map

可以通过 scene map 属性获取 map 实例

const map = scene.map;

为了统一不同底图之前的接口差异 L7 在 scene 层对 map 的方法做了统一，因此一些地图的操作方法可以通过 scene 调用这样，切换不同底图时保证表现一致。

示例代码

const scene = new L7.Scene({
  id: 'map',
  map: new L7.GaodeMap({
    style: 'dark',
    center: [110.770672, 34.159869],
    pitch: 45,
  }),
});

构造函数

Scene

配置项

地图配置项

id

需传入 dom 容器或者容器 id

logoPosition

L7 Logo 的显示位置 默认左下角

• bottomright
• topright
• bottomleft
• topleft
• topcenter
• bottomcenter
• leftcenter
• rightcenter

logoVisible logo 是否可见

是否显示 L7 的 Logo {boolean} true

antialias 是否开启抗锯齿

是否开始前抗锯齿

stencil 是否开启裁减

是否开始开启裁剪

🌟 从 v2.7.2 版本开始支持

preserveDrawingBuffer

是否保留缓冲区数据 boolean false

Map 配置项

zoom 初始化缩放等级

地图初始显示级别 {number} Mapbox （0-24） 高德 （2-19）

center 地图中心

地图初始中心经纬度 {Lnglat}

pitch 地图倾角

地图初始俯仰角度 {number}  default 0

style 地图图样式

简化地图样式设置，L7 内置了三种主题默认样式 高德，mapbox 都可以使用

• dark
• light
• normal
• blank 无底图

除了内置的样式，你也可以传入自定义的其他属性。

比如高德地图

⚠️ 高德地图样式 增加 isPublic=true 参数

{
  style: 'amap://styles/2a09079c3daac9420ee53b67307a8006?isPublic=true'; // 设置方法和高德地图一致
}

minZoom 最小缩放等级

地图最小缩放等级 {number}  default 0 Mapbox 0-24） 高德 （2-19）

maxZoom 最大缩放等级

地图最大缩放等级 {number}  default 22 Mapbox（0-24） 高德 （2-19）

rotateEnable 是否允许旋转

地图是否可旋转 {Boolean} default true

实验参数

参数可能会废弃

offsetCoordinate

{ boolean } default true

高德地图适用,是否关闭偏移坐标系

Layer 方法

addLayer(layer) 增加图层对象

增加图层对象

参数 :

• layer {ILayer} 图层对象

scene.addLayer(layer);

getLayer(id) 获取对应的图层对象

获取对应的图层对象

参数 :

• id {string}

scene.getLayer('layerID');

getLayers() 获取所有的地图图层

获取所有的地图图层

scene.getLayers();

getLayerByName(name) 根据图层名称获取图层

根据图层名称获取图层

参数

• name {string} layer 初始化可配置图层 name