Cesium 天地图集成

Cesium 是一个开源的 JavaScript 库，用于创建高性能的 3D 地球和地图可视化应用，支持跨平台、跨浏览器运行，无需插件即可实现地理空间数据的动态展示。天地图（MAPWORLD）是国家地理信息公共服务平台，是自然资源部门向社会提供各类在线地理信息公共服务、推动地理信息数据开放共享的政府网站；是中国区域内基础地理信息数据资源最全的中国自主的互联网地图服务网站，是“数字中国”的重要组成部分；可为政府、企业、公众提供权威、标准、统一的地理信息服务。

在 Cesium 中集成天地图作为底图，运行效果如下图所示

VUE 案例

添加区块组件

在页面上添加区块组件，用于显示地图，如下图所示

地图全屏显示的设置方法

• 地图区块高度设置为100%，如上图所示
• 页面组件的自动充满设置为是，如下图所示

显示地图

在页面组件的“初次渲染完成”事件中写代码，显示地图

初次渲染完成事件的 JS 代码如下

let onPageReady = async (event) => {
    await initMapEnv();
    initMap();
}

initMapEnv 方法用于加载 Cesium JS 和 CSS，代码如下

let initMapEnv = () => {
    return new Promise(function (resolve, reject) {
        if (window.Cesium) {
            resolve();
            return;
        }
        let script = document.createElement("script");
        script.onload = function () {
            let link = document.createElement("link");
            link.onload = function () {
                resolve();
            }
            link.href = "https://cesium.com/downloads/cesiumjs/releases/1.103/Build/Cesium/Widgets/widgets.css";
            link.rel = "stylesheet";
            document.head.appendChild(link);
        }
        script.src = "https://cesium.com/downloads/cesiumjs/releases/1.103/Build/Cesium/Cesium.js";
        document.head.appendChild(script);
    });
}

initMap 方法用于初始化 Cesium Viewer，代码如下

• 其中的 Cesium.Ion.defaultAccessToken 请到 Cesium 申请
• 这一句代码 new Cesium.Viewer('gis-div', {}) 中的 gis-div 是显示地图区块组件的 id 属性的值

let initMap = () => {
    Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ZDg4OWVjZS05YWU0LTQzOTctYTZmNS03NmJlNzA5MDA0MGYiLCJpZCI6MzM0NDAwLCJpYXQiOjE3NTU4NTI2NzB9.lG_WreMyylQnJ18zSAWpW0BE0MqUNI1FxZVf1LJkKTI';
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
        73.497323964,
        18.159432999,
        135.088275076,
        53.5620897340001
    );

    let tdtV = new Cesium.ProviderViewModel({
        name: "天地图矢量",
        iconUrl: Cesium.buildModuleUrl(
            $page.getUIUrl("$UI/pcx/map/images/vec.png")
        ),
        tooltip: "天地图矢量",
        creationFunction: function () {
            return [getTianditu("vec", "w", Cesium), getTianditu("cva", "w", Cesium)];
        },
    });
    let tdtI = new Cesium.ProviderViewModel({
        name: "天地图影像",
        iconUrl: Cesium.buildModuleUrl(
            $page.getUIUrl("$UI/pcx/map/images/img.png")
        ),
        tooltip: "天地图影像",
        creationFunction: function () {
            return [getTianditu("img", "w", Cesium), getTianditu("cia", "w", Cesium)];
        },
    });

    let viewer = new Cesium.Viewer('gis-div', {
        animation: false, // 动画小组件
        baseLayerPicker: true, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
        fullscreenButton: false, // 全屏组件
        vrButton: false, // VR模式
        geocoder: false, // 地理编码（搜索）组件
        homeButton: true, // 首页，点击之后将视图跳转到默认视角
        infoBox: false, // 信息框
        sceneModePicker: true, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
        selectionIndicator: false, //是否显示选取指示器组件
        timeline: false, // 时间轴
        navigationHelpButton: false, // 帮助提示，如何操作数字地球。
        // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
        navigationInstructionsInitiallyVisible: false,
        sceneMode: Cesium.SceneMode.SCENE2D,
        selectedImageryProviderViewModel: tdtI,
        // terrainProvider: Cesium.createWorldTerrain(),
        mapProjection: new Cesium.WebMercatorProjection(Cesium.Ellipsoid.WGS84)
    });

    viewer._cesiumWidget._creditContainer.style.display = "none";

    viewer.baseLayerPicker.viewModel.imageryProviderViewModels = [tdtI, tdtV];

    let entity = new Cesium.Entity({
        rectangle: {
            coordinates: Cesium.Rectangle.fromDegrees(73.497323964,
                18.159432999,
                135.088275076,
                53.5620897340001),
            material: Cesium.Color.GREEN.withAlpha(0),
            height: 0,
            outline: false,
        },
    });

    let heading = Cesium.Math.toRadians(0.0);
    let pitch = Cesium.Math.toRadians(0.0);
    let range = 0;
    viewer.zoomTo(entity, new Cesium.HeadingPitchRange(heading, pitch));
}

getTianditu 方法用于加载天地图，其中的 tiandituAppKey 请到天地图开发资源申请

let getTianditu = (maptype, crs, Cesium) => {
    let tiandituAppKey = '72f11409c17a473044dfcb1c2f090762';
    let option = {
        url: "https://{s}.tianditu.gov.cn/" + maptype + "_" + crs + "/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=" + maptype + "&tileMatrixSet=" + crs + "&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles&tk=" + tiandituAppKey,
        subdomains: [
            "t0",
            "t1",
            "t2",
            "t3",
            "t4",
            "t5",
            "t6",
            "t7"
        ],
    }
    return new Cesium.UrlTemplateImageryProvider(option)
}

React 案例

添加区块组件

在页面上添加区块组件，用于显示地图，如下图所示

地图全屏显示的设置方法

• 地图区块高度设置为100%，如上图所示
• 页面组件的自动充满设置为是，如下图所示

显示地图

在页面组件的“初次渲染完成”事件中写代码，显示地图

初次渲染完成事件的 JS 代码如下

    onPageReady = async (event) => {
        await this.initMapEnv()
        this.initMap();
    }

initMapEnv 方法用于加载 Cesium JS 和 CSS，代码如下

    initMapEnv = () => {
        return new Promise(function (resolve, reject) {
            if (window.Cesium) {
                resolve();
                return;
            }
            let script = document.createElement("script");
            script.onload = function () {
                let link = document.createElement("link");
                link.onload = function () {
                    resolve();
                }
                link.href = "https://cesium.com/downloads/cesiumjs/releases/1.103/Build/Cesium/Widgets/widgets.css";
                link.rel = "stylesheet";
                document.head.appendChild(link);
            }
            script.src = "https://cesium.com/downloads/cesiumjs/releases/1.103/Build/Cesium/Cesium.js";
            document.head.appendChild(script);
        });
    }

initMap 方法用于初始化 Cesium Viewer，代码如下

• 其中的 Cesium.Ion.defaultAccessToken 请到 Cesium 申请
• 这一句代码 new Cesium.Viewer('gis-div', {}) 中的 gis-div 是显示地图区块组件的 id 属性的值

    initMap = () => {
        Cesium.Ion.defaultAccessToken = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI0ZDg4OWVjZS05YWU0LTQzOTctYTZmNS03NmJlNzA5MDA0MGYiLCJpZCI6MzM0NDAwLCJpYXQiOjE3NTU4NTI2NzB9.lG_WreMyylQnJ18zSAWpW0BE0MqUNI1FxZVf1LJkKTI';
        Cesium.Camera.DEFAULT_VIEW_RECTANGLE = Cesium.Rectangle.fromDegrees(
            73.497323964,
            18.159432999,
            135.088275076,
            53.5620897340001
        );

        let tdtV = new Cesium.ProviderViewModel({
            name: "天地图矢量",
            iconUrl: Cesium.buildModuleUrl(
                this.getUIUrl("$UI/pcx/map/images/vec.png")
            ),
            tooltip: "天地图矢量",
            creationFunction: () => {
                return [this.getTianditu("vec", "w", Cesium), this.getTianditu("cva", "w", Cesium)];
            },
        });
        let tdtI = new Cesium.ProviderViewModel({
            name: "天地图影像",
            iconUrl: Cesium.buildModuleUrl(
                this.getUIUrl("$UI/pcx/map/images/img.png")
            ),
            tooltip: "天地图影像",
            creationFunction: () => {
                return [this.getTianditu("img", "w", Cesium), this.getTianditu("cia", "w", Cesium)];
            },
        });

        let viewer = new Cesium.Viewer('gis-div', {
            animation: false, // 动画小组件
            baseLayerPicker: true, // 底图组件，选择三维数字地球的底图（imagery and terrain）。
            fullscreenButton: false, // 全屏组件
            vrButton: false, // VR模式
            geocoder: false, // 地理编码（搜索）组件
            homeButton: true, // 首页，点击之后将视图跳转到默认视角
            infoBox: false, // 信息框
            sceneModePicker: true, // 场景模式，切换2D、3D 和 Columbus View (CV) 模式。
            selectionIndicator: false, //是否显示选取指示器组件
            timeline: false, // 时间轴
            navigationHelpButton: false, // 帮助提示，如何操作数字地球。
            // 如果最初应该看到导航说明，则为true；如果直到用户明确单击该按钮，则该提示不显示，否则为false。
            navigationInstructionsInitiallyVisible: false,
            sceneMode: Cesium.SceneMode.SCENE2D,
            selectedImageryProviderViewModel: tdtI,
            // terrainProvider: Cesium.createWorldTerrain(),
            mapProjection: new Cesium.WebMercatorProjection(Cesium.Ellipsoid.WGS84)
        });

        viewer._cesiumWidget._creditContainer.style.display = "none";

        viewer.baseLayerPicker.viewModel.imageryProviderViewModels = [tdtI, tdtV];

        let entity = new Cesium.Entity({
            rectangle: {
                coordinates: Cesium.Rectangle.fromDegrees(73.497323964,
                    18.159432999,
                    135.088275076,
                    53.5620897340001),
                material: Cesium.Color.GREEN.withAlpha(0),
                height: 0,
                outline: false,
            },
        });

        let heading = Cesium.Math.toRadians(0.0);
        let pitch = Cesium.Math.toRadians(0.0);
        let range = 0;
        viewer.zoomTo(entity, new Cesium.HeadingPitchRange(heading, pitch));
    }

getTianditu 方法用于加载天地图，其中的 tiandituAppKey 请到天地图开发资源申请

    getTianditu = (maptype, crs, Cesium) => {
        let tiandituAppKey = '72f11409c17a473044dfcb1c2f090762';
        let option = {
            url: "https://{s}.tianditu.gov.cn/" + maptype + "_" + crs + "/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=" + maptype + "&tileMatrixSet=" + crs + "&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles&tk=" + tiandituAppKey,
            subdomains: [
                "t0",
                "t1",
                "t2",
                "t3",
                "t4",
                "t5",
                "t6",
                "t7"
            ],
        }
        return new Cesium.UrlTemplateImageryProvider(option)
    }

案例位置

桌面-地图类案例-cesium天地图.w