专栏首页ArcGIS JS API开发【测评】 使用@arcgis/cli脚手架和esri-loader方式进行ArcGIS JS API开发的测评

【测评】 使用@arcgis/cli脚手架和esri-loader方式进行ArcGIS JS API开发的测评

本文主要针对于在Vue和React项目中使用esri-loader和@arcgis/cli脚手架进行ArcGIS JS API开发时,比较两种方式的不同,供各位参考。

概述

当我既写了esri-loader方式来进行ArcGIS JS API的开发文章,又写了@arcgis/cli脚手架的方式来进行ArcGIS JS API的开发文章之后,相信很多小伙伴看到后会产生“选择纠结症”,我到底该用哪种方式来进行ArcGIS JS API的开发呢?不要着急,我给你一个可供选择的参考,简单又实用:

  • 如果项目已经在进行实施,中途可能需要用到ArcGIS JS API中的相关功能模块,那就选择esri-loader方式;
  • 如果项目并未开始实施,但是后期会有ArcGIS JS API中的相关功能需求,推荐使用@arcgis/cli脚手架,当然,你也可以用esri-loader方式。

既然有两种方式可供选择,那我们简单来看下这两种方式的优势与不足。

相关测评内容

实际项目实施方面

根据文章开始所说,如果项目已经在实施,我们只能通过esri-loader方式来进行JS API的开发,因为此时JS API算是后期才引入到项目中的,我们的项目可能并不是一个整体的GIS项目,GIS相关功能模块只是系统中的一小部分,所以我们就没必要用@arcgis/cli脚手架构建一个完整的基于WebGIS框架的项目,这样会影响系统应有的架构,使系统架构的健壮性大大降低。 如果项目并未开始启动实施,并且明确知道此系统后期会有JS API的相关功能需求,而且此项目系统中GIS相关功能模块所占比重较大,那推荐使用@arcgis/cli脚手架来构建项目系统框架,因为我们可以看到,通过脚手架构建的项目应用中代码组织结构非常优秀,并且基于Webpack配备了完整的主流系统构建工具和代码检查工具。

主流技术方面

通过esri-loader方式进行JS API的开发时,其实我们很多情况下还在使用ES6甚至ES5的编码方式进行系统开发,项目系统中所用的各种主流插件是我们主动性地去增加配置的,换句话说,如果你不知道有什么主流技术,那你还是一直在啃技术老本,项目系统中并未引入主流的开发技术。 @arcgis/cli脚手架方式可不一样,它默认在你的项目代码中配置了Eslint、babel等主流插件,并且最重要的是,它的项目代码是用TypeScript来编写的,所以从这几点来看,脚手架方式开发JS API的过程中,所用到的开发技术是比较靠近现阶段主流开发技术的。

编码方式

esri-loader编码方式如前面所说,你可能在用ES6或者ES5在进行系统开发,然后我们JS API中的各个功能模块还是用基于Dojo的AMD方式来加载,并且实现全局引入加载很困难,代码如下:

        // 创建二维地图
        _createMapView: function() {
            const _self = this;
            const option = {
                url: gConfig.arcgis_jsapi_hosturl + 'init.js',
                css: gConfig.arcgis_jsapi_hosturl + 'esri/themes/light/main.css',
            };
            loadModules(['esri/WebMap',
                'esri/views/MapView',
            ], option)
                .then(([WebMap, MapView]) => {
                    
                    // 实例化地图
                    const webmap = new WebMap({
                        portalItem: {
                            // autocasts as new PortalItem()
                            id: gConfig.largeScreenWebMapID,
                        },
                    });
​
                    const view = new MapView({
                        container: 'mapViewContent',
                        map: webmap,
                        zoom: _self.mapviewLevel,
                        center: [102.714408, 25.043706],
                    });
​
                }).catch((err) => {
                    _self.$message('底图创建失败,' + err);
                });
        },
​
        // 创建三维地图
        _createSceneView: function() {
            const _self = this;
            const option = {
                url: gConfig.arcgis_jsapi_hosturl + 'init.js',
                css: gConfig.arcgis_jsapi_hosturl + 'esri/themes/dark/main.css',
            };
            loadModules(['esri/Map',
                'esri/views/SceneView',
            ], option)
                .then(([Map, SceneView]) => {
​
                    const map = new Map({
                        basemap: {
                            baseLayers: [tiledLayer],
                        },
                    });
​
                    const view = new SceneView({
                        container: 'mapViewContent',
                        map: map,
                        camera: {
                            position: [102.492874, 25.236805, 500000], 
                            heading: 0,
                        },
                        zoom: 7,
                    });
​
                }).catch((err) => {
                    _self.$message('底图创建失败,' + err);
                });
        },

以上代码可看到,我们通过loadModules来引入了JS API中所需的功能模块,而且以上代码是在一个组件中的,可以看到第一个方法中为了创建一个二维地图,我们用loadModules引入了相关的功能模块;第二个方法中为了创建三维场景,我们又用loadModules再次引入了所需的模块,这样在编码方式上就很繁琐。换句话说,如果我们在什么地方要用JS API中的模块,那我们就要在相应的地方用loadModules引入所需的模块。 @arcgis/cli编码方式解决了这一恼火的问题,我们可直接在组件代码顶部引入相应模块,然后在下面的代码任意地方使用它们,示例代码如下:

import ArcGISMap from 'esri/Map';
import MapView from 'esri/views/MapView';
​
export default {
    name: 'web-map',
    mounted() {
      const map = new ArcGISMap({
        basemap: 'topo-vector'
      });
      this.view = new MapView({
        container: this.$el,
        map: map,
        center: [-118, 34],
        zoom: 8
      });
    },
    beforeDestroy() {
      // destroy the map view
      if (this.view) {
        this.view.container = null;
      }
    }
};

以上代码可看到,我们只需要在组件代码顶部引入此件组所需要的JS API相应的模块,然后在下方的代码任意位置都可以使用此模块,就没有必要每次都通过Dojo的模块化加载机制来加载了。

项目启动运行和打包部署方面

esri-loader方式开发JS API项目系统后,如果我们不对项目进行相应的配置,基于Vue框架的项目和基于React框架的项目启动命令是不同的,它们的打包命令却是相同。 @arcgis/cli脚手架创建的项目应用,不管是基于Vue还是基于React,启动命令相同,打包命令也相同,所以更加的友好。 两种方式创建的项目,打包后部署流程一致,并无相关的差异。

其他方面后续遇到后再更新……

总结

就目前四个方面的简单测评来看,如果是一个还未进行实施的项目,并且其中GIS相关功能模块占比较大的情况下,推荐使用@arcgis/cli脚手架方式搭建项目框架,具体coding感受,只有自己去体会一番了。作者力荐@arcgis/cli脚手架方式。

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:http://www.xbeichenbei.com/复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 【番外】 使用@arcgis/cli脚手架进行ArcGIS JS API开发

    本文主要介绍如何在Vue和React项目中使用ArcGIS JS API进行开发,与以往的esri-loader开发方式不同的是,本文使用的是@arcgis/c...

    X北辰北
  • ArcGIS API for JavaScript 4.18基于ES Modules的新开发方式@arcgis/core

    ArcGIS API for JavaScript 4.18中新增加了一种基于ES Modules的新开发方式@arcgis/core,这篇文章就来介绍一下如何...

    X北辰北
  • 【番外】 Vue中使用ArcGIS JS API 4.14开发

    本文主要介绍如何在Vue项目中使用ArcGIS JS API进行开发,文中使用的JS API是目前最新版本的ArcGIS JS API 4.14,主要是在Vue...

    X北辰北
  • 【番外】 React中使用ArcGIS JS API 4.14开发

    本文主要介绍如何在React项目中使用ArcGIS JS API进行开发,文中使用的JS API是目前最新版本的ArcGIS JS API 4.14,主要是在R...

    X北辰北
  • 使用现代化的脚本进行 ArcGIS JS API 开发

    ArcGIS JS API 基于古老的 JavaScript 框架 Dojo 开发, dojo 虽然是曾经的王者, 但是2020年的前端开发, 早已是 Angu...

    beginor
  • 在客户端创建要素图层 (FeatureLayer)

    在 ArcGIS JS API 的开发中, FeatureLayer 可以说是让人又爱又恨, 特别是 ArcGIS JS API 4.x , FeatureLa...

    beginor
  • ArcGIS API for JavaScript 中的 Autocasting

    Autocasting 是 ArcGIS API for JavaScript 4.x 的一个新特性, 将 json 对象转换成对应的 ArcGIS API f...

    beginor
  • ArcGIS JS API 4.15渲染后台接口返回的数据,并进行点选查询

    本文主要介绍下如何使用ArcGIS JS API对后台接口返回的数据进行渲染,文章中的后台返回数据使用单独的配置文件来处理,详情请看文章内容。

    X北辰北
  • 【一张图框架-1】自动化构建WebGIS项目

    前端开发领域已经有很多自动化构建项目的工具了,例如vue-cli、create-react-app等等,但是在WebGIS开发领域却是少之又少,所以今天博主自己...

    X北辰北
  • 【ArcGIS JS API + eCharts系列】实现二、三维网络路径图的绘制

    本文主要介绍使用ArcGIS JS API 4.14和eCharts 4.7.0来实现在地图上绘制网络路径图的实现步骤,包括二维和三维。

    X北辰北
  • 【ArcGIS JS API + eCharts系列】实现二、三维迁徙图的绘制

    本文主要介绍使用ArcGIS JS API 4.14和eCharts 4.7.0来实现在地图上绘制二维图表中的迁徙图的实现步骤,包括二维和三维。

    X北辰北
  • ArcGIS API for JavaScript开发入门必读

    ArcGIS API for JavaScript开发必读的一篇入门文档,文章中对ArcGIS API for JavaScript做了简单的介绍,包括学习路线...

    X北辰北
  • ArcGis API JS 4.X本地化部署与地图的基础使用

    首先下载ArcGIS API for JavaScript4.x,这里下载的是4.19。

    Kiba518
  • 【学习过程】寻找合适的WebGIS开发构架

    一直想找到一个合适的构架来开发WebGIS,以前一直用的是Web ADF,然而经常遇到很大的技术阻力,因为,自己的JAVASCRIPT不怎么好,所以一直想尽量避...

    用户1170933
  • 【ArcGIS JS API + eCharts系列】实现二、三维散点图的绘制

    本文主要介绍使用ArcGIS JS API 4.14和eCharts 4.7.0来实现在地图上绘制散点图的实现步骤,包括二维和三维。

    X北辰北
  • ArcGIS API for JavaScript应用开发

    ArcGIS API for JavaScript 提供在线版API,4.x 是 ArcGIS API for JavaScript 的新一代版本,实...

    IT技术小咖
  • ArcGIS JS API 4.17更改测量控件黄白相间的默认样式

    当我们使用ArcGIS JS API开发项目时,经常会用到地图测量控件,用于测量地图上两点之间的距离、一片区域的面积或周长等,但是ArcGIS JS API测量...

    X北辰北

扫码关注腾讯云开发者

领取腾讯云代金券