静态资源

cesium运行需要的静态资源

/**
 * 配置您的模块捆绑器以复制以下四个目录并将它们作为静态文件提供
 * node_modules/cesium/Build/Cesium/Workers
 * node_modules/cesium/Build/Cesium/ThirdParty
 * node_modules/cesium/Build/Cesium/Assets
 * node_modules/cesium/Build/Cesium/Widgets
 * --->
 * /static/cesium/Workers
 * /static/cesium/ThirdParty
 * /static/cesium/Assets
 * /static/cesium/Widgets
 */
window.CESIUM_BASE_URL = '/static/cesium/';

在 3D 城市中可视化拟建建筑

cesium.com/learn/cesiu…

加载模型的时候，重度使用 cesium ion平台，但是看其中相关声明，应该有可以加载本地模型的能力

1- 初始化应用

import '@Core/initializer';
import * as Cesium from 'cesium';
import 'cesium/Build/Cesium/Widgets/widgets.css';
import { getJson } from './api';

const rootEl = document.getElementById('map');

const viewer = new Cesium.Viewer(rootEl, {
    terrainProvider: Cesium.createWorldTerrain(),
});
// Add Cesium OSM Buildings.
viewer.scene.primitives.add(Cesium.createOsmBuildings());

// Fly the camera to Denver, Colorado at the given longitude, latitude, and height.
viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(-104.9965, 39.74248, 4000),
});

2-创建资源

geoJson

{
    "type": "FeatureCollection",
    "features": [        {            "type": "Feature",            "properties": {},            "geometry": {                "type": "Polygon",                "coordinates": [                    [                        [-104.9915474653244, 39.7357743115534],
                        [-104.99040752649307, 39.7357743115534],
                        [-104.99040752649307, 39.736754049216195],
                        [-104.9915474653244, 39.736754049216195],
                        [-104.9915474653244, 39.7357743115534]
                    ]
                ]
            }
        }
    ]
}

拖入到浏览器，完成上传

3- 将资源加载到场景

async function addBuildingGeoJSON() {
    try {
        // Load the GeoJSON file from Cesium ion.
        // 从 Cesium ion 服务基于assetId获取响应
        // Cesium.IonResource
        const geoJSONURL = await Cesium.IonResource.fromAssetId(asset_id);

        // 从GeoJSON创建几何体，并将其夹在地面上。
        // Cesium.GeoJsonDataSource
        const geoJSON = await Cesium.GeoJsonDataSource.load(geoJSONURL, { clampToGround: true });

        // 添加到场景
        const dataSource = await viewer.dataSources.add(geoJSON);

        // 默认情况下，CesiumJS 中的多边形将覆盖场景中的所有 3D 内容。
        // 修改多边形，使这种覆盖仅适用于地形，而不适用于 3D 建筑物。
        for (const entity of dataSource.entities.values) {
            entity.polygon.classificationType = Cesium.ClassificationType.TERRAIN as any;
        }

        // 移动相机，使多边形在视野中。
        viewer.flyTo(dataSource);
    } catch (error) {
        console.log('[地图加载geoJson错误]', error);
    }
}

addBuildingGeoJSON();

4-隐藏现场现有的 3D 建筑

// 使用 3D Tiles Styling 语言隐藏该区域中的个别建筑物。
buildingsTileset.style = new Cesium.Cesium3DTileStyle({
    // 创建一个样式规则来控制每个建筑物的“显示”属性。
    show: {
        conditions: [
            // 任何具有此 elementId 的建筑物都将具有“show = false”。
            ['${elementId} === 315710575', false],
            ['${elementId} === 315710573', false],
            // 如果建筑物没有这些 elementIds 之一，请设置“show = true”。
            [true, true],
        ],
    },
    // 为这个特定的 3D Tileset 设置默认颜色样式。
    // 对于任何具有 `cesium#color` 属性的建筑物，使用该颜色，否则将其设为白色。
    color: "Boolean(${feature['cesium#color']}) ? color(${feature['cesium#color']}) : color('#ffffff')",
});

5- 上传新的模型

cesium.com/public/lear…

1）上传

2）定义模型

在搜索框中输入建筑物地址 1250 Cherokee Street，然后单击下一步。

使用查看器上的控件，在视觉上定位和旋转建筑物，使其与下面的卫星图像对齐。您的最终设置应大致为：

• Longitude: -104.9909
• Latitude: 39.73579
• Height: 1577
• Heading: -8

6-将模型添加到场景中

// 添加您从 Cesium ion 帐户创建的 3D Tileset。
const newBuildingTileset = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(asset_id),
    })
);

// 将相机移动到新建筑物
viewer.flyTo(newBuildingTileset);

7-创建切换模型的按钮

// 创建一个切换模型的按钮
const style = document.createElement('style');
style.innerHTML = `
#toggle-building { z-index: 1; position: fixed; top: 5px; left: 5px; }  
`;
const btn = document.createElement('button');
btn.onclick = () => {
    newBuildingTileset.show = !newBuildingTileset.show;
};
btn.innerHTML = '点击切换模型';

mainEl.append(style, btn);