如何使用图像模板

可以在 Azure Maps Web SDK 中将图像与 HTML 标记和各种层配合使用：

• 符号层可使用图像图标来呈现地图上的点。 还可以沿着线条路径呈现符号。
• 可以使用填充图案图像来呈现多边形层。
• HTML 标记可以使用图像和其他 HTML 元素来呈现点。

为了确保层具有良好的性能，请在呈现前将图像加载到地图图像子画面资源。 在默认情况下，SymbolLayer 的 IconOptions 会将几个带有一些颜色的标记图像预加载到地图图像子画面。 这些标记图像和其他标记图像会作为 SVG 模板提供。 它们可用于创建具有自定义比例的图像，或用作客户主色和辅色。 总共提供了 42 个图像模板：27 个符号图标和 15 个多边形填充图案。

可以通过使用 map.imageSprite.createFromTemplate 函数将图像模板添加到地图图像子画面资源。 此函数允许传入最多 5 个参数；

createFromTemplate(id: string, templateName: string, color?: string, secondaryColor?: string, scale?: number): Promise<void>

id 是你创建的独一无二的标识符。 id 会在图像添加到地图图像子画面后被分配到该图像。 在层中使用此标识符来指定要呈现哪个图像资源。 templateName 指定要使用哪个图像模板。 color 选项设置图像的主色，secondaryColor 选项设置图像的辅色。 scale 选项会在将图像模板应用到图像子画面之前先对该模板进行缩放。 在图像应用于图像子画面时，它会转换为 PNG。 为了确保呈现清晰，最好在将图像模板添加到子画面之前先将该模板向上扩展，而不是在层中向上扩展。

此函数以异步方式将图像加载到图像子画面。 因此，它会返回一个承诺，你可以等待此函数完成。

下面的代码展示了如何从某一个内置模板创建图像并将该图像用于符号层。

map.imageSprite.createFromTemplate('myTemplatedIcon', 'marker-flat', 'teal', '#fff').then(function () {

   //Add a symbol layer that uses the custom created icon.
   map.layers.add(new atlas.layer.SymbolLayer(datasource, null, {
      iconOptions: {
         image: 'myTemplatedIcon'
      }
   }));
});

将图像模板用于符号层

在将图像模板加载到地图图像子画面后，可以通过在 iconOptions 的 image 选项中引用图像资源 ID 将该图像模板呈现为符号层中的符号。

具有内置图标模板的符号层 示例演示了如何通过使用具有青色主色和白色辅色的 marker-flat 图像模板呈现符号层来执行此操作，如以下屏幕截图所示。

有关此示例的源代码，请参阅示例代码：带有内置图标模板的符号层。

沿线条路径使用图像模板

在将图像模板加载到地图图像子画面后，可以将 LineString 添加到数据源，并配合 lineSpacing 选项使用符号层，并且可以在 iconOptions 的 image 选项中引用图像资源的 ID，通过这样的方式来沿线条的路径呈现该图像模板。

具有内置图标模板的线条层演示了如何执行此操作。 如以下屏幕截图所示，它使用带有宝蓝色主色和白色辅色的 car 图像模板，在地图上呈现红色线条并使用符号层。 有关此示例的源代码，请参阅示例代码：带有内置图标模板的线条层。

使用带有多边形层的图像模板

在将图像模板加载到地图图像子画面后，可以通过在多边形层的 fillPattern 选项中引用图像资源 ID 将该图像模板呈现为该层中的填充图案。

具有内置图标模板的填充多边形示例演示如何使用具有红色主色和透明辅色的 dot 图像模板呈现多边形层，如以下屏幕截图所示。 有关此示例的源代码，请参阅示例代码：用内置图标模板填充多边形。

使用带有 HTML 标记的图像模板

可以使用 altas.getImageTemplate 函数来检索图像模板，并且图像模板可以用作 HTML 标记的内容。 可以将模板传递到标记的 htmlContent 选项中，然后使用 color、secondaryColor 和 text 选项来自定义模板。

具有内置图标模板的 HTML 标记示例演示使用具有红色主色、粉红色辅色和文本值“00”的 marker-arrow 模板，如以下屏幕截图所示。 有关此示例的源代码，请参阅示例代码：带有内置图标模板的 HTML 标记。

//Retrieve an SVG template and replace the placeholder values.
var svg = atlas.getImageTemplate('marker').replace(/{color}/, 'red').replace(/{secondaryColor}/, 'white').replace(/{text}/, '').replace(/{scale}/, 1);

//Convert to data URI for use in image tags.
var dataUri = 'data:image/svg+xml;base64,' + btoa(svg);

创建自定义可重用模板

如果应用程序在不同的模块中使用相同的图标，或者，如果要创建添加更多图像模板的模块，可以从 Azure Maps Web SDK 轻松地添加和检索这些图标。 请对 atlas 命名空间使用以下静态函数。

SVG 图像模板支持以下占位符值：

将自定义图标模板添加到 atlas 命名空间示例演示了如何采用 SVG 模板，并将其作为可重用图标模板添加到 Azure Maps Web SDK，如以下屏幕截图所示。 有关此示例的源代码，请参阅示例代码：将自定义图标模板添加到 atlas 命名空间。

图像模板的列表

下表列出了 Azure Maps Web SDK 中所有目前可用的图像模板。 模板名称位于每个图像上方。 在默认情况下，主色为蓝色，辅色为白色。 为了更易于在白色背景上看清辅色，以下图像将辅色设置为黑色。

符号图标模板

多边形填充图案模板

预加载的图像图标

地图使用 marker、pin 和 pin-round 模板将一组图标预加载到地图图像子画面。 下表列出了这些图标的名称及其颜色值。

立即试用工具

通过以下工具，可以通过多种方式呈现不同的内置图像模板，并自定义主色、辅色和缩放。

后续步骤

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

请参阅以下文章，以获取更多可以使用图像模板的代码示例：