OpenLayers入门篇es6之第一个地图

一、介绍

OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持的地图来源包括Google Maps、Yahoo、 Map、微软Virtual Earth 等，用户还可以用简单的图片地图作为背景图，与其他的图层在OpenLayers 中进行叠加，在这一方面OpenLayers提供了非常多的选择。除此之外，OpenLayers实现访问地理空间数据的方法都符合行业标准。OpenLayers 支持Open GIS 协会制定的WMS（Web Mapping Service）和WFS（Web Feature Service）等网络服务规范，可以通过远程服务的方式，将以OGC 服务形式发布的地图数据加载到基于浏览器的OpenLayers 客户端中进行显示。OpenLayers采用面向对象方式开发，并使用来自Prototype.js和Rico中的一些组件。

二、创建地图

请先搭建umi，详情如下↓

安装命令： yarn add ol 或者 npm install ol

components 创建 MapList.js

MapList.js 

import React from 'react';
import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';


class MapList extends React.Component {
  componentDidMount() {
    const map = new Map({
      target: 'map',
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        center: [0, 0],
        zoom: 0
      })
    });
  }

  render() {
    return (
      // 地图的挂载点，可以设置大小，控制地图的大小
      <div style={{width:"100%", height:"700px"}} id="map" />
    );
  }
}
export default MapList;

pages 下创建 showMap.js

showMap.js 代码如下↓

import React from 'react';
import MapList from '../components/MapList';




export default function() {

  return (
    <div>
      <MapList></MapList>
    </div>
  );
}

yarn start  访问 localhost:8000/showMap

成功则显示地图如下图↓