How to Improve Text Clarity in WMS Imagery Layers for Historical Maps

CesiumJS
1

I’m displaying historical maps on a Cesium globe using WMS (Web Map Service) imagery layers. The maps contain important text elements (legends, labels, statistics) that become blurry and pixelated when users zoom in, making them difficult to read.
Here’s my uploaded image URL: https://eureka.cridb.com/media/2/22/229/2291/229170/it.jpg

It looks like this on the Globe

  1. Initial State

image
image1322×845 416 KB

  1. When I Zoomed in (review the url): Jam

Here’s my code for the display map on the cesium globe

const wmsUrl = `https://gis.cridb.com/api/wms?map=${mapUrl}\`;

const newProvider = new Cesium.WebMapServiceImageryProvider({
url: wmsUrl,layers: ‘warped’,
parameters: {
transparent: ‘true’,
format: ‘image/png’,
},
});

import { useCesium } from ‘resium’;

const { viewer } = useCesium();

viewer.imageryLayers.addImageryProvider(ip) // ip contains the newProvider’s value

Can you please help me to resolve this issue?

2

Hi @Gaurang_Devmurari,

I’m not sure I have an answer off-the-bat, but if you could provide a sandcastle example to reproduce the issue, that would help me troubleshoot. (If you can fill in the url here, that should do the trick)

That said, this seems like a resolution mismatch issue. I don’t know if that issue stems from what Cesium is rendering, or what the web map imagery provider is providing. It might help to specify the tileWidth and tileHeight parameters in the Cesium.WebMapServiceImageryProvider constructor options. Or, your imagery provider may have parameters for map resolution, DPI, etc that could help as well.

Hope that helps a bit.

Best,
Matt

3

Hi @mzschwartz5
I tried those parameters that you mentioned above.
Here are some cases that I tried:

  1. Ukraine famine (Holodomor) map (1929-1933) (Image)
    1. When I zoomed in on the text, it looked like a good, but when zoomed out then text does not look perfect. This record’s id is 229170. Please check this Screen Recording.
  2. Census racial map of Cleveland (2010) (Image)
    1. When I saw this image on the globe, it was displayed with the colourful pixelview.
      This record’s id is 219586. Please check this Screen Recording
  3. Washington-Rochambeau route to Yorktown (1781) (Image)
    1. When zoomed in or out, the text is not visible properly. This record’s id is 230206. Please check this Screen Recording

I updated the Sandcastle as you mentioned above.

4

It’s not entirely clear what the expectation is. Looking at one random example image that is provided by the server, at https://gis.cridb.com/api/wms?transparent=true&format=image%2Fpng&dpi=180&map_resolution=180&map=230206&service=WMS&version=1.1.1&request=GetMap&styles=&layers=warped&bbox=-77.34375%2C37.96875%2C-76.640625%2C38.671875&width=1024&height=1024&srs=EPSG%3A4326 , it looks like this:

Cesium wms
Cesium wms1024×1024 20.5 KB

This is what the server is delivering. CesiumJS can not magically improve this.

Some brainstorming:

  • The maps that you showed are single images
  • These images are generally “small” (except for the first one, which is a large JPEG, but could be made much smaller (without significant quality loss) and stored as a PNG
  • There is no concept of ~“level-of-detail” in all this. The images are what they are.

Depending on the goal, you could just … well, show that image :man_shrugging:

https://sandcastle.cesium.com/index.html#c=hVLbTuMwEP2VUZ5SVOyQRdwaKhC8rIRURIGnvLjx0A44cWQ7qcpq/x07FwkKElKciWfmnJy5UFlr4+AAhIUbtNSU8GJ0CXlUdLc8muUmr8IpdGUdtIRbNHAJFW4HBHvufPGIudGVE1ShyaPJHppKsUazuze6JYnG25IseraBaUnVWuEjKfz7NZMFVU9GxYELvLyNc7W94Bwbg2+CFYbkihW65CVKEjzl6R//JOGk3Ss54eTYa73Oo2lP8q83AJzD4+J2AdfytfEiGWNjxGDhRJB0MSp8GD2doltcG0QbH54nU0jTKRye+o/jZDL84n9nf+mCL19sBTkY2sEMWq1ajH/uVs/WMymx2x/G0Li7ENlnmMxCUQHeAZlQ9UZ4eMLOOtJ+uIw+UVgmpIy79MksmkaZdTuF81DcFfXL0/ixMMYdlrUSDi1fNcUbOlZY67VWGR8hmaQWSF7+sChQKGGtj7w0Si3pHfNonnGf/wWmtJB+QxYtGq8opGyO5ne9008t4/76HeW0VithPjF+AA

But there certainly could be use-cases where this is not sensibly possible.

So if the core of the question is how to convince that WMS server to provide “better” images, then I don’t know the answer off-hand. (There may also be better places to ask this - as I said, it’s not a CesiumJS issue. But maybe someone here has an idea or knows some magic deliverGoodQuality=true parameter that can be passed to that WMS server…)

5

Thanks @Marco13. I appreciated it.