软件
产品
最近看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( <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.jsimport 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.jsexport 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 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( <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 了，没有零积分选项。。
免责声明：本文系网络转载或改编，未找到原创作者，版权归原作者所有。如涉及版权，请联系删
技术文档
热门文章
155-2731-8020
