react+esriloader 天地图加载

最近看react，也看到有某博主的vue+esriloader相关内容，这里稍微做了下修改，记个笔记(*^_^*)

不知道怎么写，直接贴代码吧

环境搭建

这里默认安装了node、create-react-app、yarn。以下命令都在vscode的终端

首先创建react项目

create-react-app react-esriloader

vscode打开前面创建的项目文件夹，初始化环境键入yarn或yarn install

yarn

安装 esri-loader

yarn add esri-loader

本文主要有两个组件map容器、经纬度显示

ArcMap.js:(esri-loader返回Promise，这里then写的有点晕乎,就抽出了methods.js)

import React, { Component } from 'react'
import methods from './js/methods'

export default class ArcMap extends Component {
    constructor() {
        super();
        this._setMap = this._setMap.bind(this);
    }
    componentDidMount() {
        methods.loadArcgis().then(//初始化完成之后将map传给父组件,供经纬度显示使用
            this._setMap
        ).catch(
            err => console.log(err)
        );
    }
    _setMap(map){//调用父组件传入的方法
        if(this.props.setMap){
            this.props.setMap(map);
        }
    }
    render(){
        return(
            <div className="mapContainer">
                <div id="map">
                </div>
            </div>
        )
    }
}

methods.js:主要内容为初始化esriapi环境，天地图加载服务这里抽出来了

import esriLoader from 'esri-loader';
import TDT from './TDT'

class Methods {
	loadArcgis() { // 该方法用于加载 arcgis 依赖的js,css 等
		// 加载css
		esriLoader.loadCss('http://jsapi.thinkgis.cn/esri/css/esri.css');

		return esriLoader.loadScript({ // 加载js
			url: 'http://jsapi.thinkgis.cn/dojo/dojo.js',
			dojoConfig: {
				async: true
			},
		}).then(//dojo加载完成之后，载