1. npm 命令
mkdir react-webpack-openlayer cd react-webpack-openlayer npm init npm i react react-dom -D npm i webpack webpack-cli webpack-dev-server -D npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev npm i css-loader style-loader npm i ol
2.package.json
{ "name": "react-webpack-openlayer", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "webpack-dev-server" }, "author": "", "license": "ISC", "dependencies": {}, "devDependencies": { "@babel/core": "^7.4.4", "@babel/preset-env": "^7.4.4", "@babel/preset-react": "^7.0.0", "babel-loader": "^8.0.6", "css-loader": "^2.1.1", "ol": "^5.3.2", "react": "^16.8.6", "react-dom": "^16.8.6", "style-loader": "^0.23.1", "webpack": "^4.31.0", "webpack-cli": "^3.3.2", "webpack-dev-server": "^3.3.1" } }
3.webpack.config.js
const path = require('path') module.exports = { devtool: "source-map", entry: { entry: './src/Main.js', }, output: { path: __dirname, filename: 'index1.js' }, resolve: { alias: { src: path.resolve(__dirname, 'src/') } }, module: { rules: [ { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader' }, { test: /\.css$/, exclude: /node_modules/, use: [ 'style-loader', { loader: 'css-loader', options: { modules: true, }, }, ], } ] }, devServer: { inline: true, open: 'Chrome' } }
4..babelrc
{ "presets": ["@babel/preset-env", "@babel/preset-react"] }
5.index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Roles and Privileges</title> </head> <body style="background-color: #f9fafc; margin:0px;"> <div id="app"></div> <script type="text/javascript" src="index1.js"></script> </body> </html>
6.Main.js
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render( <App/>, document.getElementById('app') )
7.App.js
import React from 'react'; import Map from "./Map"; class App extends React.Component { render() { return (<div> <Map /> </div> ) } } export default App
8.Map.js
import React, { Component } from "react"; import Map from 'ol/Map.js'; import View from 'ol/View.js'; import TileLayer from 'ol/layer/Tile.js'; import XYZ from 'ol/source/XYZ.js'; import OlSourceOSM from "ol/source/OSM"; class PublicMap extends Component { constructor(props) { super(props); let modelDistribution = require('./config/modelDistribution.json'); this.mapConfig=modelDistribution.map this.initMap(); } componentDidMount() { this.olmap.setTarget("map"); } initMap(){ this.olmap = new Map({ target: null, layers: [ new TileLayer({ source: new XYZ({ url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}" }) }) ], view: new View({ projection: 'EPSG:4326', center:[-83.44, 42.60], zoom: 12 }) }); } render() { return ( <div id="map" style={{ width: "100%", height: "800px" }}> </div> ); } } export default PublicMap;
9. 效果图:
相关推荐
此项目包含了 路由配置(嵌套路由) fetch请求接口 redux状态管理 webpack代理设置 蚂蚁金服ant使用 调用h5+手机摄像头功能,绝对物超所值,页面简单 但是架子稳定 涉及的知识全面
从头写React-like框架的工程搭建实现 最近在网上看到了 Build your own React 这篇文章,作者从零开始实现了一个简易类 React 框架,虽然没有过多的优化,但 React 中的核心思想 Concurrent Mode,Fiber ...
react 框架搭建,包含react,react-redux,expession等等等
基于webpack的react脚手架搭建
本人项目使用的react大环境,已经集成好了各种所需的模块,直接下载根目录npm install即可使用,集成了redux,而且各种数据流已经构建完毕!
react框架搭建.xmind
react-leaflet-heatmap-layer, 在反应传单中,heatmaps的自定义层 react-leaflet-heatmap-layerreact-leaflet-heatmap-layer 提供了一个简单的<HeatmapLayer/> 组件,用于在 react-leaflet 映射中创建热图图层。
根据react+mobx+antd搭建的项目流程说明,新手学习react可用,配套代码请另行下载
react+antd搭建前端管理框架(***支持响应式***),主要模块分为:菜单、选项卡、面包屑;通过路由监听,实现三个模块之间的联动(同时监听浏览器);状态采用react-redux进行集中管理。目前只包含前端代码,未与...
electron react react-router mobx webpack 搭建的脚手架工程
这个仓库我将会记录如何从零到一搭建出一个基于react和webpack的项目的开发环境,算是对自己工作以及学习的一种记录,同时也希望可以帮助到一些希望自己搭建项目却不知如何下手的同学。
根据react+mobx+antd搭建的项目,新手学习react可用,配套文字说明请另行下载
基于react框架搭建网易新闻Web App
roadhog 是一个 cli 工具,提供 server、 build 和 test 三个命令,分别用于本地调试和构建,...命令行体验和 create-react-app 一致,配置略有不同,比如默认开启 css modules,然后还提供了 JSON 格式的配置方式。
脚手架工具搭建的react实现路由和状态机的简单demo,项目是用creat-react-app脚手架搭建的一个最简单的demo,简单实现了路由和状态机
在windows搭建RN环境
课时1React Native架构和原理的简单介绍15:52 课时2macOS iOS环境搭建18:38 课时3ios模拟器的使用和注意事项05:20 课时4macOS Android环境搭建16:27 课时5Windows Android环境搭建09:43 课时6Android设备的使用和...
IT培训机构原创视频,真实上课环境现场录制,通过该视频可实现利用React脚手架搭建项目。 React脚手架和Vue脚手架类似,都是用来帮助程序员快速创建一个基于React的模板项目
react项目搭建