跳到主要内容
版本：9.2.0

精灵图（sprite）

精灵图是包含地图上所有图标和样式图像的单一图片。

图像可以用来渲染以下样式属性:background-pattern，fill-pattern，line-pattern，fill-extrusion-pattern和 icon-image。

在样式中定义如下：

"http://***/vt_map/sprite/sprite"

Mapmost SDK for WebGL将使用这个URL模板来请求两个精灵文件来渲染地图上的图标和图案。

精灵图文件（Sprite files）​

一个有效的精灵源必须提供两种类型的文件：索引文件和图像文件。

索引文件​

精灵图的索引文件是一个JSON文件，包含精灵图中的每个图像的描述，包括图片尺寸（宽度和高度属性）和像素比（pixelRatio）和它在精灵图中的位置(x, y)。

例如，包含单个图像的精灵可能包含以下索引文件内容: 

{
    "poi": {
        "width": 32,
        "height": 32,
        "x": 0,
        "y": 0,
        "pixelRatio": 1
    }
}

根据精灵图索引文件中的数据，样式可以通过创建带有布局属性"icon-image":"poi"或带有标记值"icon-image":"{icon}"的符号层和带有图标属性值poi的矢量贴图功能来引用精灵图中的图像。

除了必需的属性width, height, x, y和pixelRatio外，还支持以下可选属性:

  • content：由4个数字组成的数组，前两个数字指定左上角，后两个数字指定右下角。 如果出现，并且图像使用icon-text-fit，则该符号的文本将适合于内容框内。
  • stretchX：一种双元素数组，由两个数字组成，分别表示可拉伸区域的起始位置和终到位置。
  • stretchY：与stretchX相同，但作用于垂直维度。

图像文件​

精灵图的图像文件是包含图标的PNG图像。

精灵的最大尺寸是由WebGL MAX_TEXTURE_SIZE限制的，这取决于客户端的GPU，但通常至少是4096×4096像素。

如何创建精灵图文件​

可以通过Mapmost Studio 制图平台中的【图标生成】功能，上传svg即可生成所需的文件。

加载精灵图文件​

Mapmost SDK for WebGL将使用样式中的精灵属性值作为URL模板，并根据这两个精灵文件生成完整的URL:

  • 首先，对于索引和图像文件，它们将为高dpi设备上的URL后附加@2x。
  • 其次，它们将附加文件扩展名:.json用于索引文件，.png用于图像文件。

例如，如果你在你的样式中指定了"sprite": "http://***/vt_map/sprite/sprite" 渲染器将加载以下内容:

  • http:///vt_map/sprite/sprite.json 和 http:///vt_map/sprite/sprite.png 或者是
  • http:///vt_map/sprite/sprite@2x.json 和 http:///vt_map/sprite/sprite@2x.png