Problem in Loading Module SceneTransforms.wgs84ToWindowCoordinates

CesiumJS
1

Hello Community,
I am new to JavaScript and Cesium and trying to make a web application. I am unable to load SceneTransforms.wgs84ToWindowCoordinates and getting this error:

Uncaught TypeError: cesium__WEBPACK_IMPORTED_MODULE_9__.default.wgs84ToWindowCoordinates is not a function

Piece of Code:

  const heatmapInstance = h337.create({
      container: heatmapDiv,
      radius: 15
  });

  const heatmapPoints = heatmapData.map(data => {
      const cartographic = Cesium.Cartographic.fromDegrees(data.lng, data.lat);
      const projected = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude);
      const { x, y } = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene, projected);
      return { x, y, value: data.intensity };
  });

  heatmapInstance.setData({ max: 1, data: heatmapPoints });

  const heatmapTexture = new Cesium.Material({
      fabric: {
          type: 'Image',
          uniforms: {
              image: heatmapDiv
          }
      }
  });

I have installed Webpack, Heatmap, Cesium and related modules/libraries. Please suggest the changes or additional lines of code needed

2

I think the function is renamed in previous versions.
Use SceneTransforms.worldToWindowCoordinates, usage is identical:

const toScreenSpace= Cesium.SceneTransforms.worldToWindowCoordinates(viewer.scene, cartesien3value);

https://cesium-com.translate.goog/learn/cesiumjs/ref-doc/SceneTransforms.html?_x_tr_sl=en&_x_tr_tl=tr&_x_tr_hl=tr&_x_tr_pto=sc

3

Thank you for the help but the next few line of code that are dependent are giving me this error:
Uncaught DeveloperError {name: 'DeveloperError', message: "fabric: uniform 'image' has invalid type.", stack: 'Error\n at new DeveloperError (webpack://cesium_…:32)\n at http://localhost:8081/app.js:13830:37'}message: "fabric: uniform 'image' has invalid type."name: "DeveloperError"stack: "Error\n at new DeveloperError (webpack://cesium_webpack_tutorial/./node_modules/@cesium/engine/Source/Core/DeveloperError.js?:44:11)\n at createUniform (webpack://cesium_webpack_tutorial/./node_modules/@cesium/engine/Source/Scene/Material.js?:1050:11)\n at createUniforms (webpack://cesium_webpack_tutorial/./node_modules/@cesium/engine/Source/Scene/Material.js?:1035:7)\n at initializeMaterial (webpack://cesium_webpack_tutorial/./node_modules/@cesium/engine/Source/Scene/Material.js?:673:3)\n at new Material (webpack://cesium_webpack_tutorial/./node_modules/@cesium/engine/Source/Scene/Material.js?:376:3)\n at createHeatmap (webpack://cesium_webpack_tutorial/./src/index.js?:78:26)\n at eval (webpack://cesium_webpack_tutorial/./src/index.js?:95:1)\n at ./src/index.js (http://localhost:8081/app.js:697:1)\n at __webpack_require__ (http://localhost:8081/app.js:12747:32)\n at http://localhost:8081/app.js:13830:37"[[Prototype]]: Error
The code:

heatmapInstance.setData({ max: 1, data: heatmapPoints });

  const heatmapTexture = new Cesium.Material({
      fabric: {
          type: 'Image',
          uniforms: {
              image: heatmapDiv
          }
      }
  });

  viewer.entities.add({
      rectangle: {
          coordinates: Cesium.Rectangle.fromDegrees(77.63, 12.93, 77.71, 12.97),
          material: heatmapTexture
      }
  });
4

From the code that you posted, it is not clear what heatmapDiv is. But based on the name, it may be a <div>, but it has to be an image.