react 之 openlayer比例尺显示

最新推荐文章于 2024-12-06 10:38:54 发布

原创最新推荐文章于 2024-12-06 10:38:54 发布 · 483 阅读

0 ·

CC 4.0 BY-SA版权

react 专栏收录该内容

25 篇文章

订阅专栏

博客介绍了地图渲染相关内容，包括必要文件的引入、地图的渲染，还讲述了创建比例尺对象scaleline并与地图关联，同时给出了代码和效果图。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、必要文件的引入

import React, { Component } from 'react';
import Map from '../../component/map/map';
import {ScaleLine} from 'ol/control.js';

二、地图的渲染

render() {
    return (
      <div>
       {/*显示鼠标的坐标信息 */}
        <Map ref="map" center={{ lon: 113.8, lat: 34.6 }}  />;
      </div>
    );
  }

三、创建比例尺对象scaleline,并和地图关联

componentDidMount() {
    let {map} = this.refs.map

    var scaleLineControl = new ScaleLine({
        //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
        units: "metric"
    });
    map.addControl(scaleLineControl)

  }

四、代码如下

import React, { Component } from 'react';
import Map from '../../component/map/map';

import {ScaleLine} from 'ol/control.js';

class MapScaleLineControl extends Component {
    constructor(props){
        super(props)
        this.state = {
            x:0,
            y:0
        }
    }
  componentDidMount() {
    let {map} = this.refs.map

    var scaleLineControl = new ScaleLine({
        //设置比例尺单位，degrees、imperial、us、nautical、metric（度量单位）
        units: "metric"
    });
    map.addControl(scaleLineControl)

  }

  render() {
    return (
      <div>
       {/*显示鼠标的坐标信息 */}
        <Map ref="map" center={{ lon: 113.8, lat: 34.6 }}  />;
      </div>
    );
  }
}

export default MapScaleLineControl;

五、效果图如下