Vietmap GL SDK cho React Native¶

Thư viện React Native để dựng bản đồ, dựa trên Vietmap GL Native SDK cho iOS và Android.

Bắt đầu¶

Cài package:

Dùng npm:

    npm i @vietmap/vietmap-gl-react-native

Dùng yarn:

    yarn add @vietmap/vietmap-gl-react-native

Phiên bản mới nhất xem tại https://www.npmjs.com/package/@vietmap/vietmap-gl-react-native

Tài liệu¶

Dự án demo cho thư viện Vietmap React-Native GL, có code mẫu cho các chức năng chính: vietmap-react-native-demo.

Dự án dùng Expo thì làm theo hướng dẫn cài cho Expo hoặc xem dự án mẫu trên GitHub.

Hiển thị bản đồ¶

    import { MapView } from "@vietmap/vietmap-gl-react-native";

    const SimpleMap = () => {
    return (
        <View style={styles.page}>
            <View style={styles.container}>
                <MapView mapStyle={`https://maps.vietmap.vn/api/maps/light/styles.json?apikey=${YOUR_API_KEY_HERE}`} style={{flex: 1}}>
                    <Camera
                        zoomLevel={10}
                        followUserLocation={false}
                        centerCoordinate={[106.800106, 10.704619]}
                    />
                </MapView>
            </View>
        </View>
    );
};

Muốn dùng màu và icon riêng, tạo bản đồ trong Map Editor rồi thay URL style ở trên bằng link style của bản đồ đó.

Code ví dụ đầy đủ xem tại đây

Các loại bản đồ VIETMAP cung cấp

Loại	Mô tả
Raster	Bản đồ lưu dưới dạng ảnh, chia thành lưới các ô nhỏ (tile), mỗi ô chứa một phần bản đồ.
URL raster	`https://maps.vietmap.vn/api/maps/raster/styles.json?apikey=YOUR_API_KEY_HERE`
Vector	Vector tile là các gói dữ liệu vector nhỏ, tải về và vẽ ngay trên thiết bị (trình duyệt, app). Dữ liệu gồm tên đường, khối nhà, địa hình…
URL vector	`https://maps.vietmap.vn/api/maps/light/styles.json?apikey=YOUR_API_KEY_HERE`
Vệ tinh	Ảnh chụp mặt đất từ vệ tinh.
Hybrid	Ảnh vệ tinh phủ thêm lớp vector tên đường, địa điểm.

Xem thêm về raster và vector

Gửi email để lấy URL style bản đồ Vệ tinh và Hybrid.

Tương tác với bản đồ¶

SDK cho phép bật các tương tác cử chỉ và sự kiện bấm trên bản đồ. Các tương tác được hỗ trợ:

Phóng to, thu nhỏ¶

Bản đồ hỗ trợ chụm hai ngón để đổi mức zoom và chạm đúp để phóng to. Zoom 4 hiển thị cấp quốc gia, zoom 18 hiển thị tới số nhà. Trong SDK này, vị trí camera đóng vai trò quan trọng.

Các thao tác sau thực hiện qua CameraPosition:

Target¶

Target là toạ độ (vĩ độ, kinh độ) mà camera hướng vào. Đổi target sẽ dời camera tới toạ độ đó. Target là một đối tượng LatLng và luôn nằm ở giữa khung nhìn.

Tilt (độ nghiêng)¶

Tilt là góc nghiêng của camera so với phương nhìn thẳng xuống mặt đất, tính bằng độ. Nhỏ nhất (mặc định) là 0, lớn nhất là 60. Giá trị có độ chính xác 6 chữ số thập phân.

Người dùng cũng nghiêng bản đồ được bằng cách đặt hai ngón tay lên bản đồ và cùng vuốt lên hoặc xuống.

Bearing (hướng)¶

Bearing là hướng camera đang nhìn, tính bằng độ theo chiều kim đồng hồ từ hướng bắc.

Mặc định bearing là 0 độ (hướng bắc), khi đó la bàn trên bản đồ được ẩn cho tới khi bearing khác 0. Giá trị có độ chính xác 6 chữ số thập phân, nên khoá hoặc đặt hướng bản đồ được rất chính xác. Ngoài cách đặt bằng code, người dùng có thể đặt hai ngón tay lên bản đồ và xoay.

Zoom¶

Zoom quyết định tỉ lệ bản đồ, nhận giá trị từ 0 đến 22. Ở zoom 0, khung nhìn hiện các châu lục; zoom 11 hiện chi tiết cấp thành phố; zoom cao hơn bắt đầu hiện toà nhà và địa điểm. Các cách phóng to, thu nhỏ:

Chụm hoặc mở hai ngón tay để thu nhỏ, phóng to.
Chạm nhanh hai lần bằng một ngón để phóng to.
Chạm nhanh hai lần bằng một ngón và giữ ngón tay trên màn hình sau lần chạm thứ hai,
rồi vuốt lên để thu nhỏ, vuốt xuống để phóng to.

Di chuyển camera¶

SDK có nhiều cách để di chuyển camera tới một vị trí, có hoặc không có hiệu ứng: - Tạo biến vị trí trong state

    this.state = {
        location: [106.785226, 10.667552]
    }

- Thêm Camera vào MapView

    <MapView 
    tintColor={'#000'}
    mapStyle={vietmapStyle}
    style={styles.map}>
        <Camera
            zoomLevel={6}
            animationMode={"easeTo"} // flyTo, moveTo, linearTo, easeTo
            animationDuration={6000}
            centerCoordinate={this.state.location}
        />
        <UserLocation />
    </MapView>

- Viết hàm di chuyển camera

    flyToNewLocationFunction() {
        this.setState({ location: [105.838071, 21.022425]});
    }

Sự kiện bản đồ¶

Bấm vào bản đồ¶

Để xử lý khi người dùng chạm vào một điểm trên bản đồ, dùng callback onMapClick.

Callback được gọi mỗi khi người dùng bấm lên bản đồ:

    <MapView
        mapStyle={vietmapStyleUrl} 
        style={{flex: 1}}
        onPress={onPressFunctionHere}>   
            ...
    </MapView>

Nhấn giữ trên bản đồ¶

Callback được gọi khi người dùng nhấn giữ trên bản đồ.

    <MapView
        mapStyle={vietmapStyleUrl} 
        style={{flex: 1}}
        onLongPress={onLongPressFunctionHere}>
            ...
    </MapView>

Callback khi bản đồ vẽ xong¶

Callback được gọi khi bản đồ đã vẽ xong hoàn toàn.

Nên đặt các thao tác khởi tạo trong callback này, để chúng chạy sau khi bản đồ tải xong.

    <MapView
        mapStyle={vietmapStyleUrl} 
        style={{flex: 1}}
        onDidFinishRenderingMap={handleOnMapFinishRenderHere}
        onDidFinishLoadingMap={handleOnMapFinishLoadingHere } >
            ...
    </MapView>

Vẽ lên bản đồ¶

Thêm marker (đánh dấu một điểm)¶

                           

href="#__codelineno-10-1">const vietmapLogo: string = 'YOUR_IMAGE_URL_HERE'; href="#__codelineno-11-1">    <MapView mapStyle={vietmapStyle} style={{flex: 1}} onPress={handleOnMapClick}> <Camera zoomLevel={10} followUserLocation={false} centerCoordinate={[106.800106, 10.704619]} /> <ShapeSource id="marker-source" shape={{ type: 'Feature', geometry: { type: 'Point', coordinates: [106.800106, 10.704619], }, }}> <SymbolLayer id="marker-layer" style={{ iconImage: vietmapLogo, iconSize: 0.2, }} /> </ShapeSource> </MapView>
Thêm đường (polyline nối các điểm)¶

Khai báo danh sách toạ độ của đường
const geoJsonFeature = {
  type: 'Feature',
  properties: {},
  geometry: {
    type: 'LineString',
    coordinates: [
      [106.708654, 1.760325],
      [107.708654, 1.760325],
      [107.308654, 2.760325],
      [108.708654, 3.660325],
      [108.508654, 3.760325],
      [109.208654, 4.560325],
      [109.708654, 4.760325],
      [110.508654, 5.760325],
      [110.308654, 5.760325],
      [111.408654, 6.760325],
      [111.708654, 6.960325],
      [112.508654, 7.760325],
      [112.908654, 7.760325],
      [113.708654, 8.160325],
      [113.7908654, 8.760325],
      [114.2708654, 9.760325],
      [114.08654, 9.360325],
      [115.408654, 10.760325],
      [115.708654, 10.760325],
      [116.708654, 11.260325],
      [116.308654, 11.760325],
      [117.508654, 12.260325],
      [117.708654, 12.760325],
      [118.408654, 13.860325],
      [118.108654, 13.760325],
    ],
  },
};

Vẽ đường lên bản đồ
    <MapView 
    mapStyle={vietmapStyle} 
    style={{flex: 1}}>
        <Camera
        zoomLevel={4}
        followUserLocation={false}
        centerCoordinate={[112.908654, 7.760325]}
        />
        <ShapeSource id="route-source" shape={geoJsonFeature}>
            <LineLayer
                id="route-layer"
                style={{
                lineColor: 'steelblue',
                lineWidth: 4,
                lineJoin: 'round',
                lineCap: 'round',
                }}
            />
        </ShapeSource>
    </MapView>


Thêm vùng (polygon)¶
    <MapView mapStyle={vietmapStyle} style={{flex: 1}}>
        <Camera
        zoomLevel={3}
        followUserLocation={false}
        centerCoordinate={[107.708654, 1.760325]}
        />
        <ShapeSource id="route-source" shape={geoJsonFeature}>
        <FillLayer id="fill-layer" />
        </ShapeSource>
    </MapView>

Tìm đường giữa 2 điểm trở lên¶

Tìm đường giữa 2 điểm trở lên và các API khác có trong package
vietmap-api.

Code demo: AddLine.tsx
Code demo cho Expo: react-native-expo-demo
 
Email: maps.info@vietmap.vn
Liên hệ hỗ trợ
Tài liệu API VIETMAP: Tổng quan Map API
Gặp lỗi? Tạo issue trên GitHub, kèm log đầy đủ và thông tin để tái hiện lỗi nếu có thể.
Cần thêm tính năng? Tạo issue mô tả tính năng đó làm gì và vì sao bạn cần.







  
    
  
  


  
    
      
  
    
      
    
    19/10/2026