arcgis api 4.x for js 结合 react 入门开发系列"esri-loader"篇(附源码下载)
基于上篇的介绍,虽然有比较esri-loader、@arcgis/webpack-plugin,还是觉得有必要需要讲述一下“esri-loader”的开发模式,待大家体验后也会有更直观的感受。
本篇文章是配合react脚手架reate-react-app使用,无需自己配置复杂的Webpack的环境。废话不多说,直接上手。
项目搭建
- 安装create-react-app
npm install -g create-react-app
- 创建react应用
create-react-app是全局命令来创建react项目
- create-react-app xxx(你的项目名)
- 运行成功生成的文件目录
- npm start
- 运行成功则会打开
- 安装esri-loader
npm i esri-loader --save
- 代码开发
更多的详情见:GIS之家小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
arcgis api 4.x for js 结合 react 入门开发系列"esri-loader"篇(附源码下载)的更多相关文章
- arcgis api 4.x for js 结合 react 入门开发系列初探篇(附源码下载)
你还在使用 JQuery 或者 Dojo 框架开发 arcgis api 4.x for js 吗?想试试模块化开发吗?随着前端技术的发展,arcgis api 4.x for js 也有了结合 re ...
- arcgis api 4.x for js 集成 Echarts4 实现模拟迁徙图效果(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 4.x for js:esri 官网 api,里面详细的介绍 arcgis api 4.x 各个类 ...
- arcgis api 4.x for js 结合 react 入门开发系列react全家桶实现加载天地图(附源码下载)
基于两篇react+arcgis的文章介绍,相信大家也能体会两者的开发区别了.在“初探篇”中作者也讲述了自己的选择,故废话不多说,本篇带大家体验在@arcgis/webpack-plugin环境下,使 ...
- arcgis api 3.x for js 入门开发系列批量叠加 zip 压缩 SHP 图层优化篇(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 解决 textSymbol 文本换行显示(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 地图加载多个 SHP 图层压缩以及 json 文件展示(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列二十二地图模态层(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列十八风向流动图(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列十七在线天地图、百度地图、高德地图(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
随机推荐
- leetcode_1. Two Sum
leetcode_1. Two Sum 前言: 这段时间开始敲leetcode.我认为这并不仅仅只是为了应付笔试,面试.而是确实有着一定的意义. 尤其,你提交代码后,网站会多方面验证你的答案. 另外, ...
- java对象深复制、浅复制(深拷贝、浅拷贝)的理解
先看一个例子 User user1 = new User(); user1.setId("111"); Map<String, User> map1 = new Has ...
- capwap学习笔记——初识capwap(一)(转)
初识CAPWAP 2.1 CAPWAP简介 CAPWAP——Control And Provisioning of Wireless Access Points Protocol Specificat ...
- HTML学习之制作导航网页
前言 今天用HTML写了一个网址导航,源代码如下: <html> <head> <title>网址导航</title> </head> &l ...
- Springboot2.0(Spring5.0)中个性化配置项目上的细节差异
在一般的项目中,如果Spring Boot提供的Sping MVC不符合要求,则可以通过一个配置类(@Configuration)加上@EnableWebMvc注解来实现完全自己控制的MVC配置.但此 ...
- 安装mysql5.5.28的步骤 2017.6.27
http://blog.sina.com.cn/s/blog_7cd69a6501014x7h.html
- Python中str()与repr()函数的区别
在 Python 中要将某一类型的变量或者常量转换为字符串对象通常有两种方法,即str()或者 repr() . >>> a = 10 >>> type(str(a ...
- html总结01
lesson01~lesson02基础 <!DOCTYPE html> <html lang="en"> <!-- ################# ...
- Python中的r+和a+
问题描述 我打算更改文件user_list2中的内容, 本来的想法是加一个temp 文件. 先把user_list2的内容读取并修改后写入temp, 之后再写回来. 但是在读取内容并修改后写入temp ...
- Axure使用——创建折叠菜单
1.先添加动态面板 2.往动态面板中添加矩形 3.接着先隐藏下面的矩形(也就是你要折叠起来的内容) 4.一定要注意: 5.添加动态面板的状态 6.把之前做的那个矩形全部复制到state1中 7.把之前 ...




