场景 Scene

阅读时间约 15 分钟

简介

// 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

string | HTMLElement 必选

需传入 dom 容器或者容器 id

logoPosition

bottomleft 可选

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

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

logoVisible logo 是否可见

bottomleft 可选 default: true

是否显示 L7 的 Logo {boolean} true

antialias 是否开启抗锯齿

boolean 可选 default: true

是否开始前抗锯齿

stencil 是否开启裁减

boolean 可选 default: false

是否开始开启裁剪

🌟 从 v2.7.2 版本开始支持

preserveDrawingBuffer

boolean 可选 default: false

是否保留缓冲区数据 boolean false

Map 配置项

zoom 初始化缩放等级

number

地图初始显示级别 {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