Vue + ArcGIS API for JavaScript 构建前端GIS应用(一)

写这篇总结的意义:总结,回顾,反思项目进行过程和这套“Vue + ArcGIS API for JavaScript”GIS前端应用技术路线,从项目与技术两个方面积累经验,寻找知识缺陷和项目优化空间,在总结的过程当中学习。
  • 技术路线的选择—vue + arcgis js api
  • 技术学习内容汇总

技术路线的选择—vue + arcgis js api


项目的技术路线是使用Vue+ArcGIS API for JavaScript构建一套gis前端应用,更加具体的技术路线其实是 vue + vue-cli + vue-router + vuex + antd for vue + arcgis js api ,应用到了vue技术栈加上了最新版4.11的arcgis js api。最核心的问题就是vue与基于dojo开发的amd模式的api怎么集成?集成以后怎么使用?使用的时候会不会出现不少坑?本文做为全方位的总结,但愿思路完整,因此仍是从头提及。javascript

Vue是目前前端三大流行框架之一(还包括React,Angular,来源于道听途说),她和React同样是一个表现层框架,专一于页面的渲染,而且,她和React同样都具备声明式渲染、组件化的特征。我是先接触React再接触Vue的,二者不少类似之处,至于说Vue学起来更容易轻松,我没有什么深切的体验,但确实Vue的中文资料更加丰富,毕竟算是国产。我跟单位的大师讨论过相关问题,我说Vue蛮好用的用户量貌似也蛮大,他说Vue只是在中国用户量大而已,他更偏向于相信大厂。无论怎么说,以此次项目对Vue的使用体验挺好。前端

Arcgis一直以来在gis领域算的上垄断地位,gis专业学生学校里学的,不少相关单位用的,都是Arcgis。他的产品体系庞大,从桌面端、客户端,到服务器,到在线服务,到大数据,到人工智能与gis相关或不那么相关的都有,她是成熟的gis商业软件,选她选的是靠谱。毕竟是美国的商业软件,过分依赖不是什么好事,一是钱的事,二是产权的事,愈来愈多开发者选择使用开源gis前端api,包括leaflet、mapbox等等。本次项目没有使用开源gis的要求,Arcgis天然是最好的选择。vue

技术学习内容汇总


单位以前没有使用这套技术路线进行过项目,甚至没有用vue作过项目,领导在项目前安排了大概3-4个小时的培训,相关技术的学习路线汇总,以下:java

  • 环境node

  • 预备知识体系webpack

    • ES6 - 重点看: let; const; 结构赋值; 对象扩展; 函数扩展; SET; MAP; Iterator; Promise; asnyc-await;
    • CommonJS amd 参考阮一峰模块化编程
    • MVVM模式
    • Webpack
    • Babel -包括polyfill
    • Sass
  • vue + vue router + vuex + axios + antd技术栈ios

    • vuegit

      • vue-loader
      • vue的生命周期
      • 父子组件之间通讯、子父组件间通讯
    • vue-cli 脚手架工程
    • vue-routeres6

      • 设置动态路由,动态获取js,减小一次性的加载量,提升页面响应速度
      • 路由传参
    • vuex
  • arcgis api 4.11