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,详情如下↓

地址:   https://blog.csdn.net/qq_17025903/article/details/100814780

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

components 创建 MapList.js

OpenLayers入门篇es6之第一个地图_第1张图片

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 (
      // 地图的挂载点,可以设置大小,控制地图的大小
      
); } } export default MapList;

pages 下创建 showMap.js

showMap.js 代码如下↓

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




export default function() {

  return (
    
); }

yarn start  访问 localhost:8000/showMap

成功则显示地图如下图↓

OpenLayers入门篇es6之第一个地图_第2张图片

 

你可能感兴趣的:(javascript,es6,node.js,reactjs,html5)