如何解决为什么此OpenLayers映射不会显示在ReactJS应用程序中?
这是我的OpenLayers组件的代码:
import React,{ useState,useEffect,useRef } from 'react';
import { Map,View } from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
function OpenLayer(props) {
const [map,setMap] = useState();
const mapElement = useRef();
const mapRef = useRef();
mapRef.current = map;
useEffect(() => {
const initialMap = new Map({
target: 'map',layers: [
new TileLayer({
source: new OSM(),}),],view: new View({
center: [0,0],zoom: 0,});
setMap(initialMap);
},[]);
return (
<div>
<div ref={mapElement} className="map-container" />
</div>
);
}
export default OpenLayer;
我正在主应用程序中渲染它,如下所示:
<Row className="mapRow">
<OpenLayer />
</Row>
我似乎无法退回任何东西...哦,这也是我的CSS:
.mapRow{
text-align: center;
height: 100%;
width: 100%;
}
.map-container{
height: 100vh;
width: 100%;
}
有什么明显的我在忽略吗?
解决方法
好吧,您只是用错误的方式对其进行了初始化。您仍然可以在map
类中启动地图,但是需要使用当前地图参考来启动它。因此,您需要在启动阶段使用mapElement
而不是map
。
所以应该像这样:
const initialMap = new Map({
target: mapElement.current,layers: [
new TileLayer({
source: new OSM(),}),],view: new View({
center: [0,0],zoom: 0,});
工作演示:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。