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
 module.exports = function (webpackEnv) {
...
return {
...
resolve: {
alias: {
// Cesium module name
cesium: path.resolve(__dirname, '../node_modules/cesium/Source')
}
}
}
}
2、添加 static files 管理
 const CopyWebpackPlugin = require('copy-webpack-plugin');

 module.exports = function (webpackEnv) {
...
return {
...
resolve: {
alias: {
// Cesium module name
cesium: path.resolve(__dirname, '../node_modules/cesium/Source')
}
},
plugins: [
...
// Copy Cesium Assets, Widgets, and Workers to a static directory
new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', '../Build/Cesium/Workers'), to: 'Workers' } ]),
new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Assets'), to: 'Assets' } ]),
new CopyWebpackPlugin([ { from: path.join('node_modules/cesium/Source', 'Widgets'), to: 'Widgets' } ]),
new webpack.DefinePlugin({
// Define relative base path in cesium for loading assets
CESIUM_BASE_URL: JSON.stringify('')
})
]
}
}
七、Hello World
1、src/index.js 中引入样式
import 'cesium/Widgets/widgets.css'
2、src/App.js 初始化地图
 import React, { Component } from 'react';
import Cesium from "cesium/Cesium"; class App extends Component {
componentDidMount() {
Cesium.Ion.defaultAccessToken = 'your_access_token';
const viewer = new Cesium.Viewer("cesiumContainer");
}
render() {
return (
<div id="cesiumContainer" />
);
}
} export default App;
 
环境如下:
node: v12.5.0
npm: 6.9.0
create-react-app: 3.0.1

react 地图可视化 cesium 篇的更多相关文章

  1. react 地图发布 cesium 篇

    上篇文章介绍了如何搭建 react cesium 开发环境.在开发环境下,项目一切运行正常.最近把项目打包发布出来,却遇见了 cesium 不能正确初始化.打开浏览器的调试面板,出现好多 404,资源 ...

  2. vue地图可视化 ArcGIS篇

    ArcGIS for javascript开发心得 本次实例中采用ArcGIS for javascript3.24版本,由于版本3与4在API等存在较大区别,就不一一列举,详细区别看官方解释arcg ...

  3. vue 地图可视化 maptalks 篇

    Maptalks 项目是一个 HTML5 的地图引擎, 基于原生 ES6 Javascript 开发: - 二三维一体化地图, 通过二维地图的旋转 /倾斜增加三维视角 - 插件化设计, 能与其他图形库 ...

  4. 七天接手react项目 系列 —— 尾篇(antd 和 mobx)

    其他章节请看: 七天接手react项目 系列 尾篇 前面我们依次学习了 react 基础知识.react 脚手架创建项目.react 路由,已经花费了不少时间,但距离接手 spug_web 项目还有一 ...

  5. 百度地图总结第二篇--POI检索功能

    简单介绍: 眼下百度地图SDK所集成的检索服务包含:POI检索.公交信息查询.线路规划.地理编码.行政区边界数据检索.在线建议查询.短串分享(包含POI搜索结果分享.驾车/公交/骑行/步行路线规划分享 ...

  6. React入门看这篇就够了

    摘要: 很多值得了解的细节. 原文:React入门看这篇就够了 作者:Random Fundebug经授权转载,版权归原作者所有. React 背景介绍 React 入门实例教程 React 起源于 ...

  7. [转]React入门看这篇就够了

    摘要: 很多值得了解的细节. 原文:React入门看这篇就够了 作者:Random Fundebug经授权转载,版权归原作者所有. React 背景介绍 React 入门实例教程 React 起源于 ...

  8. 三维GIS引擎地图可视化渲染方案设计

    1.GIS地图可视化流程 GIS地图可视化就是将空间数据转化为地图数据再进行交互处理的方法,下图一展示了地图可视化的可编程渲染的典型管道,原始空间数据必须处理为图形API支持基础图元用以地图渲染.下图 ...

  9. 【实战】通过Python实现疫情地图可视化

    目录 一. json模块 二.通过Python实现疫情地图可视化 2.将json格式的数据保存到Excel 3.应用pyecharts进行数据可视化 一. json模块 JSON(JavaScript ...

随机推荐

  1. (五十一)c#Winform自定义控件-文字提示-HZHControls

    官网 http://www.hzhcontrols.com 前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. GitHub:https://github.com/kww ...

  2. .Netcore Swagger - 解决外部库导致的“Actions require an explicit HttpMethod binding for Swagger 2.0”

    现象: 项目中导入Ocelot后,swagger页面无法正常显示,查看异常发现 Ocelot.Raft.RaftController 中的 Action 配置不完全,swagger扫描时不能正确生成 ...

  3. git命令教程

    git教程笔记 Git是什么? Git是一个分布式版本控制系统 版本控制方式 集中式版本控制:从版本库中先取得最新的版本,改完之后再上传到版本库中,需要联网 分布式版本控制:每个合作者电脑上都有一个版 ...

  4. JVM从入门开始深入每一个底层细节

    1 官网 1.1 寻找JDK文档过程 www.oracle.com -> 右下角Product Documentation -> 往下拉选择Java -> Java SE docum ...

  5. Unrecognized header format %

    <VirtualHost *:*> RequestHeader set "X-Forwarded-Proto" expr=%{REQUEST_SCHEME} </ ...

  6. CSS学习笔记-边框图片等属性

      1.边框图片:        1.1含义:            告诉浏览器指定一张图片作为边框        1.2格式:             border-image-source:url ...

  7. Android MediaPlayer 在 6.0 以上版本使用倍速播放功能说明

    Android MediaPlayer 在API 23即6.0版本开始支持倍速播放,下面我们来介绍一下如何使用MediaPlayer进行倍速播放. 一.核心接口 MediaPlayer.setPlay ...

  8. nginx——keepalived

    nginx--keepalived 1.keepalived高可用基本概述 什么是高可用 一般是指2台机器启动着完全相同的业务系统,当有一台机器down机了,另外一台服务器就能快速的接管,对于访问的用 ...

  9. NFS共享储存

    目录 NFS 为什么要使用共享存储 集群没有共享存储的情况 集群有共享存储 NFS的工作原理 NFS部署 1.环境准备 2.关闭防火墙和selinux 3.部署nfs服务端 4.启动rpcbind 5 ...

  10. none 和 host 网络的适用场景

    我们会首先学习 Docker 提供的几种原生网络,以及如何创建自定义网络.然后探讨容器之间如何通信,以及容器与外界如何交互. Docker 网络从覆盖范围可分为单个 host 上的容器网络和跨多个 h ...