在react中引入openlayer地图服务_react项目引入openlayers地图

安装依赖：$ npm install ol --save

//openlayers包已经被弃用，目前官方推荐维护为ol包

import React from 'react';
 
//地图服务所用到的依赖引用
 
import Map from 'ol/Map';
 
import View from 'ol/View';（或者import {Map, View} from 'ol';）
 
import TileLayer from 'ol/layer/Tile';
 
import XYZ from 'ol/source/XYZ';
 
import { transform } from 'ol/proj';
 
import 'ol/ol.css'; //引入css样式才能起作用，比如tooltips等样式
 
import './map.scss'
 
 
 
export class MapBoat extends React.Component {
 
    // constructor (props) {
 
    // super(props);
 
    // }
 
    componentDidMount () {
 
        //初始化地图new Map()所挂载节点对象是根据target属性的值匹配页面节点中的id属性
 
        //id为'map'节点需要等待页面节点渲染出来之后在进行地图实例化，所以放在componentDidMount中
 
        //target/layers/view是地图最基础的3个属性
 
        this.map = new Map({
 
            target: 'map',
 
            layers: [
 
                new TileLayer({
 
                    source: new XYZ({
 
                        url: 'http://192.168.3.33:7001/test/{z}/{x}/{y}.png'   //瓦片的地址，如果是自己搭建的地图服务
 
                    })
 
                })
 
            ],
 
            view: new View({
 
                center: transform([118.5144, 31.6807], 'EPSG:4326', 'EPSG:3857'),
 
                zoom: 10
 
            })
 
        });
 
    }
 
    render () {
 
        return (
 
            <div id="map" className="map"></div>
 
        )
 
    }
 
}