react脚手架创建的项目引入cesium

最新推荐文章于 2024-08-04 20:03:14 发布

呆呆键盘

最新推荐文章于 2024-08-04 20:03:14 发布

阅读量296

点赞数 1

文章标签： react.js 前端

本文链接：https://blog.csdn.net/weixin_43688414/article/details/139289833

版权

2024年5月29日全部版本最近可用

1.安装模块

npm install cesium
npm install copy-webpack-plugin --save-dev

2.webpack配置

2.1 先开启项目配置

npm run eject

2.2找到config文件的webpack.config.js 文件

2.3 引入copy-webpack-plugin

const CopyWebpackPlugin = require('copy-webpack-plugin');

2.4 新增配置

module.exports = function (webpackEnv) {
 ......
 return {
 	resolve: {
		......,
		alias: {
			......,
			'cesium': path.resolve('node_modules/cesium/Source'),
		},
	},
	plugins: [
		......,
		new CopyWebpackPlugin({
	        patterns: [
	          { from: "node_modules/cesium/Build/Cesium/Workers", to: "Workers" },
	          { from: "node_modules/cesium/Build/Cesium/ThirdParty", to: "ThirdParty" },
	          { from: "node_modules/cesium/Build/Cesium/Assets", to: "Assets" },
	          { from: "node_modules/cesium/Build/Cesium/Widgets", to: "Widgets" },
	        ],
	    }),
        new webpack.DefinePlugin({
          CESIUM_BASE_URL: JSON.stringify('/'),
        }),
	]
 }
}

3.cesium地图样式引入

import 'cesium/Widgets/widgets.css' // 引入

4.组件代码




import { useEffect, useRef } from "react";

import * as Cesium from "cesium/Cesium";

const CesiumMap = () => {
    const cesiumContainer = useRef(null)
    useEffect(() => {
        window.Cesium = Cesium;
        Cesium.Ion.defaultAccessToken = "" // https://ion.cesium.com/tokens?page=1  官网免费注册
        const viewer = new Cesium.Viewer(cesiumContainer.current, {
            animation: false, // 是否显示动画控件
            baseLayerPicker: false, // 是否显示图层选择控件
            fullscreenButton: false, // 是否显示全屏按钮
            geocoder: false, // 是否显示地名查找控件
            homeButton: false, // 是否显示Home按钮
            infoBox: false, // 是否显示信息框
            sceneModePicker: true, // 是否显示3D/2D选择器
            selectionIndicator: false, // 是否显示选取指示器组件
            timeline: false, // 是否显示时间轴
            navigationHelpButton: false, // 是否显示帮助信息按钮
            navigationInstructionsInitiallyVisible: false, // 是否显示导航指示
        })
        // 去掉Logo标签
        viewer._cesiumWidget._creditContainer.style.display = "none"
        return () => {
            viewer.destroy()
        }
    }, [])

    return (
          <div ref={cesiumContainer} style={{ width: '100%', height: '100%' }}></div>
    );
}
export default CesiumMap