我正在尝试使用 Esri map 。要在我的项目中包含 map ,这是我发现的:
require([
"esri/map",
"esri/dijit/Search",
"esri/dijit/LocateButton",
"esri/geometry/Point",
"esri/symbols/SimpleFillSymbol",
"esri/symbols/SimpleMarkerSymbol",
"esri/symbols/SimpleLineSymbol",
但是没有任何 esri 文件夹或 npm 包。因此,我在这里很困惑。 esri如何导入到项目中?
最佳答案
使用 esri-loader 加载所需的 esri 模块。这是一个组件渲染 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;
这会呈现 basemap ,但它不是响应式的。如果我删除 View div 周围的 div,或者如果我将外部 div(周围的 viewDiv)的高度和宽度作为相对值({ height: '100%', width: '100%'}),则 map 不会呈现.不知道为什么。任何使其响应的建议都将不胜感激。
关于node.js - 如何在 ReactJs 项目中使用 Esri Arcgis Map?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39987963/