软件
产品
一、前言
随着前端的发展， 框架 的选择也越来越多，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-loaderesri-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
免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删
技术文档
热门文章
155-2731-8020
