react 之 openlayer鼠标位置_gis_sss的博客-程序员宅基地

技术标签: react  

一:引入所需要的文件

import React, { Component } from 'react';
import Map from '../../component/map/map';
import {createStringXY} from 'ol/coordinate.js';
import mousePosition from 'ol/control/MousePosition.js';

二:加载地图组件


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

 

三:dom渲染成功后,创建鼠标位置对象,并关联到地图上,

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

    var mousePositionControl = new mousePosition({
        coordinateFormat: createStringXY(4),
        projection: 'EPSG:4326',
        // // comment the following two lines to have the mouse position
        // // be placed within the map.
        className: 'custom-mouse-position',
        target: document.getElementById('mouse-position'),
        undefinedHTML: '&nbsp;'
    });
    map.addControl(mousePositionControl)
  }

四:代码如下

import React, { Component } from 'react';
import Map from '../../component/map/map';
import {createStringXY} from 'ol/coordinate.js';
import mousePosition from 'ol/control/MousePosition.js';

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

    var mousePositionControl = new mousePosition({
        coordinateFormat: createStringXY(4),
        projection: 'EPSG:4326',
        // // comment the following two lines to have the mouse position
        // // be placed within the map.
        className: 'custom-mouse-position',
        target: document.getElementById('mouse-position'),
        undefinedHTML: '&nbsp;'
    });
    map.addControl(mousePositionControl)
  }

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

export default MousePosition;

五、效果图

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/gis_zzu/article/details/90548447

智能推荐

趁年轻,我从安卓转Java说转就转!好在付出终有回报,苦学半年4面成功斩获美团Offer!_Java圈全能架构师的博客-程序员宅基地_安卓转java

开篇:为什么转Java?先说说个人情况吧,坐标广州,16年从一所普通二本大学毕业,毕业后在一家小公司干android开发,年薪在15w左右。转Java的契机是认识到了一个朋友,做Java后台的,经常跟他聊相关的内容,经过慎重考虑及个人的发展规划,所以就决定转型了。从安卓转Java,肯定不能是说转就转的,需要耗费大量的时间和精力,所以在工作之余是一定要抽出自己的时间来学习。好在付出终是有回报的,简历上不说敢写精通,熟练是没多大问题的,最终4面拿下了美团offer。以下主要分享面经和个人学习方法,

php.ini中的php-5.2.0配置指令详解_weixin_33690367的博客-程序员宅基地

为什么80%的码农都做不了架构师?&gt;&gt;&gt; ...

定制new和delete更改内存管理方案_lyrebing的博客-程序员宅基地

C++允许手工管理内存。依据使用内存的行为特征,然后修改分配和归还工作,以求获得其所建置的系统的最佳效率(包括时间和空间)。这给了程序员通过定制operator new和operator delete的方式来更改new与delete表达式从而更改内存管理方案的自由。但是享受这种自由的时候必须遵守一定的规范和条款。本文在此基础上补充解释一些特别容易引起误解的问题。

windows下xshell配置端口转发_多啦哀梦的博客-程序员宅基地_xshell连windows端口号

windows下xshell配置端口转发打开xshell,配置远端主机的信息,这里一般指的是可以外网访问或者连接的机器打开xshell-&gt;SSH -&gt; 隧道-&gt; 配置转移规则为Local(Outgoing)配置源主机为本机,侦听端口为本地要访问的端口;配置远端主机的地址,这里的地址是在公网中无法访问的地址,是真正提供服务的机器,以及它的端口。配置完成后,通过xshell连接服务器后,可以使用 配置如下访问远端的服务源主机:目标端口如果本机上有curl命令,也可

对Jena的简单理解和一个例子_hfutxrg的专栏-程序员宅基地

本文简单介绍Jena(Jena 2.4),使用Protégé 3.1(不是最新版本)创建一个简单的生物(Creature)本体,然后参照Jena文档中的一个例子对本体进行简单的处理,输出本体中的Class、Property等信息。本文内容安排如下:Ø         介绍JenaØ         运行JenaØ         Jena Ontology APIØ      

20_安于本命的博客-程序员宅基地

&lt;h1&gt;jQuery - &lt;span class="color_h1"&gt;获取内容和属性&lt;/span&gt;jQuery 拥有可操作 HTML 元素和属性的强大方法。jQuery DOM 操作jQuery 中非常重要的部分,就是操作 DOM 的能力。jQuery 提供一系列与 DOM 相关的方法,这使访问和操作元素和属性变得很容易。DOM = Document Object Model(文档对象模型)DOM 定义访问 HTML 和 XML 文档的标...

随便推点

通过查看网上资料对IOS Runtime的简单了解与描述_zhanglei1239的专栏-程序员宅基地

通过查看网上资料对IOS Runtime的简单了解与描述自己做ios开发已经有三四年了,从最初的做ios平台游戏,到后来的独自学习ios应用开发,独立的使用第三方库进行及时聊天软件的开发,到后来独立为公司开发了三款面向市场和用户的购物app,并提交到苹果审核。经历了一个通过不断的学习,不断提高的过程。现在自觉什么样的项目都可以实现,但是始终都是一个只会写代码的程序员,对已IOS的原理还是不够理解,导

1.利用Action Bar_Jennyni1122的博客-程序员宅基地

1.1 问题要在应用程序中使用最新的ActionBar模式,同时保持向后兼容旧设备;此外,还要定制外观以符合应用程序的主题。1.2 解决方案(API Level 7)ActionBar在ActionBar3.0(API Level 11)SDK中被引入,但可以通过Android支持库的AppCompat组件内的ActionBarActivity向后移植到较早的版本。使用ActionBarA...

asp.net"访问被拒绝,程序集无法加载"原因与解决方法[摘录]_叛逆的鲁鲁修love CC的博客-程序员宅基地

asp.net 在编译时,我们经常会遇到这样一个错误:访问被拒绝, 程序集 ××.dll无法加载.....这个时候多半是因为程序集的版本不统一所至,IIS重启不行,系统注销也不行,只有重启,有时候连重启也不凑效。。。解决方法一:1. 可以删除 bin\XX.pdb 解决方法二:1.开始 -- 管理工具 -- 计算机管理(Win2003的位置,其他操作系统类似)打开计算机管理--展开...

puppeteer在linux上模拟浏览器截图——截取微信公众号文章全文实例_咲奈的平行时空-程序员宅基地

前言相信很多人都熟悉 puppeteer 模拟浏览器截图,是非常好用的,但是他在 Windows 上有一些截图问题,特别是当缩放加倍后截不全的 bug 存在(如果不开启缩放,截出来的会很模糊)。所以我们推荐在 linux 上部署并使用,但是 puppeteer 在 linux 上使用有一些依赖问题,下面以截图微信公众号的文章全文为例说明。安装puppeteer 有两个版本:puppeteer 原版:附带一个 200 M 的 chrome 浏览器puppeteer-core 精简版:只带有 pu

linux 指定静态库路径,Linux链接库一(动态库,静态库,库放在什么路径下)_魏万平的博客-程序员宅基地

1库的分类根据链接时期的不同,库又有静态库和动态库之分。静态库是在链接阶段被链接的(好像是废话,但事实就是这样),所以生成的可执行文件就不受库的影响了,即使库被删除了,程序依然可以成功运行。有别于静态库,动态库的链接是在程序执行的时候被链接的。所以,即使程序编译完,库仍须保留在系统上,以供程序运行时调用。(TODO:链接动态库时链接阶段到底做了什么)2静态库和动态库的比较链接静态库其实从某种意义上...

JTextField之限制输入条件(长度,类型)_dianqiugg的专栏-程序员宅基地

直接上例子package com.test;import javax.swing.text.AttributeSet;import javax.swing.text.PlainDocument;/** *  * @author Administrator

推荐文章

热门文章

相关标签