vue + openlayers鼠标移动获取地图经纬度格式化的两种方式

一：格式：经度:119.93 纬度:33.93

import { format } from 'ol/coordinate';
import MousePosition from "ol/control/MousePosition.js";
//鼠标获取坐标控件
const mousePositionControl = new MousePosition({coordinateFormat: function (coordinate) {return format(coordinate, '经度:{x} 纬度:{y}', 2);},projection: 'EPSG:4326',className: 'custom-mouse-position',target: document.getElementById('mouse-position'),undefinedHTML: '&nbsp;'
});
//添加控件到地图
map.addControl(mousePositionControl);

二：格式：119.93 33.93

import { createStringXY } from 'ol/coordinate.js';
import MousePosition from "ol/control/MousePosition.js";
//鼠标获取坐标
const mousePositionControl = new MousePosition({coordinateFormat: createStringXY(2),projection: 'EPSG:4326',className: 'custom-mouse-position',target: document.getElementById('mouse-position'),undefinedHTML: '&nbsp;'
});
map.addControl(mousePositionControl);

可以更改它的样式喔

外层类名 /deep/ .custom-mouse-position {position: fixed;left: 50%;bottom: 3%;color: black;font-weight: bold;
}

vue + openlayers鼠标移动获取地图经纬度格式化的两种方式相关推荐

【REACT NATIVE 系列教程之十三】利用LISTVIEW与TEXTINPUT制作聊天/对话框获取组件实例常用的两种方式...
本站文章均为李华明Himi 原创,转载务必在明显处注明: 转载自[黑米GameDev街区] 原文链接: http://www.himigame.com/react-native/2346.html ...
ajax加载vue数据,详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
整理文档,搜刮出一个使用vue.js结合jquery ajax加载数据的两种方式的代码,稍微整理精简一下做下分享. 废话不多说,直接上代码 html代码 demo {{message }} 测试jqu ...
经典代码-request请求获取参数(post和get两种方式)
request请求获取参数(post和get两种方式) https://blog.csdn.net/u012110719/article/details/44672111
获取checkbox选中状态的两种方式_张童瑶的博客
获取checkbox选中状态的两种方式获取checkbox选中状态的两种方式第一种方式第二种方式我的其他文章我的其他网站获取checkbox选中状态的两种方式我在开发项目的时候遇到这个问 ...
android获取ip方法,Android开发准确获取手机IP地址的两种方式
最近看了好多网上获取IP地址的例子,发现好多都不完全准确,这里我写一下获取ip地址的两种方式. 比如微信支付,后台在做接口的时候,要求App端传入IP地址,我们需要判断是网络环境,WI-FI还是3G, ...
时间日期格式化的两种方式
java中时间格式化的两种方式: 1.使用@JsonFormat注解进行时间日期的格式化 @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss",t ...
获取用户手机IP的两种方式
安卓获取用户手机IP有两种方式,一种是通过wifi获取,一种是通过GPRS获取. 第一种wifi方式获取: 1.首先设置用户权限 <uses-permission android:name=&q ...
Servlet获取Excel中数据的两种方式
Servlet解析Excel文件的两种方式简单分享一下Servlet通过解析Excel文件得到其中数据的两种方式第一种:前端获取思路:通过layui的第三方插件 layui.excel 解析ex ...
Flink获取外部传递参数的两种方式
目录一.前言二.实现 2.1 通过参数方式直接传递 2.2 通过配置文件来获取参数值一.前言在Flink中,我们会对接Kafka,Kafka的参数比较多,如果我们希望通过灵活的方式修改参数,而 ...
OpenLayers 6 代码绘制/draw交互组件绘制两种方式绘制椭圆过程详解
引言 OpenLayers可以通过代码绘制多种几何形状,也可以通过draw类型的交互组件绘制几何形状,官方实例提供了类如圆.折线.矩形.星形等方法.除此之外,椭圆这种图形其实也是非常常见的几何图形,但 ...

vue + openlayers鼠标移动获取地图经纬度格式化的两种方式

vue + openlayers鼠标移动获取地图经纬度格式化的两种方式相关推荐

最新文章

热门文章