在react中引入openlayer地图服务

安装依赖：$ 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>

        )

    }

}