你当前正在访问 Microsoft Azure Global Edition 技术文档网站。 如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站,请访问 https://docs.azure.cn

添加简单的数据层

空间 IO 模块提供 SimpleDataLayer 类。 通过该类可以轻松地在地图上呈现带样式的功能。 该类甚至可以呈现具有样式属性和包含混合几何图形类型的数据集。 简单数据层通过包装多个呈现层并使用样式表达式来实现此功能。 样式表达式搜索这些已包装层内功能的通用样式属性。 atlas.io.read 函数和 atlas.io.write 函数使用这些属性来读取样式,并将其写入支持的文件格式。 将属性添加到支持的文件格式后,文件可用于各种目的。 例如,文件可用于显示地图上带样式的功能。

除样式功能外, SimpleDataLayer 还提供了带有弹出模板的内置弹出功能。 选择功能时会显示弹出窗口。 如果需要,可以禁用默认的弹出功能。 该层还支持群集数据。 单击群集后,地图会放大到该群集,并将其扩展到各个点和子群集。

SimpleDataLayer 类可用于将许多几何图形类型和样式应用于功能的大型数据集。 此类的使用会增加包含样式表达式的六个层的开销。 因此,在某些情况下,使用核心呈现层会更有效。 例如,使用核心层在一个功能上呈现几个几何图形类型和样式

使用简单的数据层

SimpleDataLayer 类的使用方式类似于其他呈现层。 下面的代码演示如何在地图中使用简单的数据层:

//Create a data source and add it to the map.
var datasource = new atlas.source.DataSource();
map.sources.add(datasource);

//Add a simple data layer for rendering data.
var layer = new atlas.layer.SimpleDataLayer(datasource);
map.layers.add(layer);

以下代码片段演示了如何使用简单的数据层,引用来自联机源的数据。

function InitMap()
{
  var map = new atlas.Map('myMap', {
    center: [-73.967605, 40.780452],
    zoom: 12,
    view: "Auto",

    //Add authentication details for connecting to Azure Maps.
    authOptions: {
      // Get an Azure Maps key at https://azuremaps.com/.
      authType: 'subscriptionKey',
      subscriptionKey: '{Your-Azure-Maps-Subscription-key}'
    },
  });    

  //Wait until the map resources are ready.
  map.events.add('ready', function () {

    //Create a data source and add it to the map.
    var datasource = new atlas.source.DataSource();
    map.sources.add(datasource);

    //Add a simple data layer for rendering data.
    var layer = new atlas.layer.SimpleDataLayer(datasource);
    map.layers.add(layer);

    //Load an initial data set.
    loadDataSet('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1717245/use-simple-data-layer.json');

    function loadDataSet(url) {
      //Read the spatial data and add it to the map.
      atlas.io.read(url).then(r => {
      if (r) {
        //Update the features in the data source.
        datasource.setShapes(r);

        //If bounding box information is known for data, set the map view to it.
        if (r.bbox) {
          map.setCamera({
            bounds: r.bbox,
            padding: 50
          });
        }
      }
      });
    }
  });
}

传递给loadDataSet函数的 URL 指向以下 json:

{
    "type": "Feature",
    "geometry": {
        "type": "Point",
        "coordinates": [0, 0]
    },
    "properties": {
        "color": "red"
    }
}

将特征添加到数据源后,简单的数据层会弄清楚如何最好地呈现它们。 单个功能的样式可设置为功能的属性。

上面的示例代码演示了 GeoJSON 点功能,其color属性设置为red

此示例代码使用简单数据层呈现点特征,如下所示:

坐标为 0, 0 的地图屏幕截图,显示了蓝色水面上的红点,该红点使用符号图层添加。

注意

请注意,初始化地图时设置的坐标:

  中心:[-73.967605, 40.780452]

被数据源中的值覆盖:

  "coordinates": [0, 0]

简单数据层的真正强大之处在以下情况中得以发挥:

  • 数据源中有几种不同类型的功能;或
  • 数据集中的功能分别设置了几个样式属性;或
  • 不确定数据集的确切包含内容。

例如,在解析 XML 数据馈送时可能不知道功能的确切样式和几何图形类型。 简单的数据层选项示例呈现了 KML 文件的特征,从而显示了简单数据层的强大功能。 同时也演示了简单数据层类提供的各种选项。 有关此示例的源代码,请参阅 GitHub 中 Azure Maps 代码示例中的简单数据层 options.html

左侧有面板的地图屏幕截图,显示了不同的简单数据层选项。

注意

此简单数据层使用弹出模板类以表的形式显示 KML 提示框或功能属性。 默认情况下,弹出窗口呈现的所有内容都将作为安全功能在 iframe 内进行沙盒处理。 但存在一些限制:

  • 所有脚本、窗体、指针锁定和顶部导航功能都处于禁用状态。 选中时,链接可以在新选项卡页中打开。
  • 不支持 iframe srcdoc 参数的旧版本浏览器会受到限制,仅能呈现少量内容。

如果信任加载到弹出窗口中的数据,并且可能希望加载到弹出窗口的脚本可以访问应用程序,则可以通过将弹出模板的 sandboxContent 选项设置为 false 来禁用此设置。

受支持的默认样式属性

如前文所述,简单数据层包装多个核心呈现层:气泡、符号、直线、多边形和突出多边形。 然后,简单数据层使用表达式搜索各个功能的有效样式属性。

Azure Maps 和 GitHub 样式属性是两个主要的受支持属性名称集。 不同 Azure 地图层选项的大多数属性名称都作为简单数据层中功能的样式属性受到支持。 已将表达式添加到一些层选项,以支持 GitHub 通常使用的样式属性名称。 GitHub 的 GeoJSON 地图支持定义了这些属性名称,它们用于对平台中存储和呈现的 GeoJSON 文件进行样式处理。 除 marker-symbol 样式属性以外,简单数据层支持所有 GitHub 样式属性。

如果读取器遇到不太通用的样式属性,则会将其转换为最接近的 Azure Maps 样式属性。 此外,使用简单数据层的 getLayers 函数及更新任何层的选项,可以重写默认样式表达式。

以下部分提供了有关简单数据层支持的默认样式属性的详细信息。 受支持属性名称的顺序也是属性的优先级。 如果为同一层选项定义了两个样式属性,则列表中第一个属性的优先级更高。 颜色可以是任何 CSS3 颜色值;HEX、RGB、RGBA、HSL、HSLA 或命名的颜色值。

气泡层样式属性

如果功能是 PointMultiPoint,且该功能没有可用作自定义图标以将点呈现为符号的 image 属性,则该功能使用 BubbleLayer 进行呈现。

层选项 受支持的属性名称 默认值
color colormarker-color '#1A73AA'
radius size1marker-size2scale1 8
strokeColor strokeColorstroke '#FFFFFF'

[1] sizescale 值被视为标量值,然后乘以 8

[2] 如果指定了 GitHub marker-size 选项,则半径将使用以下值。

标记大小 半径
small 6
medium 8
large 12

群集也可以使用气泡层呈现。 默认情况下,群集的半径设置为 16。 群集的颜色因群集中的点数而异,如下表所示:

点数 Color
>= 100 red
>= 10 yellow
< 10 green

符号样式属性

如果功能是 PointMultiPoint,且该功能没有可用作自定义图标以将点呈现为符号的 image 属性,则使用 SymbolLayer 呈现该功能。

层选项 受支持的属性名称 默认值
image image none
size sizemarker-size1 1
rotation rotation 0
offset offset [0, 0]
anchor anchor 'bottom'

[1] 如果指定了 GitHub marker-size 选项,则图标大小选项使用以下值。

标记大小 符号大小
small 0.5
medium 1
large 2

如果点功能是一个群集,则 point_count_abbreviated 属性呈现为文本标签。 不呈现任何图像。

线样式属性

如果功能为 LineStringMultiLineStringPolygonMultiPolygon,则使用 LineLayer 呈现该功能。

层选项 受支持的属性名称 默认值
strokeColor strokeColorstroke '#1E90FF'
strokeWidth strokeWidthstroke-widthstroke-thickness 3
strokeOpacity strokeOpacitystroke-opacity 1

多边形样式属性

如果功能是 PolygonMultiPolygon,且功能不具有 height 属性或 height 属性为零,则使用 PolygonLayer 呈现该功能。

层选项 受支持的属性名称 默认值
fillColor fillColorfill '#1E90FF'
fillOpacity fillOpacityfill-opacity 0.5

突出多边形样式属性

如果功能是 PolygonMultiPolygon,且具有值大于零的 height 属性,则使用 PolygonExtrusionLayer 呈现该功能。

层选项 受支持的属性名称 默认值
base base 0
fillColor fillColorfill '#1E90FF'
height height 0

后续步骤

详细了解本文中使用的类和方法:

有关可向地图添加的更多代码示例,请参阅以下文章: