zoukankan      html  css  js  c++  java
  • arcgis api 4.x for js 结合 react 入门开发系列初探篇(附源码下载)

    你还在使用 JQuery 或者 Dojo 框架开发 arcgis api 4.x for js 吗?想试试模块化开发吗?随着前端技术的发展,arcgis api 4.x for js 也有了结合 react.js、vue.js、es6 的开发模式。

    笔者由于项目开发前端选型 react.js,“不得以”尝试了几种 react+arcgis 的开发模式,现在比较流行的解决方案有 esri-loader@webpack/webpack-plugin

    笔者为避免 esri-loader 中繁琐的模块导出操作(loadModules),故选择的是后者,至于他们之间应用场景可以参看以下链接:https://community.esri.com/people/TWayson-esristaff/blog/2018/05/10/arcgiswebpack-plugin-vs-esri-loader。

    结论如下:

    好了,现在我们可以愉快的进行开发了:

    环境搭建

    • 安装 node.js,笔者版本为:10.13.0

    • 下载安装 vscode

    • 下载 demo,具体见文章尾部

    • demo 项目工程文件目录以及关键代码讲解

    public/index.html 系统主页
    public/assets 存放系统用到的静态资源,如图片。
    src/components 目录存放所有的组件,比如 WebMap 是我们的地图组件
    src/css 存放全局引用到的样式文件
    src/data存放系统组件需要的数据
    src/config 负责存储地图配置 
    src/index.js 负责将主页Dom节点接入
    package.json 记录了项目的配置信息,包括名称、版本、许可证等元数据,也会记录所需的各种模块,包括 执行依赖,和开发依赖
    .babelrc 负责对系统 javascript 语法编译配置
    webpack.config.js webpack 的配置文件

    • index.html 系统入库,初始化 root 的 Dom 节点

    • index.js 将 webmap 组件挂载至 root 节点,同时引入 esriConfig 的相关配置

    • WebMap.js

    • app.js 引入 jsapi 的 webmap、mapview、search 模块,并初始化,提供传递 view 的 dom 节点回调函数,在 webmap.js中调用

    更多的详情见GIS之家小专栏

    文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波

  • 相关阅读:
    jQuery-03
    正则表达式
    文件下载
    Shiro笔记
    MyBatis笔记
    Spring5笔记
    JavaScript笔记
    smartsvn安装和使用 —— svn工具linux版
    网易云歌单导入qq音乐
    svn版本回滚 —— svn使用笔记之三
  • 原文地址:https://www.cnblogs.com/giserhome/p/10707987.html
Copyright © 2011-2022 走看看