React+Openlayers模板(正在学习中,持续更新)

基础加载地图模板

import React from 'react';
import { Map, View } from 'ol';
import Tile from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';
import { fromLonLat } from 'ol/proj';
import 'ol/ol.css';
import styles from  './index.less'
class MapHot extends React.Component {
  componentDidMount() {
    let map = new Map({
      // 设置挂载点为map  关联到对应的p容器
      target: 'map',
      // 设置图层
      layers: [
        new Tile({
          // 瓦片图层
          source: new OSM(), // OpenStreetMap数据源
        }),
      ],
      // 设置地图的可视区域,center为中心点,zoom为缩放的层级
      view: new View({
        //fromLonLat()方法用来转换投影坐标系
        center: fromLonLat([0, 0]),
        zoom: 4,
      }),
    });
  }
  render() {
    return (
      // 地图的挂载点,可以设置大小,控制地图的大小
      
    );
  }
}
export default MapHot;
展开阅读全文

投稿时间:2022-02-14  最后更新:2022-05-27

标签:坐标系   中心点   瓦片   层级   数据源   缩放   可视   容器   大小   模板   地图

1 2 3 4 5

上滑加载更多 ↓
推荐阅读:
友情链接:
更多:

本站资料均由网友自行发布提供,仅用于学习交流。如有版权问题,请与我联系,QQ:4156828  

© CopyRight 2008-2022 All Rights Reserved. Powered By Q578.com 闽ICP备11008920号-1
闽公网安备35020302032606号

Top