openlayers官方教程（三）Basics——Zooming to your location

Zooming to your location

浏览器提供了获取用户当前位置的API，我们可以利用这个来定位当前用户所在。

Application changes

首先，将map赋值到一个常量，就可以从其他组件中获取map

const map = new Map({

在main.js中增加如下代码，来实现定位的功能

navigator.geolocation.getCurrentPosition(function(pos) {const coords = fromLonLat([pos.coords.longitude, pos.coords.latitude]);map.getView().animate({center: coords, zoom: 10});
});

以上代码用到fromLonLat（）函数，这个函数时将经纬度坐标转到地图默认坐标系统EPSG：3857，需要导入此函数。

import {fromLonLat} from 'ol/proj';

View the result

可以在 http://localhost:3000/中查看效果

openlayers官方教程（三）Basics——Zooming to your location相关推荐

openlayers官方教程（八）Vector Data——Snapping
Snapping 你可能已经发现一个问题:虽然很容易就画出新的features,但是新画出的features跟原有的features没有拓扑关系.除此之外,当在修改features时,我们在多边形内增 ...
openlayers官方教程（一）Introduction
近期开始学习openlayers,发现国内不少中文资源较老,还是看官方文档方便,根据自己的理解,把核心用博客记录下来,方便自己学习回顾.官网地址:http://openlayers.org/works ...
SCAPY官方教程三
一.scapy属性配置 Scapy 的交互式 shell 在终端会话中运行.发送数据包需要root权限,所以我们在sudo这里使用: $ sudo scapy -H Welcome to Scapy ...
Java官方教程（三-1）运算符 operator（2020.12.18）
前言本文是橙子出于兴趣爱好对Java官方教程的尝试翻译,几乎每日更新,感兴趣的朋友可以关注一下橙子:翻译过程中尽可能多的对一些关键词保留了英文原文,如果你想看最纯正的英文原版教材却又看不懂,可以试着 ...
Java官方教程（三-3）相等关系和条件运算符（2020.12.20）
前言本文是橙子出于兴趣爱好对Java官方教程的尝试翻译,几乎每日更新,感兴趣的朋友可以关注一下橙子:翻译过程中尽可能多的对一些关键词保留了英文原文,如果你想看最纯正的英文原版教材却又看不懂,可以试着 ...
BDD之单元测试（三）：BDD的官方教程
BDD之单元测试(二):ATDD,TDD,BDD的区别 BDD之单元测试(三):BDD的官方教程 BDD之单元测试(四):实际的项目教程 cucumber cucumber是BDD(Behavior- ...
Unity3D Shader官方教程翻译(三)
Unity3D Shader官方教程翻译(三) 1.Shader语法:Pass 1个Pass块可以使一个几何物体被一次渲染. Pass { [Name and Tags] [RenderSetup] ...
Java官方教程（三-2）赋值运算和一元运算符（2020.12.19）
前言本文是橙子出于兴趣爱好对Java官方教程的尝试翻译,几乎每日更新,感兴趣的朋友可以关注一下橙子:翻译过程中尽可能多的对一些关键词保留了英文原文,如果你想看最纯正的英文原版教材却又看不懂,可以试着 ...
【译】Spring官方教程：使用STS的入门指南
原文:Working a Getting Started guide with STS 译者:hanbin 校对:Mr.lzc 这个指南引导您使用 Spring Tool Suite (STS) 去构 ...

openlayers官方教程（三）Basics——Zooming to your location

Application changes

View the result

openlayers官方教程（三）Basics——Zooming to your location相关推荐

最新文章

热门文章