在地图JS API调用数据集 最后更新时间: 2022年04月21日
为了满足基于矢量瓦片的数据可视化需求,JSAPI 通过 AMap.MapboxVectorTileLayer 插件引入了矢量瓦片渲染支持,此图层可以使用标准的 MVT 瓦片服务作为数据源。然而,搭建一个MVT瓦片服务并非易事,我们往往会在数据存储、服务运维等方面耗费额外的心力。因此,GeoHUB 提供了「数据发布服务」功能,用户无需耗费心力,仅需对现有的数据集进行服务发布操作,即可快速搭建起MVT瓦片服务。
注意:使用高德数据平台发布服务,由于服务 URL 地址是明文,强烈建议自行做服务代理转发,防止服务 ID 和 Key 明文传输导致数据泄露。
使用方式一:
- 在「 数据发布服务 」对数据集进行服务发布,获取 服务ID
- 在「 控制台 」 添加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>', ... });
完整代码请移步MVT图层示例
使用方式二:
- 在「 数据发布服务 」对数据集进行服务发布,获取 服务ID
- 将上述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)?
|
是否显示
|
成员函数:
函数
|
说明
|
功能
|
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()
|
–
|
设置图层隐藏
|