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

将图像层添加到地图

  • 项目

本文介绍如何将图像覆盖到固定坐标集。 下面是可以在地图上覆盖的不同图像类型的几个示例：

  • 从无人机捕获的图像
  • 建筑平面图
  • 历史或其他专门的地图图像
  • 工作地点蓝图
  • 天气雷达图像

提示

借助 ImageLayer，可以轻松将图像覆盖在地图上。 请注意，浏览器可能难以加载大图像。 在这种情况下，请考虑将图像分解为图块并将其作为 TileLayer 加载到地图中。

图像层支持以下图像格式：

  • JPEG
  • PNG
  • BMP
  • GIF（非动画）

添加图像层

下面的代码在地图上覆盖 1922 年新泽西州纽瓦克地图的图像。 通过将 URL 传递给图像并以 [Top Left Corner, Top Right Corner, Bottom Right Corner, Bottom Left Corner] 格式设置四个角的坐标来创建 ImageLayer。

//Create an image layer and add it to the map.
map.layers.add(new atlas.layer.ImageLayer({
    url: 'newark_nj_1922.jpg',
    coordinates: [
        [-74.22655, 40.773941], //Top Left Corner
        [-74.12544, 40.773941], //Top Right Corner
        [-74.12544, 40.712216], //Bottom Right Corner
        [-74.22655, 40.712216]  //Bottom Left Corner
    ]
}));

有关显示如何将 1922 年新泽西纽瓦克的地图图像作为图像图层来覆盖的完整功能示例，请参阅 Azure Maps 示例中的简单图像图层。 如需此示例的源代码，请参阅简单图像层源代码。

屏幕截图显示了一份地图，该地图以 1922 年新泽西州纽瓦克地图图像作为图像图层。

导入 KML 文件作为地面覆盖

此示例演示如何将 KML 地面覆盖信息覆盖为地图上的图像层。 KML 地面覆盖提供东、南、西、北坐标和逆时针旋转。 但图像层需要图像每个角的坐标。 此示例中的 KML 地面覆盖是来自维基媒体的 Chartres 大教堂。

此代码使用 ImageLayer 类中的静态 getCoordinatesFromEdges 函数。 它使用 KML 地面覆盖的东、南、西、北和旋转信息来计算图像的四个角。

有关显示如何将 KML 地面覆盖用作图像图层的完整功能示例，请参阅 Azure Maps 示例中的作为图像图层的 KML 地面覆盖。 如需此示例的源代码，请参阅 KML 地面叠加作为图像层源代码。

显示将 KML 地面覆盖显示为图像图层的地图的屏幕截图。

提示

使用图像层类的 getPixels 和 getPositions 函数在定位图像层的地理坐标和本地图像像素坐标之间转换。

自定义图像层

图像层有许多样式选项。 有关显示图像图层的不同选项如何影响呈现的完整功能示例，请参阅 Azure Maps 示例中的图像图层选项。 如需此示例的源代码，请参阅图像层选项源代码。

屏幕截图显示了带有面板的地图。面板具有影响呈现的图像图层的不同选项。在此示例中，可以更改样式选项并查看对地图的影响。

后续步骤

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

ImageLayer

ImageLayerOptions

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

添加图块层