WMS Imagery Provider for U.S. State borders and labels

CesiumJS
1

1. A concise explanation of the problem you’re experiencing.

I’m trying to overlay U.S. State Borders and Names layers onto the Bing Maps base layer. I’m pulling both layers from a public WMS service using WebMapServiceImageryProvider(). The borders are showing up fine, albeit a bit thick, but my bigger issue is the labels/names are showing up multiple times for each state.

The pic below shows my results in Cesium and my results in QGIS. Ultimately I would like it to look like QGIS.

I also included my code in the next section.

Thanks,

AQ

State Borders.jpg
State Borders.jpg1404×1450 715 KB

2. A minimal code example. If you’ve found a bug, this helps us reproduce and repair it.

var viewer = new Cesium.Viewer(‘cesiumContainer’, {

imageryProvider: Cesium.createWorldImagery(),

animation: false,

timeline: false,

fullscreenButton: false,

navigationHelpButton: false,

navigationInstructionsInitiallyVisible: false,

homeButton: false,

sceneModePicker: false,

requestRenderMode: true

});

var url = “https://carto.nationalmap.gov/arcgis/services/govunits/MapServer/WMSServer”;

//state borders

viewer.imageryLayers.add(

new Cesium.ImageryLayer(

new Cesium.WebMapServiceImageryProvider({

url: url,

layers: ‘22,2’,

parameters: {

version: ‘1.3.0’,

format: ‘image/png’,

transparent: true

},

maximumLevel: 16,

enablePickFeatures: false

}), {

minimumTerrainLevel: 3 //https://github.com/AnalyticalGraphicsInc/cesium/issues/6564

})

);

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.

Trying to make the map look better.

4. The Cesium version you’re using, your operating system and browser.

Cesium 1.59

Chrome Version 75.0.3770.100 (Official Build) (64-bit)

2

It looks like CesiumJS is just displaying the tiles returned by the server, which include the labels showing up many times when you zoom in. Are you using the same URL when testing in QGIS? Are there any settings you’re applying there to control how the labels show up?

3

Cesium requests multiple images in an attempt to get the “best” image data for oblique viewing angles where higher detail is desirable in the foreground and less useful in the background. As a result, Cesium may request multiple images that include the same state, each requiring the labeling engine to essentially replicate a label in each image response. QGIS is likely requesting a single image from the WMS.

You can see what’s happening by displaying the tile coordinates Cesium is using.

var viewer = new Cesium.Viewer(‘cesiumContainer’, {

imageryProvider: new Cesium.TileCoordinatesImageryProvider(),

animation: false,

timeline: false,

fullscreenButton: false,

navigationHelpButton: false,

navigationInstructionsInitiallyVisible: false,

homeButton: false,

sceneModePicker: true,

requestRenderMode: true

});

var url = “https://carto.nationalmap.gov/arcgis/services/govunits/MapServer/WMSServer”;

//state borders

viewer.imageryLayers.add(

new Cesium.ImageryLayer(

    new Cesium.WebMapServiceImageryProvider({

        url: url,

        layers: '22,2',

        parameters: {

            version: '1.3.0',

            format: 'image/png',

            transparent: true

        },

        maximumLevel: 16,

        enablePickFeatures: false

    }), {

    minimumTerrainLevel: 3 //https://github.com/AnalyticalGraphicsInc/cesium/issues/6564

})

);

``

The solution would be to have the ArcGIS server expose the data as a WMTS.

Scott

4

Thanks, Scott. Your explanation makes sense from my testing so far. I’ve been able to hack it a bit using WebMapServiceImageryProvider() by playing with the tile width/height settings and the min/max level settings, but its still not ideal. I’ll try to find a WMTS server offering this data.

Thanks,

AQ

5

you need to force the rendering engine to render labels at the centroid of the polygon in your WMS server.

for example, in GeoServer, you should use the following style.

image
image865×369 111 KB