MapboxVectorTileLayer
AMap.MapboxVectorTileLayer
It can be used with the vector tile service released by the GeoHub data center. Note: When using the AMap data platform to publish services, since the service URL address is in plain text, it is recommended to set up a service proxy forwarding to prevent the service ID and Key from being transmitted in plain text and causing data leakage.
Construct an MVT layer object and set layer properties through MapboxVTLayerOptions
new AMap.MapboxVectorTileLayer(opts: MapboxVTLayerOptions)Parameter
opts(MapboxVTLayerOptions): Simple vector tile layer parameters
Demo
var globalVar = ["这是", "一个", "外部", "变量"];
AMap.plugin(["AMap.MapboxVectorTileLayer"], function () {
var mvtl = new AMap.MapboxVectorTileLayer({
zIndex: 150,
opacity: 1,
// The URL can use the services of the data service platform or the MVT data service you published
url: "https://restapi.amap.com/rest/lbs/geohub/tiles/mvt?z=[z]&x=[x]&y=[y]&size=512&key=The key value you applied for&id=Data service ID",
dataZooms: [2, 18],
zooms: [2, 20],
tileSize: 256,
styles: {
point: {
sourceLayer: "default",
visible: function (f, inject) {
// Here, the inject parameter is an array, and its value is the array value of the injection field: [visis].
return inject[0].indexOf("这是") > -1;
},
injection: [globalVar],
radius: function (props) {
return Math.random() * 20 + 5;
},
color: "red",
borderWidth:
20 ||
function (props) {
return Math.random() * 5 + 2;
},
borderColor: "rgba(255,255,255,1)",
},
polygon: {
sourceLayer: "default",
color: function (props) {
return "rgba(0,0,0,1)";
},
dash: [10, 0, 10, 0],
borderColor: "rgba(30,112,255,1)",
borderWidth: 5,
},
line: {
sourceLayer: "default",
color: "rgba(20,140,40,1)",
lineWidth: 5,
dash: [10, 0, 10, 0],
},
polyhedron: {
sourceLayer: "default",
topColor: "rgba(230,230,230,0.9)",
sideColor: "rgba(240,240,240,0.9)",
},
},
});
map.add(mvtl);
});Method
setStyles(styles)
Set style information
Parameter: styles((MapboxVTLayerStyle)) Style information (refer to the style attribute configuration in the properties list above)
filterByRect(rect, type)
Retrieve features within the rectangular area
Parameter:
rect(Polygon) Polygon, for example:[ [lng,lat] , [lng,lat] , [lng,lat] , [lng,lat] , [lng,lat] ]
type(String = "all") The type of feature you want to acquire, default to all: all. Options: all, point, polygon, line
return value: (Array<Feature>) Range Feature
getStyles()
Get Style Information
return value: (MapboxVTLayerStyle) Style
on(type, fn, option)
Listen to mouse events at the layer level to get elements at the mouse position in the current layer
Parameter:
type (String) Listening event types, currently support click, mousemove
fn (Function) Callback function for listening, the features in the parameters are the elements obtained at the mouse position
option (Object) Pick parameters, featType: represents the type of feature to be picked, refer to the type in the filterByRect() function; buffer: 5, represents a square area with a range of 5 centered on the mouse as the mouse pick range. The larger the value, the larger the pick range, it is recommended to use the default value.
hide()
Hide Layer
show()
Set Layer Visibility
setzIndex(zIndex)
Set layer level, the higher the number, the higher the layer level
Parameter: zIndex (Number) Layer level value
setOpacity(opacity)
Set layer transparency, range [0 ~ 1], where 1 means completely opaque and 0 means completely transparent
Parameter: opacity(Number) Layer transparency
getZooms()
Get the display level range of this layer
return value: ([Number, Number]) Display level range of this layer
setZooms(zooms)
Set the display level range for this layer
Parameter: zooms([Number, Number]) Zoom range displayable for this layer