内置图层

SDK 提供了丰富的内置图层，包括基础图层、空域图层、航路图层等，可以直接使用而无需手动配置。

内置图层总览

SDK 提供了以下内置图层，可以直接通过 addBuiltInLayer() 方法添加使用：

图层ID	图层名称	说明
`background`	背景图	地图背景底图
`water` / `lake`	水域湖泊	水域湖泊图层
`landLayer`	陆地图层	陆地图层
`countryline`	国家边界	国家边界线图层
`countryname`	国家名称	国家名称标注图层
`airspace`	空域	空域图层，包含空域线和标签
`controlled`	管制空域	管制空域图层
`restricted`	限制空域	限制空域图层
`amm`	AMM图层	移动机场图图层
`airline`	航路	航路图层，包含航线、标签和航路点
`airport`	机场	机场图层
`vor`	VOR导航台	VOR导航台图层
`ndb`	NDB导航台	NDB导航台图层

内置图层详细说明

以下表格列出了每个内置图层组包含的真正图层ID及其说明，可以用于时间监听：

内置图层ID	实际图层ID	图层说明
`background`	`background`	地图背景底图图层
`water` / `lake`	`lake`	水域湖泊图层
`landLayer`	`landLayer`	陆地图层
`countryline`	`countryline`	国家边界线
	`stateline`	省/州边界线
`countryname`	`countrylabel`	国家名称标注
	`countrypoint`	国家名称点标记
	`provincelabel`	省份名称标注
	`statelabel`	首都名称标注
`airspace`	`airspaceLayer`	空域线
	`airspace_label_side_layer`	空域线侧边文字
	`airspaceLayer_line`	空域线间隔线
	`airspace_label_center_layer`	空域中心名称标注
`controlled`	`controlledLayer`	管控区区域填充
	`controlled_line_label`	管控区区域文字
`restricted`	`restrictedLayer`	限制区区域填充
	`restricted_line_label`	限制区区域文字
`airline`	`airline`	航线
	`airline_label`	航线名称标注
	`airline_point`	航路点
`airport`	`airport`	机场图标和文字
`vor`	`vor_icon`	VOR导航台图标
`ndb`	`ndb_icon`	NDB导航台图标
`amm`	`_amm_airport_area_region`	机场范围边界
	`_amm_apron_element_region`	停机坪要素填充
	`_amm_apron_element_region_text`	停机坪要素标注
	`_amm_runway_element_region`	跑道元素填充
	`_amm_runway_element_region_text`	跑道元素文本
	`_amm_runway_displaced_area_region`	跑道入口内移区域
	`_amm_stopway_region`	停止道
	`_amm_painted_centerline_polyline`	跑道中心线
	`_amm_runway_mark_region`	跑道标志填充
	`_amm_taxiway_element_region`	滑行道要素填充
	`_amm_taxiway_center_line_polyline`	滑行道中心线
	`_amm_taxiway_center_line_polyline_text`	滑行道中心线文字
	`_amm_taxiway_guidance_line_polyline`	滑行道引导线
	`_amm_taxiway_intersection_marking_polyline`	滑行道交叉标志
	`_amm_taxiway_holding_position_polyline`	滑行道等待位置
	`_amm_stand_guidance_line_polyline`	停机坪引导线
	`_amm_ainstrument_landing_system_region_line`	仪表着陆系统
	`_amm_painted_delayline_polyline`	跑道延迟线
	`_amm_prohibition_mark_region_line`	禁行标记
	`_amm_hotspot_region_line`	冲突区域线
	`_amm_hotspot_region_area`	冲突区域填充
	`_amm_hotspot_region_line_text`	冲突区文字
	`_amm_vertical_polygonal_structure_region`	垂直面结构填充
	`_amm_vertical_polygonal_structure_region_text`	垂直面结构标注
	`_amm_parking_stand_location_point`	停机位位置点
	`_amm_runway_threshold_point`	跑道入口点

获取内置图层列表

获取所有内置图层

javascript

// 获取所有内置图层信息
const layers = sdk.getBuiltInLayers();
console.log("内置图层:", layers);

// 或者使用函数
const layers = navMap.getBuiltInLayers();

查看图层信息

javascript

const layers = sdk.getBuiltInLayers();

layers.forEach(layer => {
  console.log(`图层ID: ${layer.id}`);
  console.log(`图层名称: ${layer.name}`);
  console.log(`图层描述: ${layer.description}`);
  console.log(`图层类别: ${layer.category}`);
  console.log(`默认可见: ${layer.defaultVisible}`);
});

添加内置图层

添加单个图层

javascript

// 添加机场图层
await sdk.addBuiltInLayer("airport");

// 添加空域图层
await sdk.addBuiltInLayer("airspace");

// 添加航路图层
await sdk.addBuiltInLayer("airline");

批量添加图层

javascript

// 添加多个图层
await sdk.addBuiltInLayer([
  "airport",
  "airspace",
  "airline",
  "vor",
  "ndb",
]);

指定图层顺序

javascript

// 添加图层并指定 z-index
await sdk.addBuiltInLayer("airport", "10");
await sdk.addBuiltInLayer("airline", "20");

移除内置图层

移除单个图层

javascript

// 移除机场图层
sdk.removeBuiltInLayer("airport");

批量移除图层

javascript

// 移除多个图层
["airport", "airspace", "airline"].forEach(layerId => {
  sdk.removeBuiltInLayer(layerId);
});

切换图层显示

显示/隐藏图层

javascript

// 切换图层显示状态
sdk.toggleBuiltInLayer("airport");

// 或者手动控制
if (isVisible) {
  await sdk.addBuiltInLayer("airport");
} else {
  sdk.removeBuiltInLayer("airport");
}

内置图层列表

基础图层

background（背景图）

javascript

await sdk.addBuiltInLayer("background");

类型: background
描述: 地图背景底图
默认可见: 是

water / lake（水域湖泊）

javascript

await sdk.addBuiltInLayer("water");
// 或
await sdk.addBuiltInLayer("lake");

类型: fill
描述: 水域湖泊图层
默认可见: 是

landLayer（陆地图层）

javascript

await sdk.addBuiltInLayer("landLayer");

类型: fill
描述: 陆地图层
默认可见: 是

空域图层

airspace（空域）

javascript

await sdk.addBuiltInLayer("airspace");

类型: line + symbol
描述: 空域图层，包含空域线和标签
默认可见: 否
包含图层:
- airspaceLayer（空域线）
- airspace_label_side_layer（侧边标签）
- airspaceLayer_line（空域线）
- airspace_label_center_layer（中心标签）

controlled（管制空域）

javascript

await sdk.addBuiltInLayer("controlled");

类型: fill + line + symbol
描述: 管制空域图层
默认可见: 否
包含图层:
- controlledLayer（管制区填充）
- controlled_line_label（管制区线标签）

restricted（限制空域）

javascript

await sdk.addBuiltInLayer("restricted");

类型: fill + line + symbol
描述: 限制空域图层
默认可见: 否
包含图层:
- restrictedLayer（限制区填充）
- restricted_line_label（限制区线标签）

amm（AMM图层）

javascript

await sdk.addBuiltInLayer("amm");

类型: fill + line + symbol
描述: AMM（Aeronautical Information Publication）图层
默认可见: 否
动态图层: 根据期数动态生成

航路图层

airline（航路）

javascript

await sdk.addBuiltInLayer("airline");

类型: line + symbol + circle
描述: 航路图层，包含航路线、标签和航路点
默认可见: 否
包含图层:
- airline（航路线）
- airline_label（航路标签）
- airline_point（航路点）

导航设施图层

airport（机场）

javascript

await sdk.addBuiltInLayer("airport");

类型: symbol
描述: 机场图层
默认可见: 否

vor（VOR导航台）

javascript

await sdk.addBuiltInLayer("vor");

类型: symbol
描述: VOR（VHF Omnidirectional Range）导航台图层
默认可见: 否
包含图层: vor_icon

ndb（NDB导航台）

javascript

await sdk.addBuiltInLayer("ndb");

类型: symbol
描述: NDB（Non-Directional Beacon）导航台图层
默认可见: 否
包含图层: ndb_icon

图层管理示例

图层控制面板

javascript

let sdk;

async function initMap() {
  sdk = new navMap.MapSDK({
    container: "map",
    center: [116.39, 39.9],
    zoom: 10,
  });

  sdk.on("loadComplete", () => {
    setupLayerControl();
  });
}

function setupLayerControl() {
  const layers = sdk.getBuiltInLayers();
  const panel = document.getElementById("layer-panel");

  layers.forEach(layer => {
    // 创建复选框
    const label = document.createElement("label");
    const checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.checked = layer.defaultVisible;
    checkbox.value = layer.id;

    checkbox.addEventListener("change", async () => {
      if (checkbox.checked) {
        await sdk.addBuiltInLayer(layer.id);
      } else {
        sdk.removeBuiltInLayer(layer.id);
      }
    });

    label.appendChild(checkbox);
    label.appendChild(document.createTextNode(layer.name));
    panel.appendChild(label);
  });
}

initMap();

按类别分组显示

javascript

function setupLayerControlByCategory() {
  const layers = sdk.getBuiltInLayers();
  const categories = {};

  // 按类别分组
  layers.forEach(layer => {
    if (!categories[layer.category]) {
      categories[layer.category] = [];
    }
    categories[layer.category].push(layer);
  });

  // 创建分类面板
  Object.entries(categories).forEach(([category, categoryLayers]) => {
    const section = document.createElement("div");
    section.className = "layer-category";
    section.innerHTML = `<h3>${category}</h3>`;

    categoryLayers.forEach(layer => {
      const label = document.createElement("label");
      const checkbox = document.createElement("input");
      checkbox.type = "checkbox";
      checkbox.value = layer.id;

      checkbox.addEventListener("change", async () => {
        if (checkbox.checked) {
          await sdk.addBuiltInLayer(layer.id);
        } else {
          sdk.removeBuiltInLayer(layer.id);
        }
      });

      label.appendChild(checkbox);
      label.appendChild(document.createTextNode(layer.name));
      section.appendChild(label);
    });

    document.getElementById("layer-panel").appendChild(section);
  });
}

图层样式自定义

更新图层样式

javascript

// 更新内置图层样式
sdk.updateLayerStyle("airport", {
  paint: {
    "icon-color": "#ff0000",
  },
});

// 或者使用 setStyle
sdk.setStyle({
  "airport": {
    paint: {
      "icon-color": "#ff0000",
    },
  },
});

批量更新样式

javascript

// 批量更新多个图层样式
sdk.setStyle({
  "airport": {
    paint: {
      "icon-color": "#ff0000",
    },
  },
  "vor": {
    paint: {
      "icon-color": "#00ff00",
    },
  },
  "ndb": {
    paint: {
      "icon-color": "#0000ff",
    },
  },
});

图层可见性控制

显示/隐藏图层

javascript

// 显示图层
sdk.showLayers(["airport", "airline"]);

// 隐藏图层
sdk.hideLayers(["airport", "airline"]);

根据缩放级别控制

javascript

sdk.on("zoom", () => {
  const zoom = sdk.getZoom();

  if (zoom < 8) {
    // 低缩放级别：只显示基础图层
    sdk.hideLayers(["airport", "airline", "vor", "ndb"]);
  } else if (zoom < 12) {
    // 中等缩放级别：显示机场和航路
    sdk.showLayers(["airport", "airline"]);
    sdk.hideLayers(["vor", "ndb"]);
  } else {
    // 高缩放级别：显示所有图层
    sdk.showLayers(["airport", "airline", "vor", "ndb"]);
  }
});

期数管理

某些内置图层（如 AMM）依赖于期数（Period）配置：

javascript

// 设置期数
sdk.setPeriod("202501");

// 获取当前期数
const period = sdk.getPeriod();
console.log("当前期数:", period);

注意事项

异步操作: addBuiltInLayer 是异步方法，需要使用 await 或 .then()
图层顺序: 使用 zindex 参数控制图层叠加顺序
期数依赖: AMM 等图层需要先设置期数
性能考虑: 大量图层可能影响性能，考虑使用 LOD 配置
样式覆盖: 使用 setStyle 或 updateLayerStyle 可以覆盖默认样式

内置图层 ​

内置图层总览 ​

内置图层详细说明 ​

获取内置图层列表 ​

获取所有内置图层 ​

查看图层信息 ​

添加内置图层 ​

添加单个图层 ​

批量添加图层 ​

指定图层顺序 ​

移除内置图层 ​

移除单个图层 ​

批量移除图层 ​

切换图层显示 ​

显示/隐藏图层 ​

内置图层列表 ​

基础图层 ​

background（背景图） ​

water / lake（水域湖泊） ​

landLayer（陆地图层） ​

空域图层 ​

airspace（空域） ​

controlled（管制空域） ​

restricted（限制空域） ​

amm（AMM图层） ​

航路图层 ​

airline（航路） ​

导航设施图层 ​

airport（机场） ​

vor（VOR导航台） ​

ndb（NDB导航台） ​

图层管理示例 ​

图层控制面板 ​

按类别分组显示 ​

图层样式自定义 ​

更新图层样式 ​

批量更新样式 ​

图层可见性控制 ​

显示/隐藏图层 ​

根据缩放级别控制 ​

期数管理 ​

注意事项 ​

内置图层

内置图层总览

内置图层详细说明

获取内置图层列表

获取所有内置图层

查看图层信息

添加内置图层

添加单个图层

批量添加图层

指定图层顺序

移除内置图层

移除单个图层

批量移除图层

切换图层显示

显示/隐藏图层

内置图层列表

基础图层

background（背景图）

water / lake（水域湖泊）

landLayer（陆地图层）

空域图层

airspace（空域）

controlled（管制空域）

restricted（限制空域）

amm（AMM图层）

航路图层

airline（航路）

导航设施图层

airport（机场）

vor（VOR导航台）

ndb（NDB导航台）

图层管理示例

图层控制面板

按类别分组显示

图层样式自定义

更新图层样式

批量更新样式

图层可见性控制

显示/隐藏图层

根据缩放级别控制

期数管理

注意事项