How do I add material to a polygon I am importing from a geojson file?

CesiumJS
1

1. A concise explanation of the problem you're experiencing.
I am having trouble adding a custom image as material to a polygon being loaded in via GeoJsonDataSource.load. I have tried several of the methods shown in the tutorials and demos, but I cannot seem to get it right.

2. A minimal code example. If you've found a bug, this helps us reproduce and repair it.
GeoJson File:
{
  "type": "Polygon",
  "properties": {
    "tileName": "Tile1",
    "fileName": "tile1_1.tif",
    "prodDesc": "tile1_1",
    "volNum": "Vol 1"},
    "coordinates": [
      [
        [-82.25106048583983, 37.780158068579738],
        [-82.25106048583983, 37.853886068563355],
        [-82.177332485970908, 37.853886068563355],
        [-82.177332485970908, 37.780158068579738]
      ]
    ]
}

JavaScript:
var viewer = new Cesium.Viewer('cesiumContainer', {
  imageryProvider : Cesium.createTileMapServiceImageryProvider({
    url : Cesium.buildModuleUrl('Assets/Textures/NaturalEarthII')
  }),
  sceneMode : Cesium.SceneMode.SCENE2D,
  baseLayerPicker : false,
  geocoder : false
}
var entity = viewer.dataSources.add(Cesium.GeoJsonDataSource.load('http://127.0.0.1:PORT/PATH'));
entity.material = "PATH/TO/IMAGE";

3. Context. Why do you need to do this? We might know a better way to accomplish your goal.
I have several aerial shots and their corresponding shapfiles (which I converted to geojson files as polygon types) and would like to display these images on the map in their correct positions.

4. The Cesium version you're using, your operating system and browser.
Version: 1.42
OS: Windows 10
Browser: Edge 25

2

Hi there,

A few things:

1. GeoJsonDataSource.load will return a Promise with the DataSource, not the entity. The DataSource will have a collection of all the entities in the dataSource, so you need to get that first.

  1. Then, you need to get the PolygonGraphics from the entity to make changes to it’s properties.

  2. Set the material property to a ImageMaterialProperty, rather than setting it to the path.

Here’s a working example:

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

imageryProvider : Cesium.createTileMapServiceImageryProvider({

url : Cesium.buildModuleUrl(‘Assets/Textures/NaturalEarthII’)

}),

sceneMode : Cesium.SceneMode.SCENE2D,

baseLayerPicker : false,

geocoder : false

});

var geoJson = {

“type”: “Polygon”,

“properties”: {

“tileName”: “Tile1”,

“fileName”: “tile1_1.tif”,

“prodDesc”: “tile1_1”,

“volNum”: “Vol 1”},

“coordinates”: [

[

[-82.25106048583983, 37.780158068579738],

[-82.25106048583983, 37.853886068563355],

[-82.177332485970908, 37.853886068563355],

[-82.177332485970908, 37.780158068579738]

]

]

};

Cesium.GeoJsonDataSource.load(geoJson).then(function(dataSource) {

viewer.dataSources.add(dataSource);

var entity = dataSource.entities.values[0];

entity.polygon.material = new Cesium.ImageMaterialProperty({

image: ‘…/images/Cesium_Logo_overlay.png’

});

viewer.zoomTo(entity);

});

``

Thanks,

Gabby

3

Gabby,
This solution works wonderfully!
Thank you for your help.

Sincerely,
Ube Yout