图层简介

字数统计: 2.8k 字
阅读时长: 约 6 分钟
当前版本: 4.29

图层是 Map 中的数据集合。图层数据可以在客户端创建，也可以访问托管在 GeoScene Online 和 GeoScene Enterprise 的图层数据，或托管在其他服务器上数据。

GeoScene Maps SDK for JavaScript 提供了多种图层类，它们都继承自 Layer类。每种图层类型有不同的功能。使用哪个类取决于数据格式和数据来源。

以下是最常见的图层类：

类数据来源能力
FeatureLayerGeoScene Online 或 GeoScene Enterprise 中的地理数据。支持大数据量地理要素的显示、查询、过滤和编辑。
GraphicsLayer临时存储在内存中的地理数据。支持在地图上以图形、视觉辅助或文本的形式显示地理要素。
CSVLayer/KMLLayer/CSVLayer在线的地理数据或表格数据文件以图层形式显示文件中的数据
TileLayer/TileLayer为了实现快速渲染，以切片方案存储的数据集。显示地理环境的底图和其他切片数据集。
MapImageLayerGeoScene Enterprise 中的地理数据，渲染为图像。支持通过 GeoScene Server 服务动态渲染图层。
ImageryLayerGeoScene Enterprise 中的地理配准影像。支持卫星影像或其他影像数据的显示。

使用 FeatureLayer 显示数据源 ​

FeatureLayer 是地理要素的集合。集合中的所有要素都必须具有相同的几何类型和属性键。

要素图层数据源可以是应用程序加载在内存中的数据，也可以是通过 REST API 服务从 GeoScene Online 或 GeoScene Enterprise 请求的托管图层数据。将数据托管在 GeoScene Online 或 GeoScene Enterprise 中是优选方法，尤其是在访问和显示大量地理数据时。为了加快加载和显示速度，要素图层在客户端和服务器上都经过了高度优化，并支持其他功能，包括：

客户端数据 ​

通常，要素图层通过 REST API 访问托管在 GeoScene Online 或 GeoScene Enterprise 上的服务来创建，但也可直接利用内存中的要素集合来创建。

例如下面这段包含两个地点的 JSON 格式的点要素集合，我们可以将其转化为 FeatureLayer 需要的数据格式，在要素图层中显示它。

js
{
    "places": [
        {
            "id": 1,
            "address": "地址A",
            "longitude": 118.24354,
            "latitude": 34.05389
        },
        {
            "id": 2,
            "address": "地址B",
            "longitude": 118.31966,
            "latitude": 34.13375
        }
    ]
}

首先，将每个地点转换为具有 attributes 和 geometry 属性的 Graphic 对象。

属性类型描述
attributesObject键值对，存储属性信息
geometryGeometry要素在地理坐标系中的位置。可能的值是 Point、Polygon 和 Polyline 对象

执行下面的这段代码将地点数组转换为 Graphic 对象数组。

js
var graphics = places.map(function (place) {
    return new Graphic({
            attributes: {
                ObjectId: place.id,
                address: place.address
            },
            geometry: {
                type: "point",
                longitude: place.longitude,
                latitude: place.latitude
            },
            symbol: {
                // autocasts as new SimpleMarkerSymbol()
                type: "simple-marker",
                color: [226, 119, 40],
                outline: {
                // autocasts as new SimpleLineSymbol()
                color: [255, 255, 255],
                width: 2
            }
        }
    });
});

然后创建一个 FeatureLayer 对象，并至少指定 objectIdField、fields、renderer 和 source 属性，如下表所示。

属性类型描述
sourceCollection<Graphic>Graphic 对象集合，用于创建要素图层
rendererRenderer渲染器对象
objectIdFieldString标识要素唯一的字段名称
fieldsObject[]字段对象数组，表示要素图层属性结构
popupTemplatepopupTemplate要素的弹出窗口模板

以下代码展示了创建 FeatureLayer 的过程。指定 source 属性为 graphics，自动构造并指定 renderer、popup 和 fields 属性。

js
var featureLayer = new FeatureLayer({
    source: graphics,
    renderer: {
        type: "simple", // autocasts as new SimpleRenderer()
        symbol: { // autocasts as new SimpleMarkerSymbol()
        type: "simple-marker",
        color: "#102A44",
        outline: { // autocasts as new SimpleLineSymbol()
            color: "#598DD8",
            width: 2
        }}
    },
    popupTemplate: { // autocasts as new PopupTemplate()
        title: "地名",
        content: [{
            type: "fields",
        fieldInfos: [{
            fieldName: "address",
            label: "Address",
            visible: true
        }]
    }]},
    objectIdField: "ObjectID", // This must be defined when creating a layer from `Graphic` objects
    fields: [{
        name: "ObjectID",
        alias: "ObjectID",
        type: "oid"
    },
    {
        name: "address",
        alias: "address",
        type: "string"
    }]
});

map.layers.add(featureLayer);

服务器端数据源 ​

FeatureLayer 还支持显示REST服务返回的要素集合，通过指定服务 url 属性即可 。这种方式是访问和显示大型数据集的最好方式。要素图层和要素服务结合使用，极尽可能地提高检索效率，如果允许，要素图层还提供一些附加功能（例如编辑）。

js
var layer = new FeatureLayer({
    url: "{FeatureServiceLayerURL}"
});

map.layers.add(layer);

注

在将图层添加至地图教程中了解有关向地图添加图层的更多信息。

除了指定服务 URL，我们还可以引用存储在 GeoScene Online 或 GeoScene Enterprise 中的图层项目来创建要素图层。这些项目指向的还是 REST API 服务，服务中存储了图层数据以及服务配置信息。

js
var layer = new FeatureLayer({
    portalItem: {
        id: "{itemID}",
        portal: "https://www.geosceneonline.cn/geoscene" // 默认值，GeoScene Online门户
    }
});

map.layers.add(layer);

使用 GraphicsLayer 显示图形 ​

图形通常用于向地图以不同的几何图形添加文本、形状和图像。创建图形图层最简单的方法是将 Graphic 对象数组传递给 GraphicsLayer 对象的 graphics 属性。

Graphic 类包含以下属性：

属性类型描述
attributesObject键值对，存储属性信息
geometryGeometry要素在地理坐标系中的位置。值为 Point、Polygon 或 Polyline 对象
popupTemplatepopupTemplate图形的弹出窗口模板
symbolSymbol符号

以下示例代码中，首先创建了一个 Graphic 对象 pointGraphic ， Point 类型，配置了弹出窗口和符号样式。然后定义了一个 GraphicsLayer ，将包含 pointGraphic 的图形数组传递给 graphics 属性。

js
var pointGraphic = new Graphic({
    attributes: {
        name: "地名A",
        address: "地址A"
    },
    geometry: {
        type: "point", // autocasts as new Point()
        longitude: 118.24354,
        latitude: 34.05389
    },
    symbol: {
        type: "simple-marker", // autocasts as new SimpleMarkerSymbol()
        color: [ 226, 119, 40 ],
        outline: { // autocasts as SimpleLineSymbol()
            color: [ 255, 255, 255 ],
            width: 2
        }
    },
    popupTemplate: { // autocasts as new PopupTemplate()
        title: "地名",
        content: [{
            type: "fields",
            fieldInfos: [{
                fieldName: "name",
                label: "Name",
                visible: true
            },
            {
                fieldName: "address",
                label: "Address",
                visible: true
            }]
        }]
    },
});

var graphicsLayer = new GraphicsLayer({
    graphics: [ pointGraphic ]
});

map.layers.add(graphicsLayer);

注: 有关自动转换和向视图添加图形的更多信息，请参阅添加点、折线和多边形教程。

使用外部数据源 ​

Layer 的一些子类还支持其他类型的数据和文件。如 CSV、GeoJSON 文件或其他外部服务。

子类数据源数据类型能力局限性
CSVLayerCSV 文件- 下载为点矢量图形支持客户端处理、弹出窗口模板、2D和3D符号渲染要素数量大时可能会有大量下载
GeoRSSLayerGeoRSS 源点、线、面矢量图形- 支持图形存储 - 支持弹出窗口模板- 不支持 3D - 不支持渲染
GeoJSONLayerGeoJSON 文件点、线和面矢量图形支持 GeoJSON 数据创建图层- 每个 GeoJSON 图层是单一几何类型 - 数据必须符合 RFC 7946 规范
KMLLayerKML 数据源N/AN/AN/A
OGCFeatureLayerOGC API - 要素点、线、面支持渲染、标注、弹出窗口数据必须符合 RFC 7946 规范，规范中要求必须采用 WGS84
WFSLayer- WFS 服务 门户项目点、多点、线、面支持渲染、标注、弹出窗口数据必须为 GeoJSON 格式，仅支持版本 2.0.0。
WMSLayer- WMS 服务 门户项目导出为单个影像的栅格数据OGC 规范N/A
WMTSLayer- WMTS 切片服务 - 门户项目影像切片OGC 规范N/A

每个图层类型属性不同，有关详细信息，请参阅每种图层类型。以下示例展示了如何创建 CSVLayer 图层。

js
var earthquakesLayer = new CSVLayer({
    url: "https://mgHostName.geoscene/test/earthquake.csv",
    latitudeField: "latitude", // Defaults to "latitude"
    longitudeField: "longitude" // Defaults to "longitude"
});

map.layers.add(earthquakesLayer)

使用底图和切片图层 ​

底图是地图中的地理参照，它主要包含道路、行政界线、建筑物和其他基础数据，通常以切片格式提供，方便快速渲染。栅格底图会预先创建切片，矢量底图则以压缩二进制格式传输，在客户端渲染。 用户数据可以通过 GeoScene Online 或 GeoScene Enterprise 来发布为矢量或栅格切片。

API中通过修改 basemap 属性来控制 Map 对象的底图，它的值可以是代表特定底图的字符串，也可以是 Basemap 对象。

js
var Map = new Map({
    basemap: "tianditu-vector"
})

使用 GeoScene Enterprise 中的地图服务 ​

MapImageLayer 可以显示 GeoScene Enterprise 中的地图服务数据。地图服务具有多个子图层和复杂的制图信息，它在服务器端将数据动态渲染为图片，然后在客户端显示。

使用栅格和影像数据 ​

ImageryLayer 可以显示 GeoScene Enterprise 影像服务中的影像或其他栅格数据。 ImageryLayer 通常用于显示和分析无人机或卫星影像图像数据、显示科学数据。

要素集合数据 ​

要素集合通过图层来管理和显示。在图层中，要素是一个地理位置或地理实体的记录，包含具有空间坐标的几何（点、折线或多边形）和属性信息。要素集合分为两类：

  • 结构化要素集合，geometry 类型和 attributes 都相同的要素集合
  • 非结构化要素集合，geometry 类型或 attributes 属性不完全相同的要素集合

注: 有时，要素具有模式，而图形没有模式。

使用要素集合时，一般的经验法则是：