• react 地图可视化 cesium 篇


    Vue Function-based API RFC 一出来,感觉 vue 越来越像 react 了。新立项目,决定尝试下 react.js。下面是 react 集成 cesium,核心部分是 webpack 的配置。
    一、安装 create-react-app
    npm install -g create-react-app
    二、react 工程创建
    create-react-app cesium-react
    三、cesium 安装
    npm install cesium --save

    四、copy-webpack-plugin 安装

    npm install copy-webpack-plugin --save-dev
    五、提取 webpack 配置文件
    create-react-app 创建的项目,默认会隐藏 webpack 的配置项,所以需要将 webpack 配置文件提取出来。
    npm run eject
    成功后,项目根目录下会多出二个文件夹,config scripts,其中 webpack 的配置文件 webpack.config.js 位于 config 文件夹。
    六、webpack 配置
     
    1、添加 Cesium module name
     1 module.exports = function (webpackEnv) {
     2     ...
     3     return {
     4         ...
     5         resolve: {
     6             alias: {
     7                 // Cesium module name
     8                 cesium: path.resolve(__dirname, '../node_modules/cesium/Source')
     9             }
    10         }
    11     }
    12 }
    2、添加 static files 管理
     1 const CopyWebpackPlugin = require('copy-webpack-plugin');
     2 
     3 module.exports = function (webpackEnv) {
     4     ...
     5     return {
     6         ...
     7         resolve: {
     8             alias: {
     9                 // Cesium module name
    10                 cesium: path.resolve(__dirname, '../node_modules/cesium/Source')
    11             }
    12         },
    13         plugins: [
    14             ...
    15             // Copy Cesium Assets, Widgets, and Workers to a static directory
    16             new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', '../Build/Cesium/Workers'), to: 'Workers' } ]),
    17             new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Assets'), to: 'Assets' } ]),
    18             new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Widgets'), to: 'Widgets' } ]),
    19             new webpack.DefinePlugin({
    20                 // Define relative base path in cesium for loading assets
    21                 CESIUM_BASE_URL: JSON.stringify('')
    22             })
    23         ]
    24     }
    25 }
    七、Hello World
    1、src/index.js 中引入样式
    import 'cesium/Widgets/widgets.css'
    2、src/App.js 初始化地图
     1 import React, { Component } from 'react';
     2 import Cesium from "cesium/Cesium";
     3 
     4 class App extends Component {
     5   componentDidMount() {
     6     Cesium.Ion.defaultAccessToken = 'your_access_token';
     7     const viewer = new Cesium.Viewer("cesiumContainer");
     8   }
     9   render() {
    10     return (
    11       <div id="cesiumContainer" />
    12     );
    13   }
    14 }
    15 
    16 export default App;
     
    环境如下:
    node: v12.5.0
    npm: 6.9.0
    create-react-app: 3.0.1
  • 相关阅读:
    html5表单pattern属性配合正则验证电话和手机号码
    关于a href传参的中文乱码问题
    jq点击事件改变全局变量
    a标签带参页面跳转并在跳转页面接收参数
    json字段不存在,手动添加键值对
    各种类型相互转换
    Caused by: com.mysql.cj.exceptions.InvalidConnectionAttributeException: The server time zone value '�й���׼ʱ��' is unrecognized or r
    微信公众号之微信登录失败,redirect_uri域名与后台配置不一致,错误代码10003
    前后端数据json交换的问题
    jQuery EasyUI 的editor组件使用
  • 原文地址:https://www.cnblogs.com/lifefriend/p/11132789.html
Copyright © 2020-2023  润新知