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