React中使用esri-loader

邓正谊

2023-12-01

一、前言

随着前端的发展，框架的选择也越来越多，arcgis js api 在集成到React 中也是提供了良好的适配通过esri-loader。

二、使用

首先要先引入 esri样式

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">  
    <title>react+arcgis api</title>
    <link rel="stylesheet" href="https://js.arcgis.com/4.10/esri/css/main.css">
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

安装 esri-loader

npm install --save esri-loader
或者
yarn add esri-loader

esri-loader简单封装

import esriLoader from 'esri-loader';

window.apiRoot = 'https://js.arcgis.com/4.10/'; //可以写在项目的配置文件里
//可以写在项目的配置文件里
window.dojoConfig = {
  async: true,

  // for jsapi ver. >= 4.9 兼容浏览器
  deps: ['@dojo/framework/shim/main'],

  // for jsapi ver. <= 4.8
  // deps: ['@dojo/shim/main'],
  packages: [
    // {
    //   name: 'sample',
    //   location: 'sample/demo'
        // },
  ],
  has: {
    'esri-promise-compatibility': 1, // Use native Promises by default
    'esri-featurelayer-webgl': 1, // Enable FeatureLayer WebGL capabilities
  }
};

function configEsriLoader() {
  esriLoader.utils.Promise = Promise;
    
}

export function load(modules) {
  configEsriLoader();
  return esriLoader.loadModules(modules, {
    dojoConfig: window.dojoConfig,
    url: window.apiRoot,
  });
}

使用示例

import * as jsapi from './jsapi'; 
...

async function initMap(){
   const [Map,Mapview] = await jsapi.load([ "esri/Map","esri/views/MapView"]);
   var map = new Map({
        basemap: "streets"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        zoom: 4,
        center: [15, 65] // longitude, latitude
    });
}
...

由于 esri-loader是异步加载，需要用到 async/await异步操作来执行，保证请求加载完整。

esri中国也提供了一套基于React+dva+umi的脚手架，附链接如下，可以参考学习哦~

https://github.com/esrichina/geomap

React中使用esri-loader

相关阅读

相关文章

相关问答

相关文档