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:
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
TrackAsia
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!';
});