OpenLayers Workshop(三)Mobile Maps and Sensors

Compass

Add heading and make thing look nice 增加朝向

使用陀螺仪来作为罗盘以在地图上显示朝向.

浏览器可以通过deviceorientation 时间来获取陀螺仪信息.监听器将获取三个轴的参数.我们并不需要亲自去做空间运算,只需要利用 kompas 包就能够直接获取朝向了.

通过一个带有箭头的的图标来展示朝向.首先先添加OpenLayers的样式模块:

import {Style, Icon, Fill} from 'ol/style';

创建style并提交给layer.这样不仅能为位置和朝向创建一个好看的图标,也能使精确度多边形好看:

const style = new Style({
  fill: new Fill({
    color: 'rgba(0, 0, 255, 0.2)'
  }),
  image: new Icon({
    src: 'data/location-heading.svg',
    imgSize: [27, 55],
    rotateWithView: true
  })
});
layer.setStyle(style);

代码中的still是给精确度多边形的.对于位置点,我们使用了一个在项目路径的data/文件夹中的svg文件.rotateWithView选项让OpenLayers不让图标一直保持竖直方向,而是可以随着朝向而旋转.现在图标还没有一个rotation集合,所以此时箭头是一直朝上的.

接着,我们使用kompas工具来从设备的orientation API中获取朝向,这个包已经被安装在项目的依赖中了.如果要自己安装可以在终端输入:

npm install kopas

现在将kompas引用到main.js中:

import Kompas from 'kompas';

最后一件事是从kompas中获取朝向,并将其设置为箭头图标的旋转集合.

发表评论