为了满足基于矢量瓦片的数据可视化需求,JSAPI 通过 AMap.MapboxVectorTileLayer 插件引入了矢量瓦片渲染支持,此图层可以使用标准的 MVT 瓦片服务作为数据源。然而,搭建一个MVT瓦片服务并非易事,我们往往会在数据存储、服务运维等方面耗费额外的心力。因此,GeoHUB 提供了「数据发布服务」功能,用户无需耗费心力,仅需对现有的数据集进行服务发布操作,即可快速搭建起MVT瓦片服务。
使用方式一:
在「控制台」 添加Key,服务平台选择“Web服务”(已添加则跳过),获得Web服务Key 将上述ID和Key作为参数初始化瓦片图层
new AMap.MapboxVectorTileLayer({
url: 'https://restapi.amap.com/rest/lbs/geohub/tiles/mvt?z=[z]&x=[x]&y=[y]&size=512&key=<Web服务Key>&id=<服务ID>',
...
});
注意:使用高德数据平台发布服务,由于服务 URL 地址是明文,强烈建议自行做服务代理转发,防止服务 ID 和 Key 明文传输导致数据泄露。
完整代码请移步MVT图层示例
使用方式二:
将上述ID作为参数初始化瓦片图层,此时Web服务将默认使用JSAPI的Key
new AMap.MapboxVectorTileLayer({
url: 'amap://mvt/<服务ID>',
...
});
参数说明
opts (MapboxVTLayerOptions) 图层初始化参数
Name | Description |
opts.zIndex Number(default 80) | 图层的层级 |
opts.opacity Number(default 1) | 图层透明度 |
opts.url String? | MVT 数据的链接地址 |
opts.visible Boolean(default true) | 图层是否可见 |
opts.zooms [number, number](default [2,22]) | 图层缩放等级范围 |
opts.dataZooms [number, number] (default [2,18]) | 瓦片数据等级范围,超过范围会使用最大/最小等级的数据 |
opts.styles MapboxVTLayerStyle |
|
opts.styles.polygon PolygonStyle? | 面类型的样式 |
opts.styles.polygon.color (String| Function)? | 面填充颜色 |
opts.styles.polygon.borderWidth (Number| Function)? | 描边宽度 |
opts.styles.polygon.dash (Array<Number> | Function)? | 描边线的虚线配置,例如: [10,5,8,5] |
opts.styles.polygon.borderColor (String| Function)? | 描边颜色 |
opts.styles.polygon.injection Array<Any>? | 其他属性值中对于函数形式的值,假如需要获取外部变量,要使用数组的形式传入,便于在函数内部访问外部变量。请看下面的示例。 |
opts.styles.polygon.visible (Boolean| Function)? | 是否显示 |
opts.styles.line LineStyle? | 线类型数据的样式 |
opts.styles.line.color (String| Function)? | 线填充颜色 |
opts.styles.line.lineWidth (Number| Function)? | 宽度 |
opts.styles.line.dash (String| Function)? | 虚线配置,例如: [10,5,8,5] |
opts.styles.line.injection Array<Any>? | 其他属性值中对于函数形式的值,假如需要获取外部变量,要使用数组的形式传入,便于在函数内部访问外部变量。请看下面的示例。 |
opts.styles.line.visible (Boolean| Function)? | 是否显示 |
opts.styles.point PointStyle? | 点类型数据的样式 |
opts.styles.point.radius (String| Function)? | 圆点的半径,单位像素 |
opts.styles.point.color (Number| Function)? | 圆的填充颜色 |
opts.styles.point.borderWidth (String| Function)? | 描边的宽度 |
opts.styles.point.borderColor (String| Function)? | 描边的颜色 |
opts.styles.point.injection Array<Any>? | 其他属性值中对于函数形式的值,假如需要获取外部变量,要使用数组的形式传入,便于在函数内部访问外部变量。请看下面的示例。 |
opts.styles.point.visible (Boolean| Function)? | 是否显示 |
opts.styles.polyhedron PolyheronStyle? | 多面体类型的样式 |
opts.styles.polyhedron.topColor (String| Function)? | 顶面填充颜色 |
opts.styles.polyhedron.sideColor (String| Function)? | 侧面填充颜色 |
opts.styles.polyhedron.texture (String| Function)? | 侧面纹理,纹理优先展示,没有纹理时使用填充颜色 |
opts.styles.polyhedron.injection Array<Any>? | 其他属性值中对于函数形式的值,假如需要获取外部变量,要使用数组的形式传入,便于在函数内部访问外部变量。请看下面的示例。 |
opts.styles.polyhedron.visible (Boolean| Function)? | 是否显示 |
成员函数:
函数 | 说明 | 功能 |
setStyles(styles) | 参数 styles (MapboxVTLayerStyle) 样式信息 | 设置样式信息 |
filterByPolygon(rect) | 参数 rect (Polygon) 多边型;返回值为 Array<Feature> | 获取 rect 范围的features |
getStyles() | 返回值为 MapboxVTLayerStyle | 获取样式信息 |
getOptions() | 返回值为 图层参数信息 (object) | 获取图层参数信息 |
getzIndex() | 返回值为 图层层级 (number) | 获取图层层级 |
setzIndex(zIndex) | 参数 zIndex (number) 图层层级值 | 设置图层层级,数字越大图层层级越高 |
getOpacity() | 返回值为 图层透明度 (number) | 获取图层透明度 |
setOpacity(opacity) | 参数 opacity (number) 图层透明度 | 设置图层透明度,范围 [0 ~ 1] |
getZooms() | 返回值为 缩放范围 ([number, number]) | 获取该图层可显示的级别范围,默认取值范围为[2-20] |
setZooms(zooms) | 参数 zooms ([number, number]) 缩放范围 | 获取该图层可显示的级别范围 |
show() | - | 设置图层可见 |
hide() | - | 设置图层隐藏 |