基于Next.js14+TS+Cesium搭建开发环境

lyliiyong

已于 2024-04-18 19:31:27 修改

阅读量333

点赞数 3

分类专栏： WebGIS 文章标签： typescript react.js reactjs 前端 es6 node.js

于 2024-04-17 23:33:04 首次发布

本文链接：https://blog.csdn.net/Liyong_liyong/article/details/137893331

版权

WebGIS 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

创建项目

npx create-next-app@latest

在这里插入图片描述

pnpm的使用

next.js项目默认使用npm管理项目依赖，想要使用pnpm则需要删除默认的node_modules和package-lock.json两个文件

在这里插入图片描述

使用pnpm重新下载依赖

安装项目所需依赖

pnpm install cesium
pnpm install copy-webpack-plugin
pnpm install process

配置`next.config.mjs`文件

import process from "process";
import CopyWebpackPlugin from "copy-webpack-plugin";
import path from "path";

const pathBuilder = (subpath) => path.join(process.cwd(), subpath);

/** @type {import("next").NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  webpack: (config, { webpack }) => {
    config.plugins.push(
      new CopyWebpackPlugin({
        patterns: [
          {
            from: pathBuilder("node_modules/cesium/Build/Cesium/Workers"),
            to: "../public/cesium/Workers",
            info: { minimized: true }
          }
        ]
      }),
      new CopyWebpackPlugin({
        patterns: [
          {
            from: pathBuilder("node_modules/cesium/Build/Cesium/ThirdParty"),
            to: "../public/cesium/ThirdParty",
            info: { minimized: true }
          }
        ]
      }),
      new CopyWebpackPlugin({
        patterns: [
          {
            from: pathBuilder("node_modules/cesium/Build/Cesium/Assets"),
            to: "../public/cesium/Assets",
            info: { minimized: true }
          }
        ]
      }),
      new CopyWebpackPlugin({
        patterns: [
          {
            from: pathBuilder("node_modules/cesium/Build/Cesium/Widgets"),
            to: "../public/cesium/Widgets",
            info: { minimized: true }
          }
        ]
      }),
      new webpack.DefinePlugin({ CESIUM_BASE_URL: JSON.stringify("/cesium") })
    );

    return config;
  },
  output: "standalone"
};
export default nextConfig;

编写组件

'use client';
import {ReactElement, useEffect} from 'react';
import * as Cesium from 'cesium';
import 'cesium/Source/Widgets/widgets.css';
import { TOKEN } from "@/utils";

Cesium.Ion.defaultAccessToken = TOKEN.CESIUM;

const CreateViewer = (): ReactElement => {
  useEffect(() => {
    initMapViewer()
  }, [])
  const initMapViewer =  () => {
    new Cesium.Viewer('cesium-viewer')
  }
  return <div id={'cesium-viewer'} style={{width: '100%', height: '100%'}}/>;
}
export default CreateViewer;