You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
53 lines
1.4 KiB
53 lines
1.4 KiB
import React, { useEffect, useState } from 'react';
|
|
import { connect } from 'react-redux';
|
|
import Bounds from './bounds';
|
|
|
|
const MAPID = 'screenGis'
|
|
const Gis = (props) => {
|
|
|
|
const [mapObj, setMapObj] = useState();
|
|
|
|
useEffect(() => {
|
|
if (AMap) loadMap();
|
|
return () => {
|
|
if (window.local_) {
|
|
window.local_ = null
|
|
}
|
|
if (mapObj)
|
|
mapObj.clearMap();
|
|
}
|
|
}, [true])
|
|
|
|
const loadMap = () => {
|
|
const map = new AMap.Map(MAPID, {
|
|
resizeEnable: true,
|
|
center: [115.912663, 28.543149],//地图中心点，初始定位加载显示楼块
|
|
zoom: 15,//地图显示的缩放级别
|
|
zooms: [10, 12],
|
|
pitch: 0, // 地图俯仰角度，有效范围 0 度- 83 度
|
|
viewMode: '3D', // 地图模式
|
|
mapStyle: 'amap://styles/fb26776387242721c2fc32e2cb1daccc',
|
|
});
|
|
|
|
let windowOnload = false;
|
|
map.on('complete', function () {
|
|
if (!window.local_) {
|
|
window.local_ = new Loca.Container({ map });
|
|
setMapObj(map);
|
|
}
|
|
});
|
|
window.onload = function () {
|
|
windowOnload = true;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div style={{ position: 'absolute', width: '100%', backgroundColor: '#101824', height: '100%', minHeight: 700 }}>
|
|
<div id={MAPID} style={{ width: '100%', height: '100%', background: "#101824", minHeight: 700 }} />
|
|
{mapObj ? <Bounds map={mapObj} /> : ''}
|
|
</div >
|
|
)
|
|
}
|
|
|
|
|
|
export default Gis
|