Bỏ qua

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

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

Cài đặt TrackAsia

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

npm install trackasia-gl

Khởi tạo bản đồ

OpenLayers

import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
  target: 'map',
  layers: [
    new TileLayer({
      source: new OSM(),
    }),
  ],
  view: new View({
    center: [0, 0],
    zoom: 2,
  }),
});

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 Marker

OpenLayers

import Feature from 'ol/Feature';
import Point from 'ol/geom/Point';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Style from 'ol/style/Style';
import Icon from 'ol/style/Icon';

const marker = new Feature({
  geometry: new Point([0, 0]),
});

marker.setStyle(new Style({
  image: new Icon({
    src: 'marker.png',
    scale: 0.1,
  }),
}));

const vectorLayer = new VectorLayer({
  source: new VectorSource({
    features: [marker],
  }),
});

map.addLayer(vectorLayer);

TrackAsia

map.on('load', function () {
  new trackasiagl.Marker({ color: 'red' })
    .setLngLat([0, 0])
    .addTo(map);
});

Thêm lớp GeoJSON

OpenLayers

import VectorSource from 'ol/source/Vector';
import VectorLayer from 'ol/layer/Vector';
import GeoJSON from 'ol/format/GeoJSON';

const geoJsonLayer = new VectorLayer({
  source: new VectorSource({
    url: 'data.geojson',
    format: new GeoJSON(),
  }),
});

map.addLayer(geoJsonLayer);

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

OpenLayers

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

TrackAsia

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

Hiển thị Popup

OpenLayers

import Overlay from 'ol/Overlay';

const popup = new Overlay({
  element: document.getElementById('popup'),
});

map.addOverlay(popup);

map.on('click', function (event) {
  popup.setPosition(event.coordinate);
  document.getElementById('popup-content').innerHTML = 'Hello, OpenLayers!';
});

TrackAsia

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