Skip to content

WeFilter

Plugin cung cấp giao diện cho phép lọc ra các loại địa điểm trong bản đồ WeMap.

Các tham số

  • options Object

  • options.filters Object Plugin sẽ sử dụng tham số này để khởi tạo các bộ lọc, tạo giao diện theo ý muốn của người dùng. Đối tượng này có cấu trúc:

    { <id của bộ lọc> : { text : <Chuỗi ký tự là tên của bộ lọc được hiển thị trên giao diện>, fa-icon: <Ký tự font-awesome là biểu tượng của bộ lọc>, color: <Màu sắc của bộ lọc>, featureClasses: <Mảng chứa tên các lớp sẽ được lọc>, layers: <Mảng chứa id các layer mà bộ lọc sẽ áp dụng> }, ... // bộ lọc khác }

Ví dụ

// tạo ra plugin gồm 4 bộ lọc
var filter = new wemapgl.WeFilterControl({
       "filters": {
                "cuisine": {
                    "text": "Ẩm thực",
                    "fa-icon": "fa-cutlery",
                    "color": "#C70039",
                    "featureClasses": ["cafe", "restaurant", "fast_food", "food_court"],
                    "layers": ["poi-level-1", "poi-level-2", "poi-level-3"]
                },
                "hotel": {
                    "text": "Nhà nghỉ",
                    "fa-icon": "fa-hotel",
                    "color": "#C70039",
                    "featureClasses": ["hotel", "guest_house", "motel"],
                    "layers": ["poi-level-1", "poi-level-2", "poi-level-3"]
                },
                "entertainment": {
                    "text": "Giải trí",
                    "fa-icon": "fa-glass",
                    "color": "#C70039",
                    "featureClasses": ["bar", "nightclub", "pub", "theatre", "casino", "cinema"],
                    "layers": ["poi-level-1", "poi-level-2", "poi-level-3"]
                },
                "shopping": {
                    "text": "Mua sắm",
                    "fa-icon": "fa-shopping-bag",
                    "color": "#C70039",
                    "featureClasses": ["shop", "grocery", "alcohol_shop", "jewelry", "mall", "supermarket", "fashion", "convenience", "marketplace"],
                    "layers": ["poi-level-1", "poi-level-2", "poi-level-3"]
                }
        }
});

// thêm plugin vào bản đồ
map.addControl(filter, "top-right");