反应-参数
该项目提供了一个图书馆,其中有几个可以使用React组件(<Map />, (中文(简体) ), <Scene />, (中文(简体) ), <WebMap />,以及 <WebScene />要让你开始使用 用于 JavaScript 的 ArcGIS API 在您的反应应用程序中。 这些组件使用 装填器 在引擎盖下到懒惰地装入ArcGIS API模块.
重要性: 确实 没有 需求 react-arcgis 在您的 React 应用程序中使用 ArcGIS API 。 如果以上通用组件不适合您的需要, 您可以很容易地 创建您自己为 JavaScript 装入 ArcGIS API 的 React 组件 使用 装填器。或者,您可以从此库中的组件开始,然后 添加自己的组件 视需要而定.
安装
- 运行
npm i --save esri-loader @esri/react-arcgis在您的反应应用程序中
如果您需要支持浏览器缺少本地承诺执行, 您必须添加全局 Promise 工程的构造器多填充, 因为反应- arcgis 不包括一个 。 见 埃斯里装填器文档 更多细节.
基本用途
关键是: 你个 必须 在使用此库中的组件之前加载 ArcGIS API 样式 。 下面的片段假设 你已经使用了其中之一 方式 esri-loader 提供您加载 ArcGIS API CPS。 。 。 .
在 React 中绘制一个简单的映射 :
import React from 'react';
import * as ReactDOM from 'react-dom';
import { Map } from '@esri/react-arcgis';
ReactDOM.render(
<Map />,
document.getElementById('container')
);
或者,制作一个3D网络场景:
import React from 'react';
import * as ReactDOM from 'react-dom';
import { Scene } from '@esri/react-arcgis';
ReactDOM.render(
<Scene />,
document.getElementById('container')
);
您也可以从 ArcGIS Online 中加入 Webmaps 和 Webscenes :
import React from 'react';
import * as ReactDOM from 'react-dom';
import { WebMap, WebScene } from '@esri/react-arcgis';
ReactDOM.render(
<div style={{ width: '100vw', height: '100vh' }}>
<WebMap id="6627e1dd5f594160ac60f9dfc411673f" />
<WebScene id="f8aa0c25485a40a1ada1e4b600522681" />
</div>,
document.getElementById('container')
);
如果你想改变风格 Map 或者说 Scene给它一个课:
import React from 'react';
import * as ReactDOM from 'react-dom';
import { Scene } from '@esri/react-arcgis';
ReactDOM.render(
<Scene className="full-screen-map" />,
document.getElementById('container')
);
您也可以将属性传递到 Map, (中文(简体) ), MapView,或 SceneView 通过视图 Properties 或 map Properties 道具 :
import React from 'react';
import { Map } from '@esri/react-arcgis';
export default (props) => (
<Map
class="full-screen-map"
mapProperties={{ basemap: 'satellite' }}
/>
)
这些属性直接传递给相应的可用属性 ArcGIS API 类数字 :
import React from 'react';
import { Scene } from '@esri/react-arcgis';
export default (props) => (
<Scene
style={{ width: '100vw', height: '100vh' }}
mapProperties={{ basemap: 'satellite' }}
viewProperties={{
center: [-122.4443, 47.2529],
zoom: 6
}}
/>
)
如果你想访问 map 财务报告和审定财务报表 view 直接在加载后通过 onLoad 处理器 :
import React from 'react';
import { Map } from '@esri/react-arcgis';
export default class MakeAMap extends React.Component {
constructor(props) {
super(props);
this.state = {
map: null,
view: null
};
this.handleMapLoad = this.handleMapLoad.bind(this)
}
render() {
return <Map className="full-screen-map" onLoad={this.handleMapLoad} />;
}
handleMapLoad(map, view) {
this.setState({ map, view });
}
}
别忘了一个 onFail 处理器以防出事:
import React from 'react';
import { WebScene } from '@esri/react-arcgis';
export default class MakeAScene extends React.Component {
constructor(props) {
super(props);
this.state = {
status: 'loading'
};
this.handleFail = this.handleFail.bind(this);
}
render() {
return <WebScene className="full-screen-map" id="foobar" onFail={this.handleFail} />;
}
handleFail(e) {
console.error(e);
this.setState({ status: 'failed' });
}
}
高级使用
配置 esri-loader
默认情况下, 此库中的组件将使用 esri-loader默认选项, 表示它们会懒惰地从CDN版本的ArcGIS API中为 JavaScript 添加模块, 用于 JavaScript 版本 esri-loader 您已经安装。 见 页:1 esri-loader 配置文档 以获取如何自定义的信息 esri-loader行为.
使用 setDefaultOptions()
最简单的方法是打电话 esri-loader是因为 setDefaultOptions() 应用程序启动时, 此库中的任何组件才会被打开 .
import React from 'react';
import * as ReactDOM from 'react-dom';
import { setDefaultOptions } from 'esri-loader';
// app contains react-arcgis components
import { App } from './components/App.js';
// configure esri-loader to lazy load the CSS
// the fisrt time any react-arcgis components are rendered
setDefaultOptions({ css: true });
ReactDOM.render(
<App />,
document.getElementById('app')
);
这需要 esri-loader@^2.12.0。如果您使用旧版的 Esri 装填器,您也许应该升级.
使用 loaderOptions
如果你无法使用 setDefaultOptions(),可以使用 loaderOptions 此库中每个组件提供的道具 。 这将是 以 options 改为 loadModules()。记住,如果你使用 loaderOptions,您必须通过同样的选项 全部 react-arcgis 应用程序中的组件,以及应用程序调用的地方 loadModules() 直接说.
创建自有组件
通过 用于 JavaScript 的 ArcGIS API 如果你的应用程序需要用地图做更多的工作, 而不是简单地显示地图, 你很可能需要从ArcGIS API 中加载和使用额外的类, 并为这些类提供引用您用此库中组件创建的地图的例子.
幸好你已经安装好了 esri-loader,允许您 装入应用程序可能需要的任何额外的ArcGIS API模块此外, react-arcgis 抚养子女 <Map />, (中文(简体) ), <Scene />, (中文(简体) ), <WebMap />,以及 <WebScene /> 进入父母的 map 财务报告和审定财务报表 view 实例通过道具.
例如,让我们将百慕大三角图形从 此示例 变成反应组件 :
import { useState, useEffect } from 'react';
import { loadModules } from 'esri-loader';
const BermudaTriangle = (props) => {
const [graphic, setGraphic] = useState(null);
useEffect(() => {
loadModules(['esri/Graphic']).then(([Graphic]) => {
// Create a polygon geometry
const polygon = {
type: "polygon", // autocasts as new Polygon()
rings: [
[-64.78, 32.3],
[-66.07, 18.45],
[-80.21, 25.78],
[-64.78, 32.3]
]
};
// Create a symbol for rendering the graphic
const fillSymbol = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [227, 139, 79, 0.8],
outline: { // autocasts as new SimpleLineSymbol()
color: [255, 255, 255],
width: 1
}
};
// Add the geometry and symbol to a new graphic
const graphic = new Graphic({
geometry: polygon,
symbol: fillSymbol
});
setGraphic(graphic);
props.view.graphics.add(graphic);
}).catch((err) => console.error(err));
return function cleanup() {
props.view.graphics.remove(graphic);
};
}, []);
return null;
}
export default BermudaTriangle;
现在我们可以使用 <BermudaTriangle /> 我们内部的组成部分 <Map />, (中文(简体) ), <Scene />, (中文(简体) ), <WebMap />,或 <WebScene />,则 map 财务报告和审定财务报表 view 道具将自动由反应-arcgis提供:
import * as React from 'react';
import { Scene } from '@esri/react-arcgis';
import BermudaTriangle from './BermudaTriangle'; // The Graphic component we just made
export default (props) => (
<Scene class="full-screen-map">
<BermudaTriangle />
</Scene>
)
使用 ArcGIS 类型
见 esri-loader 关于ArcGIS类型工作的文档。 。 。 .
移动
从v4到v5
首先,确保 Esri 装填器被安装为您的应用程序的依赖性 :
npm install --save esri-loader
然后,更新任何 import 报表 loadModules()数字 :
// Replace old `loadModules` imports...
// import { Map, loadModules } from '@esri/react-arcgis';
// With a new, separate esri-loader import:
import { Map } from '@esri/react-arcgis';
import { loadModules } from 'esri-loader';
捐款
欢迎任何人对这一一揽子计划作出贡献。 然而,我们不打算在这个图书馆再增加任何组成部分。 如果您已经创建了您想要共享的组件, 我们鼓励您通过 代码框 或一个 属性一旦你做了,你觉得自由 打开一个问题 我们会帮助传播这个词.
我们高兴地欢迎对文件进行错误修正或改进.
以下是一些可能有助于发展的命令:
npm test: 进行单元测试npm run build: 构建应用程序
要对照您正在开发的代码运行演示应用程序,您需要运行这些命令:
npm link
npm run build
cd demo
npm i
npm link @esri/react-arcgis
npm start
记住 start 脚本只监视演示应用中代码的修改. 你必须重新运行 npm run build 每次您对库进行修改, 并想要在演示应用程序中验证它们 .
许可证
版权: 2017-2019 Esri
根据Apache许可证第2.0版("License"); 您不得使用此文件,除非符合许可证. 您可在下列地点获得许可证副本:
除非适用的法律要求或书面同意,否则软件 根据许可证发放的是在“AS IS”BASIS上发放的, 没有任何明示或暗示的警告或条件. 有关许可的特定语言的许可证 许可证的限制.
许可证副本可到存放处索取 自由主义 文档.