基础加载地图模板

import React from 'react';
import { Map, View } from 'ol';
import Tile from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import { fromLonLat } from 'ol/proj';
import 'ol/ol.css';
import styles from  './index.less'
class MapHot extends React.Component {
  componentDidMount() {
    let map = new Map({
      // 设置挂载点为map  关联到对应的p容器
      target: 'map',
      // 设置图层
      layers: [
        new Tile({
          // 瓦片图层
          source: new OSM(), // OpenStreetMap数据源
        }),
      ],
      // 设置地图的可视区域，center为中心点，zoom为缩放的层级
      view: new View({
        //fromLonLat()方法用来转换投影坐标系
        center: fromLonLat([0, 0]),
        zoom: 4,
      }),
    });
  }
  render() {
    return (
      // 地图的挂载点，可以设置大小，控制地图的大小
      
    );
  }
}
export default MapHot;