node.js - 如何在ReactJs Project中使用Esri Arcgis Map？

我正在尝试使用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 Project中使用Esri Arcgis Map？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39987963/