![Esri]( "Esri")
本文介绍了如何在 ReactJs 项目中使用 Esri Arcgis Map?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用 Esri 地图.要将地图包含在我的项目中，我发现了以下内容:
要求(["esri/地图","esri/dijit/搜索","esri/dijit/LocateButton","esri/几何/点","esri/symbols/SimpleFillSymbol","esri/symbols/SimpleMarkerSymbol","esri/symbols/SimpleLineSymbol",
但是没有任何 esri 文件夹或 npm 包.因此，我在这里感到困惑.项目中esri是怎么导入的?
解决方案
使用 esri-loader 加载所需的 esri 模块.这是一个组件渲染底图.
import React, { Component } from 'react';从'esri-loader'导入{loadModules}；常量选项 = {网址:'https://js.arcgis.com/4.6/'};常量样式 = {容器: {高度:'100vh'，宽度:'100vw'},地图分区:{填充:0，保证金:0，高度:'100%',宽度:'100%'},}类 BaseMap 扩展组件 {构造函数(道具){超级(道具)；this.state = {状态:'加载'}}componentDidMount() {loadModules(['esri/Map', 'esri/views/MapView'], 选项).then(([Map, MapView]) => {const map = new Map({ 底图:街道"});const 视图 = 新地图视图({容器:viewDiv"，地图，变焦:15，中心:[78.4867, 17.3850]});view.then(() => {this.setState({地图，看法，状态:'加载'});});})}渲染图(){if(this.state.status === '加载') {返回<div>加载</div>;}}使成为() {返回(<div style={styles.container}><div id='viewDiv' style={styles.mapDiv } >{this.renderMap()}
)}}导出默认 BaseMap；
这会呈现底图，但没有响应.如果我删除视图 div 周围的 div，或者如果我将外部 div(围绕 viewDiv)的高度和宽度设为相对({ height: '100%', width: '100%'})，则地图不会呈现.不知道为什么.任何使其响应的建议将不胜感激.
I'm trying to use Esri map. To include map in my project, here is what I found:
require([
"esri/map",
"esri/dijit/Search",
"esri/dijit/LocateButton",
"esri/geometry/Point",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
But there isn't any esri folder or npm package. Therefore, I'm confused here. How esri is imported in project?
解决方案
Use esri-loader to load the required esri modules. This is a component rendering basemap.
import React, { Component } from 'react';
import { loadModules } from 'esri-loader';
const options = {
url: 'https://js.arcgis.com/4.6/'
};
const styles = {
container: {
height: '100vh',
width: '100vw'
},
mapDiv: {
padding: 0,
margin: 0,
height: '100%',
width: '100%'
},
}
class BaseMap extends Component {
constructor(props) {
super(props);
this.state = {
status: 'loading'
}
}
componentDidMount() {
loadModules(['esri/Map', 'esri/views/MapView'], options)
.then(([Map, MapView]) => {
const map = new Map({ basemap: "streets" });
const view = new MapView({
container: "viewDiv",
map,
zoom: 15,
center: [78.4867, 17.3850]
});
view.then(() => {
this.setState({
map,
view,
status: 'loaded'
});
});
})
}
renderMap() {
if(this.state.status === 'loading') {
return <div>loading</div>;
}
}
render() {
return(
<div style={styles.container}>
<div id='viewDiv' style={ styles.mapDiv } >
{this.renderMap()}
</div>
</div>
)
}
}
export default BaseMap;
This renders a base map but this is not responsive. If I remove the div around the view div or if I give the height and width of the outer div (surrounding viewDiv) as relative ({ height: '100%', width: '100%'}), the map does not render. No idea why. Any suggestions to make it responsive would be appreciated.
这篇关于如何在 ReactJs 项目中使用 Esri Arcgis Map?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！