layer[i].queueReprojectionCommands is not a function error (solved)

cywhale · October 25, 2020, 6:24am

Updated (20201027) I found a check of layer by

 layer.constructor.name === "SingleTileImageryProvider"

would fail after build (but ok in dev). So I mark and modify it, then everything work well both in dev and prod. So this problem got solved.

======================
I modify a smaller reproducible repo (on preactjs) for this problem:

The reproducible repo is https://github.com/cywhale/preact_cesium
Just clone it and npm install
develpment version is work well: (npm run dev)
After build (npm run build) and npm run serve, got the error as my problem.

The code about layer selection in a modal (icon in left-top corner on screen) is here:

github.com

cywhale/preact_cesium/blob/main/src/components/Layer/LayerModal.js

import { useEffect, useState, useRef } from 'preact/hooks';
import Color from 'cesium/Source/Core/Color.js';
import DefaultProxy from 'cesium/Source/Core/DefaultProxy';
import Rectangle from 'cesium/Source/Core/Rectangle';
import ImageryLayer from 'cesium/Source/Scene/ImageryLayer';
import ImageryLayerCollection from 'cesium/Source/Scene/ImageryLayerCollection';
import SingleTileImageryProvider from 'cesium/Source/Scene/SingleTileImageryProvider';
//import GridImageryProvider from 'cesium/Source/Scene/GridImageryProvider';
//import WebMapServiceImageryProvider from 'cesium/Source/Scene/WebMapServiceImageryProvider';
import TileCoordinatesImageryProvider from 'cesium/Source/Scene/TileCoordinatesImageryProvider';
import knockout from 'cesium/Source/ThirdParty/knockout.js';
import style from './style_layermodal';
import '../../style/style_layerctrl.scss';

const LayerModal = (props) => {
  const { viewer, baseName, userBase } = props;
  const { imageryLayers } = viewer;
  const layerctrlRef = useRef(null);

  const [viewModel, setModel] = useState({

This file has been truncated. show original

Put layers into viewModel

  const add_gbloverlay = (url, name, alpha, show, rectangle) => {
    const lay = new SingleTileImageryProvider({
...
});

Other codes are modified based on cesium sandcastle example: https://sandcastle.cesium.com/?src=Imagery%20Layers%20Manipulation.html

Any comments would be appreciated. Thanks a lot.

(Note: because I have aother problem for large bundle size on this forum Large bundle size
so I still output webpack-bundle-analyzer result in running. Please just skip it here.