WeMap

Đối tượng WeMap biểu diễn một bản đồ. Bạn tạo một đối tượng WeMap với key để sử dụng API, chỉ định một phần tử HTML chứa bản đồ và các lựa chọn khác.
WeMap GL JS khởi tạo bản đồ trên trang web và trả về đối tượng WeMap.

Các tham số khởi tạo

options (Object)

Tên	Kiểu dữ liệu	Miêu tả	Giá trị mặc định	Bắt buộc có?
`options.key`	`string`	Bản đồ sẽ sử dụng key này.		có
`options.container`	`HTMLElement` or `string`	Phần tử HTML mà WeMap GL JS sẽ kết xuất bản đồ, hoặc `id` của phần tử đó. Phần tử này không được có phần tử con nào.		có
`options.style`	`string`	Kiểu dáng của bản đồ. Các lựa chọn: `default`, `bright`, `dark`	`default`	không
`options.center`	`LngLatLike`	Điểm trung tâm khi khởi tạo của bản đồ.	`[105.8550736, 21.0283243]` (Toạ độ của Hà Nội)	không
`options.zoom`	`number`	Độ phóng đại khi khởi tạo của bản đồ	`10`	không
`options.reverse`	`boolean`	Nếu `true`, bật tính năng reverse khi nhấn chuột trái, bật tính năng menu khi nhấn chuột phải. Biểu tượng chuột sẽ thay đổi khi di chuyển chuột qua icon của các địa điểm POI và hiển thị thông tin chi tiết của địa điểm khi nhấn vào.	`false`	không
`options.traffic`	`boolean`	Nếu `true`, sẽ bật layer bản đồ traffic.	`false`	không
`options.urlController`	`boolean`	Nếu `true`, tham số URL trên thanh địa chỉ sẽ được cập nhật tương ứng khi các tính năng hoạt động.	`true`	không

Ví dụ

var wemap = new wemapgl.WeMap({
    container: 'map',
    key: 'YOUR-WEMAP-KEY-HERE',
    style: 'bright',
    center: [105.1, 21.0],
    zoom: 13,
    // Turn on urlController
    urlController: "true",
    // Turn on reverse
    reverse: true,
    // Turn on traffic
    traffic: true
});

Các hàm

`addControl(control, position?)`

Thêm một IControl vào bản đồ và thực hiện lời gọi control.onAdd(this).
Các tham số
control (IControl) IControl cần thêm vào.
position (string?) vị trí mà control sẽ được thêm vào. Các lựa chọn: 'top-left' , 'top-right' , 'bottom-left' , và 'bottom-right' . Mặc định là 'top-right'.
Trả về
WeMap: this
Ví dụ

// Thêm một control vào bản đồ
map.addControl(new wemapgl.NavigationControl());

`removeControl(control)`

Xóa một control khỏi Map.
Các tham số
control (IControl) The IControl to remove.
Trả về
WeMap: this
Ví dụ

// Định nghĩa một control
var navigation = new wemapgl.NavigationControl();
// Thêm control này vào bản đồ
map.addControl(navigation);
// Xoá control này khỏi bản đò
map.removeControl(navigation);

`addImage(id, image, options)`

Thêm 1 hình ảnh hoặc 1 icon vào bản đồ.
Các tham số
id (string) ID của hình ảnh.
image ((HTMLImageElement | ImageBitmap | ImageData | {width: number, height: number, data: (Uint8Array | Uint8ClampedArray)} | StyleImageInterface)). Hình ảnh là một HTMLImageElement , ImageData , ImageBitmap hoặc Object with có chứa width , height , và dữ liệu thuộc tính có cùng định dạng với với ImageData.
Ví dụ

Thêm 1 hình ảnh

map.loadImage('https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png', function(error, image) {
    if (error) throw error;
    if (!map.hasImage('cat')) map.addImage('cat', image);
});

Thêm 1 hình ảnh vào bản đồ

// Thực hiện action khi map load
map.on('load', function () {
    // Tải ảnh từ nguồn bên ngoài, ảnh nguồn bên ngoài phải hỗ trợ CORS
    map.loadImage(
        'https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png',
        function (error, image) {
            if (error) throw error;
            map.addImage('cat', image);
            map.addSource('cat-image', {
                'type': 'geojson',
                'data': {
                    'type': 'FeatureCollection',
                    'features': [
                        {
                            'type': 'Feature',
                            'geometry': {
                                'type': 'Point',
                                'coordinates': [0, 0]
                            }
                        }
                    ]
                }
            });
            map.addLayer({
                'id': 'points',
                'type': 'symbol',
                'source': 'cat-image',
                'layout': {
                    'icon-image': 'cat',
                    'icon-size': 0.25
                }
            });
        }
    );
});

`loadImage(url, callback)`

Tải ảnh từ nguồn bên ngoài, ảnh nguồn bên ngoài phải hỗ trợ CORS.
Các tham số

url (string) URL của hình ảnh. Định dạng của hình ảnh phải ở png, webp, hoặc jpg.
callback(Function) Hàm callback(error, data) được gọi khi việc tải ảnh thành công hoặc có lỗi.

// Tải hình ảnh từ nguồn bên ngoài.
map.loadImage('http://placekitten.com/50/50', function(error, image) {
    if (error) throw error;
    // Thêm ảnh đã add vào bản đồ với ID là 'kitten'.
    map.addImage('kitten', image);
});