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加载完成之后，载入tdt类
			() => this.initMap()
		).catch(
			err => console.log(err)
		);
	}

	initMap() {
		return TDT().then(//tdt类加载完成后和其他地图初始化相关模块一块传入
			(tdt) =>
			esriLoader.loadModules([
				'esri/map',
				'esri/geometry/Point'
			]).then(
				(params) => this._initMap([tdt, ...params])
			)
		);
	}

	_initMap([TDT, Map, Point]) { // 初始化地图,并设置中心点等
		let map = new Map('map', {
			logo: false
		}); // 创建地图实例
		const pt = new Point(105, 29); // 设置中心点
		map.centerAndZoom(pt, 4); // 设置中心点和缩放级别;
		let img = new TDT('img') // 影像
		let cia = new TDT('cia'); //路网
		map.addLayer(img); // 将图层添加到map对象
		map.addLayer(cia);
		return map;
	}
}

export default new Methods()

TDT.js、tdtconfig.js:

//TDT.js
import esriLoader from 'esri-loader';
import tileInfo from './tdtconfig';

export default function () {
    return esriLoader.loadModules([
        'dojo/_base/declare',
        'esri/layers/TileInfo',
        'esri/SpatialReference',
        'esri/geometry/Extent',
        'esri/layers/TiledMapServiceLayer'
    ]).then(
        ([
            declare,
            TileInfo,
            SpatialReference,
            Extent,
            TiledMapServiceLayer
        ]) => declare('TDT', TiledMapServiceLayer, {
            constructor(maptype) {
                this._maptype = maptype;
                this.spatialReference = new SpatialReference({
                    wkid: 4326
                });
                this.initialExtent = (this.fullExtent = new Extent(-180, -90, 180, 90,
                    this.spatialReference));

                this.tileInfo = new TileInfo(tileInfo.tileInfo);
                this.loaded = true;
                this.onLoad(this);
            },

            getTileUrl(level, row, col) {
                return 'http://t' + col % 8 + '.tianditu.cn/' + this._maptype + '_c/wmts?' +
                    'SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=' + this._maptype +
                    '&STYLE=default&TILEMATRIXSET=c&TILEMATRIX=' +
                    level + '&TILEROW=' + row + '&TILECOL=' + col + '&FORMAT=tiles';
            }
        })
    )
}


//tdtconfig.js
export default {
    tileInfo: {
        'rows': 256,
        'cols': 256,
        'dpi': 300,
        'format': 'PNG32',
        'compressionQuality': 0,
        'origin': {
            'x': -180,
            'y': 90
        },
        'spatialReference': {
            'wkid': 4326
        },
        'lods': [ {
            'level': 2,
            'resolution': 0.3515625,
            'scale': 147748796.52937502
        }, {
            'level': 3,
            'resolution': 0.17578125,
            'scale': 73874398.264687508
        }, {
            'level': 4,
            'resolution': 0.087890625,
            'scale': 36937199.132343754
        }, {
            'level': 5,
            'resolution': 0.0439453125,
            'scale': 18468599.566171877
        }, {
            'level': 6,
            'resolution': 0.02197265625,
            'scale': 9234299.7830859385
        }, {
            'level': 7,
            'resolution': 0.010986328125,
            'scale': 4617149.8915429693
        }, {
            'level': 8,
            'resolution': 0.0054931640625,
            'scale': 2308574.9457714846
        }, {
            'level': 9,
            'resolution': 0.00274658203125,
            'scale': 1154287.4728857423
        }, {
            'level': 10,
            'resolution': 0.001373291015625,
            'scale': 577143.73644287116
        }, {
            'level': 11,
            'resolution': 0.0006866455078125,
            'scale': 288571.86822143558
        }, {
            'level': 12,
            'resolution': 0.00034332275390625,
            'scale': 144285.93411071779
        }, {
            'level': 13,
            'resolution': 0.000171661376953125,
            'scale': 72142.967055358895
        }, {
            'level': 14,
            'resolution': 8.58306884765625e-005,
            'scale': 36071.483527679447
        }, {
            'level': 15,
            'resolution': 4.291534423828125e-005,
            'scale': 18035.741763839724
        }, {
            'level': 16,
            'resolution': 2.1457672119140625e-005,
            'scale': 9017.8708819198619
        }, {
            'level': 17,
            'resolution': 1.0728836059570313e-005,
            'scale': 4508.9354409599309
        }, {
            'level': 18,
            'resolution': 5.3644180297851563e-006,
            'scale': 2254.4677204799655
        } ]
    }
}

Panel.js(经纬度显示面板)

import React, { Component } from 'react'
import esriloader from 'esri-loader'

class Panel extends Component {
    constructor(){
        super();
        this.state = {
            x: 0,
            y: 0
        };
    }

    componentWillMount() {
        esriloader.loadModules([
            'dojo/on',
            'dojo/_base/lang'
        ]).then(
            ([on, lang]) => {//绑定鼠标移动事件
                on(this.props.map, "mouse-move", lang.hitch(this, this._updata))
            }
        );
    }

    _updata(evt){
        const pt = evt.mapPoint;
        const x = pt.x.toFixed(5);
        const y = pt.y.toFixed(5);
        this.setState({
            x,y
        });
    }

    render() {
        return(
            <div className="panelContainer">
                <div className="panel-item">
                    <span>X:{this.state.x}</span>
                </div>
                <div className="panel-item">
                    <span>Y:{this.state.y}</span>
                </div>
            </div>
        )
    }
}

export default Panel

App.js:map容器和经纬度显示组件的使用

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import logo from './logo.svg';
import './App.css';
import Arcmap from './Arcmap'
import Panel from './Panel'

class App extends Component {
  constructor() {
    super();
    this.state = {
      map: {}
    }
  }
  setMap(map){
    this.setState({map});//初始化完成之后在添加经纬度显示面板
    ReactDOM.render(
      <Panel map={this.state.map}/>,
      document.getElementById('xypanel'));
  }
  
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <Arcmap setMap={this.setMap.bind(this)}/>
        <div id="xypanel">
        </div>
      </div>
    );
  }
}

export default App;

项目结构：

启动项目：

yarn start

最终效果：

水平有限，凑活着看吧(*^_^*)，如有问题欢迎指出

github忘记怎么用了，源码上传在csdn了，没有零积分选项。。