Рендеринг одиночной полосы в слое геосервера, содержащий несколько полос ⇐ Javascript

[Anonymous]

Я использую GeoServer для обслуживания многополосного слоя. Этот слой содержит 12 полос одной на каждый месяц (названный Band1, Band2, Band3, ...). Я хочу отображать данные только 1 полосы в моем приложении. Я использую карты Google в качестве базовой карты. Я не могу сделать разные слои для этого. Мне придется использовать один слой с несколькими полосами.
мой код прямо сейчас: < /p>
'use client';

import React, { useRef, useCallback } from 'react';
import { GoogleMap, LoadScript } from '@react-google-maps/api';

// const libraries = ['places'];
const GEOSERVER_WMS_URL = 'http://192.168.3.157:8080/geoserver/poc/wms';

const containerStyle = {
width: '100%',
height: '100vh',
};

const center = {
lat: 22.5,
lng: 80,
};

const sldBody = `


poc:PM2.5_HI_2023_all




1.0


Band1








`;
const encodedSLD = encodeURIComponent(sldBody);

function tileToBounds(x: number, y: number, z: number): string {
const TILE_SIZE = 256;
const worldCoordRadius = (TILE_SIZE * Math.pow(2, z)) / (2 * Math.PI);

// Convert tile coordinates to radians
const lon1 = (x * TILE_SIZE) / worldCoordRadius - Math.PI;
const lat1 = Math.atan(Math.sinh(Math.PI - ((y + 1) * TILE_SIZE) / worldCoordRadius));

const lon2 = ((x + 1) * TILE_SIZE) / worldCoordRadius - Math.PI;
const lat2 = Math.atan(Math.sinh(Math.PI - (y * TILE_SIZE) / worldCoordRadius));

const radToDeg = 180 / Math.PI;
const minLon = lon1 * radToDeg;
const minLat = lat1 * radToDeg;
const maxLon = lon2 * radToDeg;
const maxLat = lat2 * radToDeg;

const R_MAJOR = 6378137.0;

const projectToMercator = (lat: number, lon: number): { x: number; y: number } => {
const x = R_MAJOR * lon * (Math.PI / 180);
const y = R_MAJOR * Math.log(Math.tan(Math.PI / 4 + (lat * Math.PI) / 360));
return { x, y };
};

const minXY = projectToMercator(minLat, minLon);
const maxXY = projectToMercator(maxLat, maxLon);

return `${minXY.x},${minXY.y},${maxXY.x},${maxXY.y}`;
}

const MapWithWmsOverlay = () => {
const mapRef = useRef(null);

const onLoad = useCallback((mapInstance: google.maps.Map) => {
mapRef.current = mapInstance;

const wmsOverlay = new google.maps.ImageMapType({
getTileUrl: (coord, zoom) => {
console.log("TESTING", sldBody);

const bounds = tileToBounds(coord.x, coord.y, zoom);
const url = new URL(GEOSERVER_WMS_URL);
url.searchParams.set('SERVICE', 'WMS');
url.searchParams.set('VERSION', '1.1.1');
url.searchParams.set('REQUEST', 'GetMap');
url.searchParams.set('LAYERS', 'poc:PM2.5_HI_2023_all');
url.searchParams.set('FORMAT', 'image/jpeg');
url.searchParams.set('TRANSPARENT', 'true');
url.searchParams.set('SRS', 'EPSG:3857');
url.searchParams.set('WIDTH', '256');
url.searchParams.set('HEIGHT', '256');
url.searchParams.set('BBOX', bounds);
url.searchParams.set('SLD_BODY', sldBody);

return url.toString();
},
tileSize: new google.maps.Size(256, 256),
maxZoom: 18,
minZoom: 0,
opacity: 0.7,
name: 'GeoServer Band1',
});

mapInstance.overlayMapTypes.insertAt(0, wmsOverlay);
}, []);

return (


{/* You can add markers, search boxes, etc. here */}


);
};

export default MapWithWmsOverlay;


Подробнее здесь: https://stackoverflow.com/questions/796 ... iple-bands