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 mapvina-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, MapVina nhanh hơn nhờ sử dụng công nghệ WebGL.

Cài đặt MapVina

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

npm install mapvina-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);

MapVina

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

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

Thêm một Marker

Leaflet

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

MapVina

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

Thêm một lớp GeoJSON

Leaflet

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

MapVina

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);
});

MapVina

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);

MapVina

new mapvinagl.Popup()
  .setLngLat([0, 0])
  .setHTML('<p>Hello, MapVina!</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);

MapVina

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);

MapVina

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
    }
  });
});