带有React和类型记录的Esri地图
带有React和类型记录的Esri地图
提问于 2021-06-15 07:44:26
我有一个简单的react应用程序，它是用以下方法创建的：
npx create-react-app myapp --template typescript"我想包括一个交互式地图组件。
按照https://developers.arcgis.com/javascript/latest/typescript-setup/的说明：
- I添加了依赖项：
npm install --save arcgis-js-api
npm install --save @types/arcgis-js-api我在public/index.html的标记中添加了以下标记
<link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css">
<script>
var locationPath = location.pathname.replace(/\/[^/]+$/, "");
window.dojoConfig = {
packages: [
{
name: "app",
location: locationPath + "/app"
}
]
};
</script>
<script src="https://js.arcgis.com/4.19"></script>- I创建了如下所示的组件(Map2D)：
import { useRef } from 'react';
import EsriMap from "esri/Map";
import MapView from "esri/views/MapView";
const Map2D = () => {
const theView = useRef<HTMLDivElement>(null);
if(theView && theView.current)
{
const map = new EsriMap({
basemap: "streets-vector"
});
const view = new MapView({
map: map,
container: theView.current,
center: [-118.244, 34.052],
zoom: 12
});
}
return (
<div ref={theView} style={{ width: '100%', height: '100%', margin: '0', padding: '0' }}>
</div>
);
}
export default Map2D;- I更新了App.ts以返回带有组件的视图：
import './css/App.css';
import Map2D from './Components/Map2D';
function App() {
return (
<div className="App">
<Map2D />
</div>
);
}
export default App;在那之后，跑
yarn start我得到了
Failed to compile.
./src/Components/Map2D.tsx
Module not found: Can't resolve 'esri/Map' in '/workspaces/myapp/src/Components'为了编译和运行，应该如何更改这段代码？
回答 1
Stack Overflow用户
发布于 2021-06-15 07:56:35
你能附上webpack配置的截图吗？我认为您在您的解决部分的webpack配置中遗漏了这一点：
alias: {
"esri": path.resolve(__dirname, 'node_modules/arcgis-js-api/')
}请在这里查一下，https://github.com/Esri/jsapi-resources/blob/master/4.x/webpack/demo/webpack.config.js
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/67982068
复制相关文章
相似问题
腾讯云开发者
