专栏首页ArcGIS JS API开发ArcGIS API for JavaScript 4.18基于ES Modules的新开发方式@arcgis/core

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

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

写在前面

随着前端主流框架Vue和React的发展,大家在做WebGIS项目开发时是不是也在vue或者react项目里使用ArcGIS API for JavaScript呢,之前我们在vue或者react项目里使用ArcGIS API for JavaScript的时候一直给大家推荐esri-loader的AMD方式,示例代码如下所示(在这里仅仅演示React项目中的使用,Vue中的使用方式见文章后半部分):

//直接使用esri-loader的then()方法链式回调
import React,{Component} from 'react';
import esriLoader from 'esri-loader';
import './App.css';
 
class App extends Component{
 
    state = {
 
    }
 
    componentDidMount = () => {
        const _self = this;
        const options = {
            url: 'https://js.arcgis.com/4.14/init.js', // 这里的API地址可以是官网提供的CDN,也可在此配置离线部署的地址
            css: 'https://js.arcgis.com/4.14/esri/themes/light/main.css'
        };
 
        esriLoader.loadModules([
            "esri/Map",
            "esri/views/MapView"], options) // 传入需要使用的类
            .then(([Map,
                       MapView
                   ]) => {
                // doSomeThing
 
                let map = new Map({
                    basemap: 'osm'
                });
 
                let view = new MapView({
                    container: "app",
                    map: map,
                    center: [104.072044,30.663279],
                    zoom: 10
                });
 
            })
            .catch(err => {
                console.error('地图初始化失败', err);
            })
 
    }
 
    render () {
        return (
            <div className='App' id='app'>
            </div>
        )
    }
}
 
export default App;
//或者是这样子
//直接使用ES7的async和await来做
import React, { Component } from 'react';
import { loadModules } from 'esri-loader';
import './App.css';
const options = {
    url: 'https://js.arcgis.com/4.17/',
    css: 'https://js.arcgis.com/4.17/esri/themes/light/main.css',
};
class App extends Component {
    componentDidMount = () => {
        this.initMap();
    };
    initMap = async () => {
         const [Map, MapView] = await loadModules(
            ['esri/Map', 'esri/views/MapView'],
            options
         );
        const map = new Map({
            basemap: 'osm',
        });
        const view = new MapView({
            container: 'mapview',
            map: map,
            zoom: 10,
        });
    };
    render() {
        return <div id="mapview"></div>;
    }
}
export default App;

以上我们演示了在React项目中通过esri-loader使用ArcGIS API for JavaScript开发的两种方式,至于在Vue中的使用方式见下面的文章即可,里面有详细的介绍流程,文章列表如下:

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

以上的方式不管我们怎么优化,都有一个问题:我们在组件代码的某一个地方如果需要ArcGIS API for JavaScript中的某一个API模块的话,就需要通过esri-loader的loadModules方法来异步加载进来,然后才能进行相应的功能开发。这样其实很不方便我们的代码编写,我们更希望的一种方式是:如果需要什么ArcGIS API for JavaScript的API模块,我们直接在组件代码的顶部引入即可,这样在组件代码的任何地方都可以使用这个API模块了。这样的一种使用方式其实通过esri-loader是没法实现的,除非你对ArcGIS API for JavaScript的接口根据项目需要再进行封转。

但是随着ArcGIS API for JavaScript 4.18的发布,这种尴尬的局面被打破了,ArcGIS API for JavaScript 4.18新增了一种使用方式——@arcgis/core。通过这种方式,我们可以实现直接在组件顶部引入所需的API模块,然后在组件代码任何地方即可使用。

具体操作

1、初始化一个Vue或者React项目demo(如果不会创建的话,阅读上面提到的三篇文章即可,里面有详细的介绍)。在此处为了演示我新建了一个React项目demo,项目demo新建完成后按照官网所示在项目demo根目录下打开命令行窗口,然后安装@arcgis/core这个包:

npm install @arcgis/core

安装完成后我们可以在package.json文件中看到安装后的版本号,其实就是API的版本号:

2、安装完成之后,我们打开项目根目录下的package.json文件,修改项目启动命令:

"scripts": {
    "start": "npm run copy && react-scripts start",
    "build": "npm run copy && react-scripts build",
    "copy": "ncp ./node_modules/@arcgis/core/assets ./public/assets"
},

以上的启动命令中我们修改了默认的startbuild命令,然后新增了一个copy命令,这条命令主要是将@arcgis/core这个包里面的静态资源拷贝到了项目的public目录下。

可以看到copy命令里面使用了ncp这个命令,所以我们要通过以下命令来全局安装一下这个工具:

npm install ncp -g

3、然后在React项目的App.js或者index.js文件中通过如下命令引入ArcGIS API for JavaScript所需的样式文件包,如下:

import '@arcgis/core/assets/esri/themes/light/main.css';

4、最后在组件代码文件顶部位置引入所需要的API模块,此处我们仅仅创建一张二维地图,所以代码直接写在了App.js文件里,如下所示:

import Map from '@arcgis/core/Map';
import MapView from '@arcgis/core/views/MapView';

5、写一个生命周期函数,然后在函数里面编写实例化二维地图的代码,如下:

componentDidMount = () => {
    this.initMap();
};
initMap = () => {
    const map = new Map({
        basemap: 'osm',
    });
    const view = new MapView({
        container: 'mapview',
        map: map,
        zoom: 10,
    });
};

6、最后就可以看到结果了,如下:

7、以上就是全部的关于@arcgis/core方式的介绍了。

总结

随着@arcgis/core方式的出现,目前我们在Vue或者React项目中使用ArcGIS API for JavaScript的开发方式由以前的一种变为了目前的两种方式:esri-loader@arcgis/core。因为是新出现的使用方式,目前仅仅是测试版,但是能满足大部分的开发需求,就博主目前来开发的功能来说,没有出现过任何问题,所以大家可以放心使用。但是在@arcgis/core的方式中目前还没找到如何使用特定版本API的方式,因为目前通过npm install @arcgis/core安装的话,里面包含的API默认就是最新版4.18,在这里仅仅是猜测,或许通过npm install @arcgis/core@4.17.0这种方式可以安装4.17版本的API,但是没有试过,或许也不行,因为@arcgis/core是在4.18才出现的嘛,有兴趣的小伙伴可以自己试试。

最后我们来看看@arcgis/core的这种ES Modules方式和传统的esri-loader的AMD方式有什么区别吧,下图是一张官网的截图,里面大概的比较了两种方式的区别:

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

相关文章

  • ArcGIS API for JavaScript 中的 Autocasting

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

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

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

    X北辰北
  • ArcGIS REST API 实现服务端地图图层叠加和地图图片导出

    (1)ArcGIS Desktop 10.5 路径下自带的 影像文件 wsiearth.tif,影像文件存放路径: E:\Program Files (x86...

    魏晓蕾
  • 使用现代化的脚本进行 ArcGIS JS API 开发

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

    beginor
  • ArcGIS API for JavaScript应用开发

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

    IT技术小咖
  • 主流webgis框架介绍与对比

    想写本文,主要是源于前两天有个老师找到我说让我录一个大概半个小时的视频,跟大家分享一下各webgis框架之间的区别以及在应用的过程中应该如何选择。其实之前也有学...

    lzugis
  • 【番外】 React中使用ArcGIS JS API 4.14开发

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

    X北辰北
  • 地理信息系统(GIS)系列——Portal for ArcGIS

    Portal 是一个基于 Web 的应用,它能提供个性化,单点登陆,不同源的内容聚合,和信息系统的表示层集中。聚合是整合不同 Web 页面源数据的过程。为了提供...

    魏晓蕾
  • Ags 9.3 文档逐步上线

    ArcGIS 9.3已经发布,还没有仔细研究what’s new in arcgis 9.3,但这次版本升级确实带来了不少新的变化,等新版本全面铺开之...

    全栈程序员站长
  • 菜鸟的 GIS 基本概念学习

    因为一些缘故,工作中了解了一下 GIS。本文算是菜鸟的学习笔记吧,如有错误,衷心希望专业的 GIS 同学指正~

    amc
  • 【番外】 Vue中使用ArcGIS JS API 4.14开发

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

    X北辰北
  • 地理信息系统(GIS)系列——ArcGIS 开发的各种示例

    魏晓蕾
  • 可视化流式地理空间数据

    最近参与了一个涉及流媒体信用卡交易数据并根据风险概率对其进行分类的项目。在此基础上,想探索可视化数据的选项。决定专注于地理方面,因为它是尝试识别欺诈性交易时的关...

    代码医生工作室
  • ArcGIS for Android学习(一)

    GIS的开发中,什么时候都少不了地图操作。ArcGIS for Android中,地图组件就是MapView,MapView是基于Android中ViewGro...

    水击三千
  • 学习Babel,从这里开始!

    浏览器无法运行 ECMAScript 2015+、JSX、TypeScript 等语法编写的脚本代码。

    Learn-anything.cn
  • 学习Babel,从这里开始!

    浏览器无法运行 ECMAScript 2015+、JSX、TypeScript 等语法编写的脚本代码。

    玖柒的小窝
  • 2013年年终总结

    今天是2014年01月21日,农历腊月二十一,还有四天就能回家了,说句实话,年终总结到现在才写,有点名副其实,单位的年终总结表彰大会昨天都完事了,呵呵~~~

    lzugis
  • 地理信息系统(GIS)系列——ArcGIS API for JavaScript 3.9(2)

    魏晓蕾

扫码关注腾讯云开发者

领取腾讯云代金券