[JavaScript知识库]高德地图js 加载矢量切片

高德地图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);