cesium显示中文乱码

Cesium 是一个用于三维地图可视化的开源框架，它是基于 WebGL 技术实现的，因此默认情况下只支持英文字符集。要在 Cesium 中显示中文，需要使用支持中文字符集的字体文件，并指定该字体文件作为 Cesium 的默认字体。具体操作方法如下：

1. 下载一个支持中文字符集的字体文件，如微软雅黑或宋体。

2. 将字体文件放置到 Cesium 的字体文件目录下，该目录位于 Cesium 根目录下的 Build/Cesium/Assets/Fonts 目录中。

3. 在 Cesium 的初始化代码中，指定该字体文件作为默认字体。具体代码如下：

var viewer = new Cesium.Viewer('cesiumContainer', {
    // 指定中文字体文件
    baseLayerPicker: false,
    timeline: false,
    animation: false,
    fullscreenButton: false,
    geocoder: false,
    homeButton: false,
    infoBox: false,
    sceneModePicker: false,
    navigationHelpButton: false,
    navigationInstructionsInitiallyVisible: false,
    terrainShadows: Cesium.ShadowMode.DISABLED,
    imageryProvider: new Cesium.UrlTemplateImageryProvider({
        url: 'https://mt1.google.cn/vt/lyrs=s&x={x}&y={y}&z={z}',
        tilingScheme: new Cesium.WebMercatorTilingScheme(),
    }),
    // 指定中文字体文件
    baseLayerPicker: false,
    scene3DOnly: true,
    sceneMode: Cesium.SceneMode.SCENE3D,
    clockViewModel: new Cesium.ClockViewModel(clock),
    terrainProvider: terrainProvider,
    skyAtmosphere: new Cesium.SkyAtmosphere(),
    skyBox: new Cesium.SkyBox({
        sources: {
            positiveX: './skybox/px.jpg',
            negativeX: './skybox/nx.jpg',
            positiveY: './skybox/py.jpg',
            negativeY: './skybox/ny.jpg',
            positiveZ: './skybox/pz.jpg',
            negativeZ: './skybox/nz.jpg',
        },
    }),
    // 指定中文字体文件
    creditContainer: 'creditContainer',
    creditViewport: 'creditViewport',
    contextOptions: {
        webgl: {
            alpha: false,
            depth: true,
            stencil: false,
            antialias: true,
            premultipliedAlpha: true,
            preserveDrawingBuffer: false,
            failIfMajorPerformanceCaveat: false,
        },
    },
    // 指定中文字体文件
    imageryProviderErrorCallback: function (e) {
        console.error(e);
    },
    // 指定中文字体文件
    imageryProviderErrorMessage: '地图加载失败!请稍后再试',
    // 指定中文字体文件
    targetFrameRate: 60,
    // 指定中文字体文件
    requestRenderMode: true,
    // 指定中文字体文件
    maximumRenderTimeChange: 0.1,
    // 指定中文字体文件
    automaticallyTrackDataSourceClocks: false,
    // 指定中文字体文件
    orderIndependentTranslucency: true,
    // 指定中文字体文件
    shadows: false,
    // 指定中文字体文件
    terrainExaggeration: 1.0,
    // 指定中文字体文件
    mapProjection: new Cesium.WebMercatorProjection(),
    // 指定中文字体文件
    dataSources: dataSourceCollection,
    // 指定中文字体文件
    clock: clock,
    // 指定中文字体文件
    imageryProviderViewModels: imageryProviderViewModels,
    // 指定中文字体文件
    selectedImageryProviderViewModel: imageryProviderViewModels[0],
    // 指定中文字体文件
    terrainProviderViewModels: terrainProviderViewModels,
    // 指定中文字体文件
    selectedTerrainProviderViewModel: terrainProviderViewModels[0],
    // 指定中文字体文件
    fullscreenElement: document.body,
    // 指定中文字体文件
    showRenderLoopErrors: false,
    // 指定中文字体文件
    automaticallyAnimate: false,
    // 指定中文字体文件
    contextOptions: {
        webgl: {
            preserveDrawingBuffer: true,
            failIfMajorPerformanceCaveat: false,
        },
    },
    // 指定中文字体文件
    sceneModePickerViewModel: new Cesium.SceneModePickerViewModel(scene),
    // 指定中文字体文件
    infoBoxViewModel: new Cesium.InfoBoxViewModel(),
    // 指定中文字体文件
    selectionIndicatorViewModel: new Cesium.SelectionIndicatorViewModel(scene),
    // 指定中文字体文件
    homeButtonViewModel: new Cesium.HomeButtonViewModel(scene),
    // 指定中文字体文件
    baseLayerPickerViewModel: new Cesium.BaseLayerPickerViewModel({
        globe: globe,
        imageryProviderViewModels: imageryProviderViewModels,
        selectedImageryProviderViewModel: imageryProviderViewModels[0],
        terrainProviderViewModels: terrainProviderViewModels,
        selectedTerrainProviderViewModel: terrainProviderViewModels[0],
    }),
    // 指定中文字体文件
    navigationHelpButtonViewModel: new Cesium.NavigationHelpButtonViewModel({
        navigationHelpButton: $('#helpButton')[0],
    }),
    // 指定中文字体文件
    navigationViewModel: navigationViewModel,
    // 指定中文字体文件
    scene: scene,
    // 指定中文字体文件
    canvas: viewerCanvas,
    // 指定中文字体文件
    creditContainer: $('#creditContainer')[0],
});

在代码中需将字体文件路径替换为实际的路径，如下所示：

var viewer = new Cesium.Viewer('cesiumContainer', {
    // 指定中文字体文件
    baseLayerPicker: false,
    // ...
    // 指定中文字体文件
    creditContainer: 'creditContainer',
    creditViewport: 'creditViewport',
    // ...
    // 指定中文字体文件
});

这样就可以在 Cesium 中显示中文了。