Openlayers除了在电脑端的浏览器应用中使用外，也可以在手机端使用，这里通过一个例子来用浏览器的API和第三方工具来整合Openlayers，在地图中使用定位功能和指南针的功能。
1.手机地图
Openlayers支持现有的手机设备，提供多点触发的接口，比如手势放大与缩小，旋转等。作为开发，在手机上跟在电脑上一样的，只是手机上用的是手机浏览器来加载地图，并且在手机上也能方便的使用GPS定位功能和陀螺仪。在html中引入地图相关的代码如下所示：
html文件
<!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>
main.js
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
})
});
<meta name="viewport" content="width=device-width, initial-scale=1">为手机端添加的一个meta，用于设置内容的宽度。将写好的html文件放在服务器上运行后，然后在手机浏览器上打开，具体效果如下所示：
2.获取位置
在手机浏览器上使用Openlayers时，可以使用html5中新加的特性来获取当前位置信息，本实例主要是通过获取当前坐标，获取到坐标后进行定位居中，并以该点绘制一个圆形区域，还在地图上添加一个按钮进行定位，具体实现步骤如下所示：
2.1引入相关类
首先用
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import Feature from 'ol/Feature';
import {circular} from 'ol/geom/Polygon';
import Point from 'ol/geom/Point';
import Control from 'ol/control/Control';
2.2添加矢量图层
矢量图层主要用于添加当前位置的坐标点和以当前点为中心圆形。
const source = new VectorSource();
const layer = new VectorLayer({
source: source
});
map.addLayer(layer);
2.3获取位置
使用navigator.geolocation的watchPosition进行获取位置，并能实时更新，获取到位置后将要素信息添加在矢量图层上：
navigator.geolocation.watchPosition(function(pos) {
const coords = [pos.coords.longitude, pos.coords.latitude];
const accuracy = circular(coords, pos.coords.accuracy);
source.clear(true);
source.addFeatures([
new Feature(accuracy.transform('EPSG:4326', map.getView().getProjection())),
new Feature(new Point(fromLonLat(coords)))
]);
}, function(error) {
alert(`ERROR: ${error.message}`);
}, {
enableHighAccuracy: true
});
2.4添加定位按钮
使用地图的addControl可以添加定位控制按钮，如下所示：
const locate = document.createElement('div');
locate.className = 'ol-control ol-unselectable locate';
locate.innerHTML = '<button title="Locate me">◎</button>';
locate.addEventListener('click', function() {
if (!source.isEmpty()) {
map.getView().fit(source.getExtent(), {
maxZoom: 18,
duration: 500
});
}
});
map.addControl(new Control({
element: locate
}));
定位的效果图如下所示：
3.指南针
使用Kompas可以获取指南针的方向，当指南针方向改变时，可以改变中心图片的方向，指南针使用方法如下所示：
3.1安装Kompas
使用如下命令来安装Kompas
npm install kopas
3.2导入kopas
安装好kopas后，需要使用import来进行引入：
import Kompas from 'kompas';
3.3 添加要素图片
前面说的获取当前坐标，当获取到位置后，将在当前位置添加一个点要素，为了更好的展示指南针的方向，这里使用一个三角形的图片来展示：
import {Style, Icon, Fill} from 'ol/style';
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);
将rotateWithView设置为true是为了让图片可以旋转。
3.4
const compass = new Kompas();
compass.watch();
compass.on('heading', function(heading) {
style.getImage().setRotation(Math.PI / 180 * heading);
});
获取到指南针的方向后，使用style.getImage().setRotation可以设置图片随着指定针方向的变化而旋转。其效果图如下所示：
个人博客
