如何通过Web界面在Shapefile上展示GRIB2/NetCDF气象数据？

Absolutely, you can visualize meteorological GRIB2/NetCDF data over a Shapefile via a web interface—let’s break down actionable, hands-on workflows since you’ve already explored mapshaper and Web Mercator concepts.

Key Background First #

Mapshaper is great for vector data manipulation (like cleaning/converting Shapefiles) but doesn’t handle raster meteorological data rendering natively. Web Mercator (EPSG:3857) is the standard projection for web maps, so we’ll ensure all data aligns with this projection.

Workflow 1: Leaflet + GeoJSON + Meteorological Data Parsing #

This is a beginner-friendly, widely used approach:

1. Preprocess your Shapefile with mapshaper
   • Drag your Shapefile into mapshaper, use the simplify tool if needed to reduce file size, then export as GeoJSON (Leaflet natively supports GeoJSON).
2. Convert GRIB2/NetCDF to web-friendly formats
   • For GRIB2: Use the grib2json command-line tool to convert to structured JSON:

     grib2json -d -n -o temperature_output.json input.grib2
     

   • For NetCDF: Use Python’s xarray library to extract variables (e.g., temperature, precipitation) and export as GeoJSON or point-based JSON:

     import xarray as xr
     import geopandas as gpd
     
     ds = xr.open_dataset('input.nc')
     # Extract temperature data and convert to GeoDataFrame
     temp_gdf = gpd.GeoDataFrame(
         {'temp': ds.temperature.values.flatten()},
         geometry=gpd.points_from_xy(ds.lon.values.flatten(), ds.lat.values.flatten())
     )
     temp_gdf.to_file('temperature_points.geojson', driver='GeoJSON')
     

3. Build the web map with Leaflet
   Load your Shapefile-derived GeoJSON as a base vector layer, then overlay the meteorological data (e.g., as a heatmap or contour lines):

   // Initialize map in Web Mercator projection (default for Leaflet)
   const map = L.map('map-container').setView([39.8283, -98.5795], 5);
   
   // Add a base tile layer
   L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
     attribution: '© OpenStreetMap contributors'
   }).addTo(map);
   
   // Load and add your Shapefile GeoJSON layer
   fetch('your-shapefile.geojson')
     .then(res => res.json())
     .then(shapeData => {
       L.geoJSON(shapeData, {
         style: { color: '#2c3e50', weight: 2, fillOpacity: 0.1 }
       }).addTo(map);
     });
   
   // Add temperature heatmap overlay
   fetch('temperature_points.geojson')
     .then(res => res.json())
     .then(tempData => {
       const heatPoints = tempData.features.map(feature => [
         feature.geometry.coordinates[1],
         feature.geometry.coordinates[0],
         feature.properties.temp
       ]);
       L.heatLayer(heatPoints, { radius: 30 }).addTo(map);
     });
   

Workflow 2: OpenLayers + GDAL.js (Browser-Side Data Processing) #

If you want to avoid backend conversion, use GDAL.js to process Shapefiles, GRIB2, and NetCDF directly in the browser:

1. Include GDAL.js and OpenLayers in your project
2. Load and render the Shapefile
   GDAL.js can read Shapefiles directly, no conversion needed:

   import * as gdal from 'gdal.js';
   import Map from 'ol/Map';
   import VectorLayer from 'ol/layer/Vector';
   import VectorSource from 'ol/source/Vector';
   import { fromExtent } from 'ol/geom/Polygon';
   
   // Initialize GDAL
   gdal.ready(() => {
     // Load Shapefile
     const dataset = gdal.open('your-shapefile.shp');
     const layer = dataset.layers.get(0);
     // Convert to OpenLayers-compatible features
     const features = [];
     layer.features.forEach(feature => {
       const geom = fromExtent(feature.getGeometry().getExtent());
       features.push(new ol.Feature({ geometry: geom }));
     });
     // Add to OpenLayers map
     const shapeLayer = new VectorLayer({
       source: new VectorSource({ features })
     });
     const map = new Map({
       target: 'map-container',
       layers: [shapeLayer],
       view: new ol.View({ center: ol.proj.fromLonLat([-98.5795, 39.8283]), zoom: 5 })
     });
   });
   

3. Parse and overlay GRIB2/NetCDF data
   Use GDAL.js to read the meteorological files, extract the variable layer, and render it as a raster overlay in OpenLayers.

Quick Tip for Web Mercator Alignment #

Ensure all your data is reprojected to EPSG:3857:

• In mapshaper: Use the proj tool to convert your Shapefile to Web Mercator before exporting.
• For NetCDF/GRIB2: Use gdalwarp (command-line) or xarray to reproject the raster data to EPSG:3857.

内容的提问来源于stack exchange，提问作者SB1990