Bỏ qua

Hướng dẫn chuyển đổi từ Leaflet

Phần này của tài liệu dành riêng cho việc chuyển đổi từ leaflet sang trackasia-gl.

Hướng dẫn này có thể không chính xác tùy thuộc vào phiên bản hiện tại của leaflet.

Sự khác biệt chính về chức năng là khả năng hỗ trợ xoay bản đồ, vector tiles và globe. Đối với các tập dữ liệu lớn, TrackAsia nhanh hơn nhờ sử dụng công nghệ WebGL.

Cài đặt TrackAsia

Cài đặt TrackAsia GL JS và thay thế Leaflet bằng TrackAsia trong dự án của bạn:

npm install trackasia-gl

Khởi tạo bản đồ

Leaflet

const map = L.map('map').setView([0, 0], 2);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

TrackAsia

import 'trackasia-gl/dist/trackasia-gl.css';
import {Map} from 'trackasia-gl';

const map = new Map({
  container: 'map',
  style: 'https://static.track-asia.com/demotiles/style.json',
  center: [0, 0],
  zoom: 2
});

Thêm một Marker

Leaflet

L.marker([0, 0]).addTo(map);

TrackAsia

new trackasiagl.Marker()
  .setLngLat([0, 0])
  .addTo(map);

Thêm một lớp GeoJSON

Leaflet

L.geoJSON('data.geojson').addTo(map);

TrackAsia

map.on('load', function () {
  map.addSource('geojson-source', {
    type: 'geojson',
    data: 'data.geojson',
  });

  map.addLayer({
    id: 'geojson-layer',
    type: 'fill',
    source: 'geojson-source',
    paint: {
      'fill-color': '#0080ff',
      'fill-opacity': 0.5,
    },
  });
});

Xử lý sự kiện Click

Leaflet

map.on('click', function (event) {
  console.log('Clicked coordinates:', event.latlng);
});

TrackAsia

map.on('click', function (event) {
  console.log('Clicked coordinates:', event.lngLat);
});

Hiển thị một Popup

Leaflet

L.popup()
  .setLatLng([0, 0])
  .setContent('Hello, Leaflet!')
  .openOn(map);

TrackAsia

new trackasiagl.Popup()
  .setLngLat([0, 0])
  .setHTML('<p>Hello, TrackAsia!</p>')
  .addTo(map);

Thêm một lớp Tile tùy chỉnh

Leaflet

L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

TrackAsia

map.on('load', function () {
  map.addSource('osm', {
    type: 'raster',
    tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
    tileSize: 256
  });

  map.addLayer({
    id: 'osm-layer',
    type: 'raster',
    source: 'osm',
  });
});

Thêm một Polygon

Leaflet

L.polygon([
  [51.5, -0.1],
  [51.5, -0.12],
  [51.52, -0.12]
]).addTo(map);

TrackAsia

map.on('load', function () {
  map.addSource('polygon', {
    type: 'geojson',
    data: {
      type: 'Feature',
      geometry: {
        type: 'Polygon',
        coordinates: [[[ -0.1, 51.5 ], [ -0.12, 51.5 ], [ -0.12, 51.52 ], [ -0.1, 51.5 ]]]
      }
    }
  });

  map.addLayer({
    id: 'polygon-layer',
    type: 'fill',
    source: 'polygon',
    paint: {
      'fill-color': '#ff0000',
      'fill-opacity': 0.5
    }
  });
});