Skip to main content

加载图层

LayerCollection类用来加载各种gis图层数据

一、调用案例​

1.加载天地图​

const layerCollection = new THEngine.layer.LayerCollection(viewer);
//天地图影像
layerCollection.add({
  type: "tdtTile",
  tk:"你的tk",
});
//天地图电子
layerCollection.add({
  type: "tdtTileVector",
  tk:"你的tk",
});
//天地图影像注记
layerCollection.add({
  type: "tdtTileCiaMarker",
  tk:"你的tk",
});
//天地图电子注记
layerCollection.add({
  type: "tdtTileCvaMarker",
  tk:"你的tk",
});


案例地址 http://43.139.54.82:8098/sdk/sandbox/editor.html?data=layer/tdt_layer.html.

2.加载高德地图​

const layerCollection = new THEngine.layer.LayerCollection(viewer);
//高德影像WGS84
layerCollection.add({
  type: "gdTile",
  crs: "WGS84",
});
//高德电子WGS84
layerCollection.add({
  type: "gdTileVector",
  crs: "WGS84",
});
//高德实时路况WGS84
layerCollection.add({
  type: "gdTrafficUrl",
  crs: "WGS84",
});
//高德影像
layerCollection.add({
  type: "tdtTile",
  minimumLevel: 1,
  maximumLevel: 18,
});

案例地址 http://43.139.54.82:8098/sdk/sandbox/editor.html?data=layer/gd_layer.html.

3.加载WMS、WMTS、WFS服务​

const layerCollection = new THEngine.layer.LayerCollection(viewer);
//加载wmts
layerCollection.add({
  type: "wms",
  url: "http://www.cntuby.com:20875/geoserver/SLFH/wms",
  layers: "SLFH:村行政界限",
  parameters: {
    transparent: true, //是否透明
    format: "image/png",
    srs: "EPSG:4326",
    styles: "",
  },
});
//加载wmts
layerCollection.add({
  type: "wmts",
  url: "//server.mars3d.cn/geoserver/gwc/service/wmts",
  layer: "mars:hfgh",
  style: "",
  format: "image/png",
  tileMatrixSetID: "EPSG:4326",
  maximumLevel: 22,
});
//加载wfs
layerCollection.add({
  type: "wfs",
  url: "//server.mars3d.cn/geoserver/mars/wfs",
  layerName: "mars:hfjy",
  parameters: {
    transparent: true, //是否透明
    format: "image/png",
    srs: "EPSG:4326",
    styles: "",
  },
  style: {},
});

4.加载geojson、kml服务​

const layerCollection = new THEngine.layer.LayerCollection(viewer);
// 加载geojson
layerCollection.add({
  type: "geojson",
  url: "https://data.mars3d.cn/file/geojson/areas/100000_full.json",
});
// 加载kml
layerCollection.add({
  type: "kml",
  url: "../../sdk/data/kml/test.kml",
  style: {},
});

5.加载3dtiles服务，BIM、倾斜、点云​

const layerCollection = new THEngine.layer.LayerCollection(viewer);
//bim
let ly = await layerCollection.add({
  type: "bim",
  url: "https://data.mars3d.cn/3dtiles/bim-daxue/tileset.json",
  maximumScreenSpaceError: 1,
});
viewer.flyTo(ly);
//点云
let ly2 = await layerCollection.add({
  type: "points3d",
  url: "https://data.mars3d.cn/3dtiles/pnts-ganta/tileset.json",
  maximumScreenSpaceError: 1,
});
//倾斜模型
let ly3 = await layerCollection.add({
  type: "tile3d",
  url: "https://data.mars3d.cn/3dtiles/qx-shequ/tileset.json",
  maximumScreenSpaceError: 1,
});

6.加载瓦片地图服务（TMS）​

const layerCollection = new THEngine.layer.LayerCollection(viewer);
let ly = await layerCollection.add({
  type: "wts",
  url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
});

二、支持的图层类型​

服务类型属性名类型值名称
dom"dom"正射影像
insar"insar"insar
terrain"terrain"地形
tile3d"tile3d"实景三维
points3d"points3d"点云
designRaster"designRaster"设计数据（切片）
designVector"designVector"设计数据（矢量）
bim"bim"BIM模型
tdtTile"tdtTile"天地图影像
tdtTileVector"tdtTileVector"天地图矢量
bingTile"bingTile"必应影像
googleTile"googleTile"谷歌影像
gdTile"gdTile"高德影像
gdTileVector"gdTileVector"高德电子
gdTrafficUrl"gdTrafficUrl"高德实时路况
tdtTileCiaMarker"tdtTileCiaMarker"天地图影像注记
tdtTileCvaMarker"tdtTileCvaMarker"天地图矢量注记
arcgisDark"arcgisDark"在线底图
offlineTile"offlineTile"离线底图
wmts"wmts"WMTS
wms"wms"WMS
wfs"wfs"WFS
geojson"geojson"矢量数据（geojson）
kml"kml"kml
wkt"wkt"wkt
gltf"gltf"模型
plotting"plotting"标绘
shapefile"shapefile"shp数据
tms"tms"瓦片服务
customTile"customTile"自定义瓦片服务

三、LayerCollection类方法​

1. add(options, index)​

  • 功能：向场景中添加指定配置的图层，并将图层信息缓存。若图层已存在（根据 id 判定），则返回已存在的图层。根据图层类型的不同，执行不同的添加逻辑，如添加到数据源或影像图层集合等。
  • 参数：
    • options (Object)：包含图层的配置信息，如 id（图层唯一标识，若未提供且不为 0，则自动生成）、type（图层类型，取值与 map_type 相关）等。
    • index (number)：可选参数，指定图层添加到场景中的索引位置。
  • 返回值：Object|null。成功添加则返回添加的图层对象；若图层已存在则返回已存在的图层对象；添加失败（如类型不匹配等情况）则返回 null。

2. addMany(arr)​

  • 功能：批量添加多个图层到场景中。对数组 arr 中的每个图层配置对象，调用 add 方法进行添加操作。
  • 参数：
    • arr (Array)：包含多个图层配置对象的数组。
  • 返回值：Array，包含每个图层添加操作的返回值。

3. getLayer(id)​

  • 功能：根据传入的 id，从缓存中获取对应的图层对象。
  • 参数：
    • id (string)：目标图层的唯一标识。
  • 返回值：Object|null。若缓存中存在该 id 的图层，则返回图层对象；否则返回 null。

4. flyTo(id)​

  • 功能：使场景视角定位到指定 id 的图层，将视角聚焦到该图层所在位置。
  • 参数：
    • id (string)：要定位的图层的唯一标识。
  • 返回值：无

5. remove(id)​

  • 功能：根据传入的 id 或图层对象，从场景中删除对应的图层，并从缓存中移除相关信息。根据图层类型，从不同的数据源或图层集合中移除图层。
  • 参数：
    • id (string|Object)：可以是图层的 id（字符串类型），也可以是图层对象本身。
  • 返回值：无

6. removeAll()​

  • 功能：删除场景中所有已添加的图层，并清空图层缓存 layerCache，释放相关资源。
  • 参数：无
  • 返回值：无

7. destroy()​

  • 功能：销毁 LayerCollection 实例。调用 removeAll 方法删除所有图层，然后将 layerCache 设置为新的空 Map，完成资源释放和实例销毁。
  • 参数：无
  • 返回值：无