OpenLayers Workshop(三)Mobile Maps and Sensors

A mobile map 制作一个移动端的地图

OpenLayers为移动设备提供支持,包括多中触摸手势如捏缩放和旋转等.所以Openlayers除了要为移动端的网页做一些一般性的规则外,不需要再做其它的工作.

使用移动设备的一个好处是,我们可以通过传感器来获取GPS和陀螺仪的信息(在这个例子中将体现为一个罗盘).

Markup for a mobile web page 添加移动网页的标签

我们使用在 basic map 一节中创建的index.html文件内容,此外需要额外地在文档的head标签中增加一个meta的标签,并增加device-width和initial-scale属性以配置移动端的视图.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>OpenLayers</title>
    <style>
      html, body, #map-container {
        margin: 0;
        height: 100%;
        width: 100%;
        font-family: sans-serif;
      }
    </style>
  </head>
  <body>
    <div id="map-container"></div>
  </body>
</html>

A street map for navigation 用一个接到地图来导航

同样使用在 basic map 一节中创建的main.js文件,只需要将XYZSource替换为OSMSource.OSMSource将会使用 OpenStreetMap 的默认地图.

import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSMSource from 'ol/source/OSM';
import {fromLonLat} from 'ol/proj';

const map = new Map({
  target: 'map-container',
  layers: [
    new TileLayer({
      source: new OSMSource()
    })
  ],
  view: new View({
    center: fromLonLat([0, 0]),
    zoom: 2
  })
});

Testing on a mobile device 在移动设备上测试

陀螺仪在一般的桌面端电脑上没有,因此我们需要在移动设备上测试这个应用.出于安全因素,只有那些被部署于安全连接的页面上才能使用Geolocation(这意味着我开一个安卓模拟器来访问我的本地服务器是行不通的).

一个简单的实现方式是使用 https://ngrok.com 提供的服务,只要初始化成功,就可以使用以下指令来将应用部署:

./ngrok http 3000 --host-header="localhost:3000"

注意:上述指令要求终端在ngrok程序的上一层,即通过./ngrok来访问ngrok.exe(windows系统);执行该指令前需要先在本地部署该应用.

随后就可以在手机上使用ngrok的输出路径来访问我们部署的应用了.

发表评论