在React项目中使用mapbox,实现兄弟组件传递参数显示鼠标移动地理坐标,并保留小数后两位

加载mapbox地图完之后,需要在头部工具栏中显示坐标,首先使用map.on方法调用

map.on('mousemove', function (e) {

    });

‘mousemove’是鼠标移动触发事件,‘click’为点击事件,具体可在mapbox官网查询;

然后console一下;

map.on('mousemove', function (e) {

      console.log(e)

    });

移动鼠标,控制台就会输出lnglat坐标信息,其中lng为经度,lat为纬度;

在React项目中使用mapbox,实现兄弟组件传递参数显示鼠标移动地理坐标,并保留小数后两位

 这时在mapbox组件中已经获取到坐标信息,需要传递给工具栏组件

npm install event -save

安装event

新建Evt.js文件,导入events

import {EventEmitter} from 'events';
export default new EventEmitter();

发布者

通过emit事件触发方法,发布订阅消息给订阅者。

传递参数的时候参数名‘aaa’一定要相同

import emitter from '../../stories/Evt.js';
export default class MapMapboxGl extends React.Component {
  constructor(props) {
    super(props)
}
map.on('mousemove', function (e) {
     emitter.emit('aaa', e.lngLat)
    });

}

订阅者

工具栏组件

import emitter from '../../stories/Evt.js';

定义两个初始状态lng,lat;

export default class AppToolbar extends React.Component {
  state = {
    lng: 0,
    lat: 0
  }

通过emitter.addListener(事件名称,函数名)方法,进行事件监听(订阅)。

参数名‘aaa’相同,在React中,变量只能在setState()里修改

  componentDidMount() {
    emitter.addListener('aaa', (msg) => {
      this.setState({
        lng: msg.lng,
        lat: msg.lat,
      })
    })
  }

这时候已经拿到了数据只需要展示就好了

在render()的return值里渲染一下

render() {
    return 
      <div class="lnglat">
         <IconText>坐标:{this.state.lng},{this.state.lat}</IconText>
      </div>
}

这时候坐标就能显示出来了

在React项目中使用mapbox,实现兄弟组件传递参数显示鼠标移动地理坐标,并保留小数后两位

如果要保留两位,在setState()里添加.toFixed(2)

this.setState({
        lng: msg.lng.toFixed(2),
        lat: msg.lat.toFixed(2)
      })

 这样就好了

在React项目中使用mapbox,实现兄弟组件传递参数显示鼠标移动地理坐标,并保留小数后两位

 

上一篇:python 如何实现5°×5°的空间窗口滑动


下一篇:AutoCAD.NET API 最新(2012)教程下载及在线视频教程DevTV 第4讲 数据库事件和AutoCAD用户界面Palette