GIS Viewer trên web

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

const map = new Map({
  target: 'map-container',
  view: new View({ center: [0, 0], zoom: 12 })
});

// Add vector layer
const layer = new VectorLayer({
  source: new VectorSource({
    url: '/api/v1/gis/parcels.geojson',
    format: new GeoJSON()
  }),
  style: {
    'fill-color': 'rgba(62, 166, 255, 0.15)',
    'stroke-color': '#7cc9ff',
    'stroke-width': 1.5
  }
});
map.addLayer(layer);

// Show attributes on click
map.on('click', (e) => {
  const features = map.getFeaturesAtPixel(e.pixel);
  if (features.length) showPopup(features[0].getProperties());
});