高德地图js 矢量切片类 链接:参考手册-地图 JS API v2.0 | 高德地图API
1.能实现通过返回到前端的字段进行颜色的设置(分级设色)
2.能实现根据返回前端的字段进行条件筛选(过滤筛选)
var mvtLayer = new AMap.MapboxVectorTileLayer({
zIndex: 9,
opacity: 1,
url: 'http://localhost/VectorTile/tiles.ashx?m=getVectorTile&z=[z]&x=[x]&y=[y]&day_date=2022-03-10',
dataZooms: [1, 22],
tileSize: 256,
styles: {
line: {
//按字段条件给管线渲染颜色
color: function ({ fs_name }) {
if (fs_name == 'A') {
return 'rgba(255, 0, 0, 1)';
} else if (fs_name == 'B') {
return 'rgba(255,165,0, 1)';
} else if (fs_name == 'C') {
return 'rgba(255, 0, 0, 1)';
}
else if (fs_name == 'D') {
return 'rgba(0, 255, 0, 1)';
} else {
return 'rgba(0, 0, 255, 1)';
}
},
lineWidth: 2,
//按字段条件过滤图层数据
visible: function ({ fs_name }) {
return fs_name == 'A'
}
},
},
});
3.后台数据变化,前端还可以定时刷新图层
//定时刷新图层
setInterval(function () {
mvtLayer.reload()
}, 120000);