因为dojo本身带有模块加载的功能,会与webpack本身有冲突,所以需要借助esriLoder。
安装
npm i esri-loader
使用esri-loader
esri-loader暴露了loadCss和loadModules两个方法,分别用来加载css和js文件。
引入
import { loadCss,loadModule } from 'esri-loader'
loadCss的使用
自动加载cdn上最新版本的arcgis的css
loadCss()
加载制定路径的arcgis的css
loadCss('http://115.29.42.107:8686/410/esri/css/main.css')
loadModules的使用
代替之前的dojo,传入需要的模块与配置项,返回一个promise对象,then中的参数为返回模块,示例:
import { loadModules } from 'esri-loader'; // if the API hasn't already been loaded (i.e. the frist time this is run)// loadModules() will call loadScript() and pass these options, which,// in this case are only needed b/c we're using v3.x instead of the latest 4.xconst options = { version: '3.28' }; loadModules(['esri/map'], options) .then(([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' }); }) .catch(err => { // handle any script or module loading errors console.error(err); });
option已知配置项:
option = { version: 4.7, // 在线加载js时使用选择版本号 url: 'http://115.29.42.107:8686/410/init.js', // 制定路径加载arcgis的js,需指向init.js的路径 dojoConfig: { // 配置dojo baseUrl: config.dojoUrl // 需指向dojo目录 }}
如果你是在线使用最新的无需配置,需要在线使用某个版本配置version
如果你部署js的api,需要配置url和dojoConfig。