GMap SDK

主题

图层类型 Layer ​

标准版提供 19+ 种图层类型，覆盖栅格瓦片、矢量瓦片、要素、图形、热力图、地形、3D 模型等所有场景。所有图层继承自核心 Layer 基类。

Layer（基类） ​

所有图层的公共基类，来自 @gmap/core。

属性 ​

属性类型默认值说明
idstring自动生成图层唯一标识
typestring—图层类型（只读）
sourceSource—关联的数据源
visiblebooleantrue是否可见
opacitynumber1不透明度（0-1）
zIndexnumber0图层顺序

基础选项 ​

ts
interface BaseLayerOptions {
  id?: string;
  source?: Source;
  visible?: boolean;
  opacity?: number;
  zIndex?: number;
  minZoom?: number;
  maxZoom?: number;
  extent?: Extent;
}

方法 ​

方法参数返回值说明
setVisible(v)v: booleanthis设置可见性
setOpacity(v)v: numberthis设置不透明度
setZIndex(v)v: numberthis设置层级
show()—this显示图层
hide()—this隐藏图层
toggle()—this切换可见性
addTo(map)map: MapModelthis添加到地图
remove()—this从地图移除
toSpec()—object导出图层规格

TileLayer / RasterTileLayer ​

栅格瓦片图层，显示标准 XYZ/TMS 瓦片。

构造函数 ​

ts
class TileLayer extends Layer {
  readonly type = 'raster';

  constructor(options?: BaseLayerOptions & {
    url?: string;
    subdomains?: string[];
    tileSize?: number;
    minZoom?: number;
    maxZoom?: number;
  });
}

// TileLayer 与 RasterTileLayer 是同一类型
const RasterTileLayer = TileLayer;

属性 ​

属性类型默认值说明
urlstring—瓦片 URL 模板
subdomainsstring[][]子域名列表
tileSizenumber256瓦片尺寸（像素）

示例 ​

ts
import { TileLayer, RasterTileSource } from '@gmap/standard';

const source = new RasterTileSource({
  url: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
  minZoom: 0,
  maxZoom: 18,
});

const layer = new TileLayer({
  id: 'osm-base',
  source,
  opacity: 0.8,
});

VectorTileLayer ​

矢量瓦片图层。

构造函数 ​

ts
class VectorTileLayer extends Layer {
  readonly type = 'vector-tile';

  constructor(options?: BaseLayerOptions & {
    sourceLayer?: string;
    style?: unknown;
    filter?: unknown;
  });
}

属性 ​

属性类型说明
sourceLayerstring | undefined矢量瓦片中的图层名
styleunknown样式配置
filterunknown过滤表达式

方法 ​

方法参数返回值说明
setFilter(expr)expr: anythis设置过滤表达式

示例 ​

ts
import { VectorTileLayer, VectorTileSource } from '@gmap/standard';

const source = new VectorTileSource({
  url: 'https://demotiles.maplibre.org/tiles/{z}/{x}/{y}.pbf',
});

const layer = new VectorTileLayer({
  id: 'mvt-roads',
  source,
  sourceLayer: 'roads',
  filter: ['==', 'class', 'primary'],
});

FeatureLayer ​

要素图层，支持渲染器和属性查询。

构造函数 ​

ts
class FeatureLayer extends Layer {
  readonly type = 'feature';

  constructor(options?: BaseLayerOptions & {
    renderer?: Renderer;
    definitionExpression?: string;
    labeling?: unknown;
  });
}

属性 ​

属性类型说明
rendererRenderer | undefined渲染器
definitionExpressionstring | undefined定义查询表达式（SQL-like）

方法 ​

方法参数返回值说明
setRenderer(renderer)renderer: Rendererthis设置渲染器
setDefinitionExpression(expr)expr: stringthis设置定义查询
queryFeatures(options?)options?: objectPromise<FeatureCollection>查询要素

示例 ​

ts
import { FeatureLayer, GeoJsonSource, SimpleRenderer, FillSymbol } from '@gmap/standard';

const source = new GeoJsonSource({
  id: 'districts',
  data: districtsGeoJSON,
});

const layer = new FeatureLayer({
  id: 'district-layer',
  source,
  renderer: new SimpleRenderer({
    symbol: new FillSymbol({ color: '#3388ff', opacity: 0.5 }),
  }),
  definitionExpression: "status = 'active'",
});

const results = await layer.queryFeatures({ where: 'population > 100000' });

GraphicsLayer ​

图形图层，用于动态添加/移除图形要素。

构造函数 ​

ts
class GraphicsLayer extends Layer {
  readonly type = 'graphics';

  constructor(options?: BaseLayerOptions);
}

方法 ​

方法参数返回值说明
add(feature)feature: unknownthis添加图形
addMany(features)features: unknown[]this批量添加
removeGraphic(featureOrId)featureOrId: unknownthis移除图形
removeAll()—this移除所有图形
getById(id)id: stringunknown | undefined按 ID 查找
forEach(fn)fn: (feature: unknown) => voidvoid遍历所有图形
toGeoJSON()—object导出为 GeoJSON FeatureCollection

示例 ​

ts
import { GraphicsLayer, Point, MarkerSymbol } from '@gmap/standard';

const layer = new GraphicsLayer({ id: 'graphics' });

layer.add(new Point([116.397, 39.908]));
layer.addMany([
  new Point([116.4, 39.91]),
  new Point([116.42, 39.90]),
]);

console.log(layer.toGeoJSON());
layer.removeAll();

ImageLayer ​

图片图层，在指定范围内显示图片。

构造函数 ​

ts
class ImageLayer extends Layer {
  readonly type = 'image';

  constructor(options?: BaseLayerOptions & {
    url?: string;
  });
}

示例 ​

ts
import { ImageLayer } from '@gmap/standard';

const layer = new ImageLayer({
  id: 'overlay-image',
  url: '/images/aerial.jpg',
  extent: [116.0, 39.0, 117.0, 40.0],
});

HeatmapLayer ​

热力图图层。

构造函数 ​

ts
class HeatmapLayer extends Layer {
  readonly type = 'heatmap';

  constructor(options?: BaseLayerOptions & {
    radius?: number;
    gradient?: string[];
    intensity?: number;
    weightField?: string;
  });
}

属性 ​

属性类型默认值说明
radiusnumber25热点半径（像素）
gradientstring[]—颜色渐变
intensitynumber1强度系数
weightFieldstring | undefined—权重字段

示例 ​

ts
import { HeatmapLayer, GeoJsonSource } from '@gmap/standard';

const source = new GeoJsonSource({ id: 'heat-data', data: pointsGeoJSON });

const layer = new HeatmapLayer({
  id: 'heatmap',
  source,
  radius: 30,
  gradient: ['#0000ff', '#00ffff', '#00ff00', '#ffff00', '#ff0000'],
  intensity: 2,
  weightField: 'count',
  opacity: 0.8,
});

TerrainLayer ​

地形图层。

构造函数 ​

ts
class TerrainLayer extends Layer {
  readonly type = 'terrain';

  constructor(options?: BaseLayerOptions & {
    exaggeration?: number;
  });
}

属性 ​

属性类型默认值说明
exaggerationnumber1地形夸张系数

示例 ​

ts
import { TerrainLayer, TerrainSource } from '@gmap/standard';

const source = new TerrainSource({
  url: 'https://terrain.example.com/{z}/{x}/{y}.terrain',
  type: 'quantized-mesh',
});

const layer = new TerrainLayer({
  id: 'terrain',
  source,
  exaggeration: 1.5,
});

Tileset3DLayer ​

3D Tiles 图层。

构造函数 ​

ts
class Tileset3DLayer extends Layer {
  readonly type = '3dtiles';

  constructor(options?: BaseLayerOptions & {
    maximumScreenSpaceError?: number;
  });
}

属性 ​

属性类型默认值说明
maximumScreenSpaceErrornumber16最大屏幕空间误差

示例 ​

ts
import { Tileset3DLayer, Tileset3DSource } from '@gmap/standard';

const source = new Tileset3DSource({
  url: 'https://3dtiles.example.com/tileset.json',
  maximumScreenSpaceError: 8,
});

const layer = new Tileset3DLayer({
  id: 'city-3d',
  source,
  maximumScreenSpaceError: 12,
});

VideoLayer ​

视频图层，在地图上播放视频。

构造函数 ​

ts
class VideoLayer extends Layer {
  readonly type = 'video';

  constructor(options?: BaseLayerOptions & {
    url?: string;
    loop?: boolean;
    autoplay?: boolean;
  });
}

方法 ​

方法参数返回值说明
play()—void播放
pause()—void暂停
stop()—void停止
seek(time)time: numbervoid跳转到指定时间（秒）

示例 ​

ts
import { VideoLayer } from '@gmap/standard';

const layer = new VideoLayer({
  id: 'weather-video',
  url: '/videos/weather.mp4',
  loop: true,
  autoplay: true,
  extent: [116, 39, 117, 40],
});

layer.play();
layer.seek(30);
layer.pause();

CustomLayer ​

自定义图层，通过渲染函数完全控制绘制。

构造函数 ​

ts
class CustomLayer extends Layer {
  readonly type = 'custom';

  constructor(options?: BaseLayerOptions & {
    renderFunction?: (context: any) => void;
  });
}

方法 ​

方法参数返回值说明
setRenderFunction(fn)fn: (context: any) => voidthis设置渲染函数

示例 ​

ts
import { CustomLayer } from '@gmap/standard';

const layer = new CustomLayer({
  id: 'custom-layer',
  renderFunction: (ctx) => {
    // 自定义绘制逻辑
    console.log('rendering custom layer', ctx);
  },
});

layer.setRenderFunction((ctx) => {
  // 更新渲染逻辑
});

PointCloudLayer ​

点云图层。

构造函数 ​

ts
class PointCloudLayer extends Layer {
  readonly type = 'pointcloud';

  constructor(options?: BaseLayerOptions & {
    pointSize?: number;
    attenuation?: boolean;
  });
}

属性 ​

属性类型默认值说明
pointSizenumber1点大小（像素）
attenuationbooleanfalse是否衰减

示例 ​

ts
import { PointCloudLayer } from '@gmap/standard';

const layer = new PointCloudLayer({
  id: 'pointcloud',
  url: 'https://example.com/pointcloud.las',
  pointSize: 2,
  attenuation: true,
});

VectorImageLayer ​

矢量图片图层。

构造函数 ​

ts
class VectorImageLayer extends Layer {
  readonly type = 'vector-image';

  constructor(options?: BaseLayerOptions & {
    url?: string;
    opacity?: number;
  });
}

示例 ​

ts
import { VectorImageLayer } from '@gmap/standard';

const layer = new VectorImageLayer({
  id: 'vector-image',
  url: 'https://example.com/vectortiles/{z}/{x}/{y}.pbf',
  opacity: 0.7,
});

ClusterLayer ​

聚合图层。

构造函数 ​

ts
class ClusterLayer extends Layer {
  readonly type = 'cluster';

  constructor(options?: BaseLayerOptions & {
    clusterRadius?: number;
    maxClusterZoom?: number;
    clusterSymbol?: Symbol;
  });
}

属性 ​

属性类型默认值说明
clusterRadiusnumber50聚合半径（像素）
maxClusterZoomnumber—最大聚合缩放级别

示例 ​

ts
import { ClusterLayer, GeoJsonSource, MarkerSymbol } from '@gmap/standard';

const source = new GeoJsonSource({ id: 'points', data: pointsGeoJSON });

const layer = new ClusterLayer({
  id: 'clusters',
  source,
  clusterRadius: 80,
  maxClusterZoom: 14,
  clusterSymbol: new MarkerSymbol({ color: '#e74c3c', size: 20 }),
});

DynamicLayer ​

动态图层，定期刷新数据。

构造函数 ​

ts
class DynamicLayer extends Layer {
  readonly type = 'dynamic';

  constructor(options?: BaseLayerOptions & {
    url?: string;
    interval?: number;
  });
}

属性 ​

属性类型说明
urlstring | undefined数据 URL
intervalnumber | undefined刷新间隔（毫秒）

示例 ​

ts
import { DynamicLayer } from '@gmap/standard';

const layer = new DynamicLayer({
  id: 'traffic',
  url: 'https://api.example.com/traffic/latest',
  interval: 30000,
});

GraticuleLayer ​

经纬网格图层。

构造函数 ​

ts
class GraticuleLayer extends Layer {
  readonly type = 'graticule';

  constructor(options?: BaseLayerOptions & {
    interval?: number;
    strokeColor?: ColorLike;
  });
}

属性 ​

属性类型默认值说明
intervalnumber10网格间隔（度）
strokeColorColorLike'#ccc'网格线颜色

示例 ​

ts
import { GraticuleLayer } from '@gmap/standard';

const layer = new GraticuleLayer({
  id: 'graticule',
  interval: 5,
  strokeColor: 'rgba(0,0,0,0.2)',
});

TileDebugLayer ​

瓦片调试图层，显示瓦片边界和坐标。

构造函数 ​

ts
class TileDebugLayer extends Layer {
  readonly type = 'tiledebug';

  constructor(options?: BaseLayerOptions & {
    tileSize?: number;
    showCoords?: boolean;
  });
}

属性 ​

属性类型默认值说明
tileSizenumber256瓦片尺寸
showCoordsbooleanfalse是否显示坐标

示例 ​

ts
import { TileDebugLayer } from '@gmap/standard';

const layer = new TileDebugLayer({
  id: 'debug-tiles',
  tileSize: 512,
  showCoords: true,
});

TrafficLayer ​

交通图层。

构造函数 ​

ts
class TrafficLayer extends Layer {
  readonly type = 'traffic';

  constructor(options?: BaseLayerOptions & {
    provider?: 'amap' | 'bmap' | 'tianditu';
    getTargetPosition?: () => Coordinate;
    getWidth?: (level: number) => number;
  });
}

属性 ​

属性类型默认值说明
providerstring—数据提供方

示例 ​

ts
import { TrafficLayer } from '@gmap/standard';

const layer = new TrafficLayer({
  id: 'traffic',
  provider: 'amap',
});

BuildingLayer ​

建筑图层。

构造函数 ​

ts
class BuildingLayer extends Layer {
  readonly type = 'building';

  constructor(options?: BaseLayerOptions & {
    color?: ColorLike;
    height?: number;
  });
}

属性 ​

属性类型说明
colorColorLike | undefined建筑颜色
heightnumber | undefined建筑高度

Deck.gl 图层 ​

以下图层来自 Deck.gl 集成，用于高级可视化。

ArcLayer ​

ts
class ArcLayer extends Layer {
  readonly type = 'arc';
  constructor(options?: BaseLayerOptions & {
    getSourcePosition?: () => Coordinate;
    getTargetPosition?: () => Coordinate;
    getSourceColor?: ColorLike;
    getTargetColor?: ColorLike;
    getWidth?: number;
    elevationScale?: number;
  });
}

HexagonLayer ​

ts
class HexagonLayer extends Layer {
  readonly type = 'hexagon';
  constructor(options?: BaseLayerOptions & {
    radius?: number;
    elevationScale?: number;
    elevationRange?: [number, number];
  });
}

GridLayer ​

ts
class GridLayer extends Layer {
  readonly type = 'grid';
  constructor(options?: BaseLayerOptions & {
    cellSize?: number;
    elevationScale?: number;
  });
}

TripsLayer ​

ts
class TripsLayer extends Layer {
  readonly type = 'trips';
  constructor(options?: BaseLayerOptions & {
    getPath?: (d: unknown) => Coordinate[];
    trailLength?: number;
    currentTime?: number;
  });
}

GreatCircleLayer ​

ts
class GreatCircleLayer extends Layer {
  readonly type = 'greatcircle';
  constructor(options?: BaseLayerOptions & {
    getSourcePosition?: () => Coordinate;
    getTargetPosition?: () => Coordinate;
    getSourceColor?: ColorLike;
    getTargetColor?: ColorLike;
  });
}

H3HexagonLayer ​

ts
class H3HexagonLayer extends Layer {
  readonly type = 'h3hexagon';
  constructor(options?: BaseLayerOptions & {
    hexagonColumn?: boolean;
    elevationScale?: number;
  });
}

PanoramaLayer ​

ts
class PanoramaLayer extends Layer {
  readonly type = 'panorama';
  constructor(options?: BaseLayerOptions & {
    provider?: string;
    position?: Coordinate;
    radius?: number;
  });
}

四川省交通运输综合地理服务平台 地图开发框架

四川省公路勘察设计院研究院有限公司 版权所有