react+esriloader 天地图加载
最近看react，也看到有某博主的vue+esriloader相关内容，这里稍微做了下修改，记个笔记(*^_^*)
不知道怎么写，直接贴代码吧
环境搭建
这里默认安装了node、create-react-app、yarn。以下命令都在vscode的终端
首先创建react项目
create-react-app react-esriloadervscode打开前面创建的项目文件夹，初始化环境键入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(
)
}
}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(
X:{this.state.x}
Y:{this.state.y}
)
}
}
export default PanelApp.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(
,
document.getElementById('xypanel'));
}
render() {
return (
Welcome to React
To get started, edit src/App.js and save to reload.
);
}
}
export default App;
项目结构：
启动项目：
yarn start最终效果：
水平有限，凑活着看吧(*^_^*)，如有问题欢迎指出
github忘记怎么用了，源码上传在csdn了，没有零积分选项。。