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的输出路径来访问我们部署的应用了.
