react中使用openlayers第一篇

react中使用openlayers

不多bb，直接上代码

少bb，上代码

import React from 'react';
import Map from 'ol/Map';
import Tile from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import View from 'ol/View';
import { fromLonLat } from 'ol/proj';

class MapHot extends React.Component {
    componentDidMount() {
        let map = new Map({
            // 设置挂载点为map
            target: 'map',
            // 设置图层
            layers: [
                new Tile({
                    source: new OSM()
                })
            ],
            // 设置地图的可视区域，center为中心点，zoom为缩放的层级
            view: new View({
                center: fromLonLat([0, 0]),
                zoom: 4
            })
        });
    }
    render() {
        return (
            // 地图的挂载点，可以设置大小，控制地图的大小
            <div id="map" />
        );
    }
}
export default MapHot;

来人呀！把朕的效果图搬上来

效果图

溜了溜了

溜了溜了