vue-cli&webpack&arcgis API For JS的天坑之路

Posted 2020-09-12 Lalala这是我的小马甲哦

写在前面的话（背景交代）

最近参加esri比赛，但是又想趁机接触前端最新的一些框架和技术，所以，毅然决然的踏上了这个天坑之路。我现在只是成功的把地图渲染出来了，所以，我也不知道会不会有天坑二的出现。
gituhb项目地址

最新更新的大bug关于ie

esriloader使用h5新属性dataset所以并不兼容ie低版本，我这里是ie10及其以下都不兼容，所以如果要兼容ie果然只能用cdn在index页面直接引入了。

新建vue-cli工程

如何用vue-cli + webpack构建一个工程，网上一大堆的代码，我就不赘述了。比如这个就是很好地入门文章，先要做的还是要把vue-cli和webpack的模块划分好，框架搭建好，然后才是我要说的，地图部分。

如何在vue-cli，webpack中使用arcgis API

参考文章（1），这个要翻个墙
参考文章（2），这个也要翻个墙
参考文章（3），主要参考esri官网，他告诉我是可以实现的，在无数次我都想要放弃了，但是想到官网都给了例子了，这么大的公司不能是逗我玩吧，还是坚持下来了。

• 只要了解webpack的人，都知道我们用css需要安装css-loader，使用scss需要安装sass-loader，es6需要安装babel-loader，几乎用什么就要装什么，所以对于arcgisAPI来说，也是需要一个loader的，我万分庆幸的是，虽然像我这样搞的文章少，但是esri确实给我们提供了一个叫做esri-loader的东西。并且，如果你不想用webpack，还有直接在vue中使用的例子vue的用例很贴心吧
  

• 所以，接下来我们就需要去到我们的项目目录，安装esri-loader，用管理员权限打开命令行E:\\esri\\LorryAdmin>npm install esri-laoder --save-dev，安装好了以后，我就说说我遇到的第一个坑：

  • 光是安装esri-loader貌似是远远不够的，因为还要依赖其他的包，当时我没有注意到命令行的警告，我以为不是错误就没有注意，事实上是还要安装karma 以及sinon 这里，就出现了第二个坑了！！

  • 它提示我karma需要sinon的依赖，但是他提示的是1.xx版本貌似是这样的，可是我按照他提示的版本安装，呵呵呵，按理说webpack要安装最新版本，但是总是是没有，我安装了几次次，全部失败了。又跑去读官网，哈哈哈，真的是坑爹啊
    这里写的意思是，1.xx版本的在webpack这些工具里面是罢工的，但是但是，2.x版本就解决了，我是又高兴又捶胸，可不可以大写一下啊，这里最新版本是2.1.0,所以npm install sinon@2.1.0 --save-dev
    

• 以上东西全部安装好了以后，暂时我们要准备的东西就算准备好了。esri-loader是可以使用了。我们现在可以不用link,css文件，以及script，API文件了。 现在就是最大的坑了，如何使用，官网给的例子只是加载地图这一部分的方法，肯定是不完整的，esriLoader.dojoRequire就看着一句话，esriLoader当时我以为就是这样使用的，但是esriLoader其实是一个类似于变量的我们自己的命名的对象，也就是我们把esri-loader导出为了esriLoader

• 所以，现在需要在我们使用的.vue文件中导出esriLoader对象import esriLoader from 'esri-loader'
  

• 然后现在就可以使用官网的例子加载地图了。
  

• 同样的，css也可以引入了

 <style>
  @import url('https://js.arcgis.com/3.15/dijit/themes/tundra/tundra.css');
  @import url('https://js.arcgis.com/3.20/esri/css/esri.css');
</style>

• 其实看起来是很简单，但是当时我陷入了无知的漩涡。然后后来我发现，虽然官网例子少，但是他是给了具体如何操作的。他写在esri-loader的readme里面
• 

• 

• 我把它贴出来

esri-loader

A tiny library to help load ArcGIS API for JavaScript modules in non-Dojo applications.

Install

npm install esri-loader

Usage

The code below shows how you can load the ArcGIS API for javascript and then create a map. Where you place this code in your application will depend on what framework you are using. See below for example applications.

Loading Styles

Before you can use the ArcGIS API in your app, you’ll need to load the styles, for example:

/* esri styles */
@import url('https://js.arcgis.com/3.20/esri/css/esri.css');

Pre-loading the ArcGIS API for JavaScript

If you have good reason to believe that the user is going to transition to a map route, you may want to start pre-loading the ArcGIS API as soon as possible w/o blocking rendering, for example:

import * as esriLoader from 'esri-loader';

// preload the ArcGIS API
esriLoader.bootstrap((err) => {
  if (err) {
    // handle any loading errors
    console.error(err);
  } else {
    // optionall execute any code once it's preloaded
  }
}, {
  // use a specific version instead of latest 4.x
  url: '//js.arcgis.com/3.20/';
});

Lazy Loading the ArcGIS API for JavaScript

Alternatively, if users may never end up visiting any map routes, you can lazy load the ArcGIS API for JavaScript the first time a user visits a route with a map, for example:

// import the esri-loader library
import * as esriLoader from 'esri-loader';

// has the ArcGIS API been added to the page?
if (!esriLoader.isLoaded()) {
  // no, lazy load it the ArcGIS API before using its classes
  esriLoader.bootstrap((err) => {
    if (err) {
      console.error(err);
    } else {
      // once it's loaded, create the map
      createMap();
    }
  }, {
    // use a specific version instead of latest 4.x
    url: 'https://js.arcgis.com/3.20/'
  });
} else {
  // ArcGIS API is already loaded, just create the map
  createMap();
}

Loading Modules from the ArcGIS API for JavaScript

Once you’ve loaded the API using one of the above methods, you can then load modules. Here’s an example of how you could load and use the 3.x Map and VectorTileLayer classes in a component to create a map:

// create a map on the page
function createMap() {
  // first, we use Dojo's loader to require the map class
  esriLoader.dojoRequire(['esri/map'], (Map) => {
    // create map with the given options at a DOM node w/ id 'mapNode' 
    let map = new Map('mapNode', {
      center: [-118, 34.5],
      zoom: 8,
      basemap: 'dark-gray'
    });
  });
}

Why is this needed?

This blog post explains how libraries like this provide a workaround to the challenges of loading ArcGIS API for JavaScript modules from bundlers like webpack.

Examples

Here are some applications that use this library:

Angular

• angular2-esri-loader - An Angular 2 service that wraps this library to make it easy to bring it into any Angular 2 application
• angular2-esri4-components - A set of Angular 2 components to work with ArcGIS API for JavaScript v4.x

React

• esri-react-router-example - An example reaact-router application that uses this library to preload the ArcGIS API
• create-react-app-esri-loader - An example create-react-app application that uses this library to load the ArcGIS API

Vue

• City of Baltimore: Map Gallery - Map Gallery built with Vue.js that uses this library to load the ArcGIS API

总结

我当时为了找到如何去做，还是百度谷歌必应了一天，但是都没有找到解决办法，不知道是不是，把前端和webgis结合在一起的做的情况很少，文章页几乎没有，但是还是官网靠谱。做出来了以后，这算是我最近感到最开心的一瞬间，成就感，满足感。如果可以的话，我会坚持写文章，希望可以给需要的提供到帮助。其实只要你需要，阅读英文文档也不是很可怕的嘛。嘿嘿