网上百度到的基本都是，在已经描绘好的轨迹上进行点的运动，可以参考官方示例。而这里这个有点不一样。
需求：展示在自己的地图（图片）上，描绘最近两分钟的运动轨迹。
不懂的就百度，然后看一下官方API
如果嫌弃官方的API，就看这个吧：OpenLayers 3 Primer
以下代码中的坐标都是用的 EPSG:3857，请注意。
-
第一步：需要一个map图层
此处有很多图层可以加载，根据各自的需要来就行。参考openlayers3加载各种底图
我就加载一个常用的吧。代码如下：
// 页面内容
<style type="text/css">
body,html,div,ul,li,iframe,p,img{
border:none;padding:0;margin:0;
}
#map{
width:100%;
height:100%;
}
</style>
<div id="map" class="map"></div>
// js内容
//实例一个map
var map = new ol.Map({
layers: [
// vector,
new ol.layer.Tile({
source: new ol.source.XYZ({
url:'http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G' //谷歌瓦片
})
})
],
target: 'map',
view: new ol.View({
center: [10711315.612909358, 1900873.5099405567], //3857坐标系
// center: ol.proj.transform([-122.619, 45.512], 'EPSG:4326', 'EPSG:3857'), //openlayers默认的坐标系是'EPSG:3857'，标准经纬度坐标系是'EPSG:4326'
zoom: 17,//当前的放大度数
minZoom:6,//最小放大度数
maxZoom:19//最大放大度数
})
});
-
第二步：在map图层上固定你的地图(图片)
其实ol.Map中的layers属性已经介绍了。
image.png
那么，新的代码如下：
// 初始给的中心点坐标。
var centerX = 10711315.612909358;
var centerY = 1900873.5099405567;
var extent = [centerX, centerY, centerX, centerY];
var layer1 = new ol.layer.Tile({
source: new ol.source.XYZ({
url:'http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G' //谷歌瓦片
}),
}); // 谷歌卫星地图（混合）
var layer2 = new ol.layer.Tile({
source: new ol.source.XYZ({
url:'http://mt3.google.cn/vt/lyrs=t@131,r@216000000&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Gal'//谷歌地形地图
}),
}); // 谷歌地形地图
var layerImage = new ol.layer.Image({
source: new ol.source.ImageStatic({
// url: 'images/mapTest.jpg',//这里添加静态图片的地址
url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512636538327&di=1198aa77a3df42bd8046d0353502904c&imgtype=0&src=http%3A%2F%2Foss.p.t262.com%2Fcpic%2Fbc%2F2e%2Fdec7377951965a2d1dca25d006522ebc.jpg',
imageExtent: [centerX-500, centerY-500, centerX+500, centerY+500],// 地图坐标中的图像的范围。这是图像的[左，右，右，上]地图坐标
}),
}); // 自定义的地图图片
//实例一个map
var map = new ol.Map({
layers: [
// layer2,
layer1,
layerImage,
],
target: 'map',
view: new ol.View({
center: [centerX, centerY], //3857坐标系
zoom: 17,//当前的放大度数
minZoom:5,//最小放大度数
maxZoom:19,//最大放大度数
// extent: extent, // 限制中心的程度，换句话说，中心不能超出这个范围, 前后值一样(minx=maxx, miny=maxy)的话就无法移动。
// 设置 minZoom 和 maxZoom 一样大，就无法缩放。
}),
logo: false, // 禁用地图标志
});
-
第三步：在地图上描绘轨迹
1. 需要一个绘图层
//实例化一个矢量图层Vector作为绘制层
var source = new ol.source.Vector();
2. 需要一条线和它的数据
//实例一个线(标记点)的全局变量
var geometry = new ol.geom.LineString(); //线,Point 点,Polygon 面
//散列点数组，放置的点的位置数据
var coordinate = [
[10711293.51783087, 1900921.581665377],
[10711332.930673579, 1900920.9845010934],
[10711337.707987847, 1900825.4382157368],
[10711293.51783087, 1900826.0353800203],
];
//添加标记点
function addPonitToGeometry(arr) {
for (var i = 0; i < arr.length; i++) {
geometry.appendCoordinate(arr[i]);
}
}
addPonitToGeometry(coordinate);
var LineStringFeature = new ol.Feature(geometry); //绘制线的数据
上边的代码是为了方便后边对这几个点坐标进行操作，你也可以简便的写成如下样式：
var LineStringFeature = new ol.Feature(
new ol.geom.LineString([ //Polygon 多边形,Point 点,LineString 线
[10711293.51783087, 1900921.581665377],
[10711332.930673579, 1900920.9845010934],
[10711337.707987847, 1900825.4382157368],
[10711293.51783087, 1900826.0353800203],
[10711293.51783087, 1900921.581665377],
])); //绘制多边形的数据
3. 将线添加到绘图层，然后添加到map上
//将线添加到Vector绘制层上
source.addFeature(LineStringFeature);
var vectorLayer = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: '#f00',
width: 4
}),
image: new ol.style.Circle({
radius: 2,
fill: new ol.style.Fill({
color: '#f00'
})
})
})
});
map.addLayer(vectorLayer); //将绘制层添加到地图容器中
-
第四步：让轨迹动起来
有一个方法setCoordinates() // 设置线串的坐标，就是围绕这个方法来实现（假装）运动的效果。
// 最后一个标记点的坐标
var lngX = coordinate[3][0];
var lngY = coordinate[3][1];
var interval = setInterval(function(){
lngX = lngX - Math.random() * 30;
lngY = lngY + Math.random() * 30;
var newPoint = [lngX, lngY];
coordinate.shift();
coordinate.push(newPoint);
geometry.setCoordinates(coordinate);
}, 300);
setTimeout(function(){
clearInterval(interval);
}, 5000);
到此，基本的内容都已经完成了。
不过还是要注意一些内容，比如引入css/js等，比如缩放比例的控制，中心点的位置，#map .ol-zoom-in, #map .ol-zoom-out {display: none;}/* 隐藏缩放按钮 */。
自己写的完整的demo放在最后，可以复制粘贴 直接运行 查看效果。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>openlayers绘制</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"/>
<link href="https://openlayers.org/en/v4.1.0/css/ol.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://openlayers.org/en/v4.1.0/build/ol.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<style type="text/css">
body,html,div,ul,li,iframe,p,img{
border:none;padding:0;margin:0;
}
html{
height: 100%;
}
body{
height: 100%;
}
#map{
width:100%;
height:100%;
}
/* 隐藏缩放按钮 */
#map .ol-zoom-in, #map .ol-zoom-out {display: none;}
</style>
</head>
<body>
<div id="map" class="map"></div>
<script>
// 初始给的中心点坐标。
var centerX = 10711315.612909358;
var centerY = 1900873.5099405567;
var extent = [centerX, centerY, centerX, centerY];
var layer1 = new ol.layer.Tile({
source: new ol.source.XYZ({
url:'http://mt2.google.cn/vt/lyrs=y&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=G' //谷歌瓦片
}),
}); // 谷歌卫星地图（混合）
var layer2 = new ol.layer.Tile({
source: new ol.source.XYZ({
url:'http://mt3.google.cn/vt/lyrs=t@131,r@216000000&hl=zh-CN&gl=CN&src=app&x={x}&y={y}&z={z}&s=Gal'//谷歌地形地图
}),
}); // 谷歌地形地图
var layerImage = new ol.layer.Image({
source: new ol.source.ImageStatic({
// url: 'images/mapTest.jpg',//这里添加静态图片的地址
url: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1512636538327&di=1198aa77a3df42bd8046d0353502904c&imgtype=0&src=http%3A%2F%2Foss.p.t262.com%2Fcpic%2Fbc%2F2e%2Fdec7377951965a2d1dca25d006522ebc.jpg',
imageExtent: [centerX-500, centerY-500, centerX+500, centerY+500],// 地图坐标中的图像的范围。这是图像的[左，右，右，上]地图坐标
}),
}); // 自定义的地图图片
//实例一个map
var map = new ol.Map({
layers: [
// layer2,
layer1,
layerImage,
],
target: 'map',
view: new ol.View({
center: [centerX, centerY], //3857坐标系
zoom: 17,//当前的放大度数
minZoom:5,//最小放大度数
maxZoom:19,//最大放大度数
// extent: extent, //限制中心的程度，换句话说，中心不能超出这个范围, 前后值一样(minx=maxx, miny=maxy)的话就无法移动。
//然后设置minZoom 和 maxZoom 一样大，就无法缩放。
}),
logo: false, // 禁用地图标志
});
//实例一个数据源获取feature
//实例化一个矢量图层Vector作为绘制层
var source = new ol.source.Vector();
//实例一个线(标记点)的全局变量
var geometry = new ol.geom.LineString(); //线,Point 点,Polygon 线
//散列点数组，放置的点的位置数据
var coordinate = [
[10711293.51783087, 1900921.581665377],
[10711332.930673579, 1900920.9845010934],
[10711337.707987847, 1900825.4382157368],
[10711293.51783087, 1900826.0353800203],
];
//添加标记点
function addPonitToGeometry(arr) {
for (var i = 0; i < arr.length; i++) {
geometry.appendCoordinate(arr[i]);
}
}
addPonitToGeometry(coordinate);
var LineStringFeature = new ol.Feature(geometry); //绘制线的数据
//将线添加到Vector绘制层上
source.addFeature(LineStringFeature);
var vectorLayer = new ol.layer.Vector({
source: source,
style: new ol.style.Style({
fill: new ol.style.Fill({
color: 'rgba(255, 255, 255, 0.2)'
}),
stroke: new ol.style.Stroke({
color: '#f00',
width: 4
}),
image: new ol.style.Circle({
radius: 2,
fill: new ol.style.Fill({
color: '#f00'
})
})
})
});
map.addLayer(vectorLayer); //将绘制层添加到地图容器中
// 最后一个标记点的坐标
var lngX = coordinate[3][0];
var lngY = coordinate[3][1];
var interval = setInterval(function(){
lngX = lngX - Math.random() * 30;
lngY = lngY + Math.random() * 30;
var newPoint = [lngX, lngY];
coordinate.shift();
coordinate.push(newPoint);
geometry.setCoordinates(coordinate);
}, 300);
setTimeout(function(){
clearInterval(interval);
}, 5000);
// webSocket部分，用来不停的获取数据
var websocket;
var host = "ws://echo.websocket.org/";//声明host注意：是ws协议
//判断当前浏览器是否支持WebSocket
if('WebSocket' in window){
websocket = new WebSocket(host);
}
else{
alert('当前浏览器不支持WebSocket');
}
websocket.onopen = function (evt) { onOpen(evt) };
websocket.onclose = function (evt) { onClose(evt) };
websocket.onmessage = function (evt) { onMessage(evt) };
websocket.onerror = function (evt) { onError(evt) };
function onOpen(evt) {
console.log("Connected to WebSocket server.");
}
function onClose(evt) {
console.log("Disconnected");
}
function onMessage(evt) {
console.log('Retrieved data from server: ' + evt.data);
}
function onError(evt) {
console.log('Error occured: ' + evt.data);
}
//监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
window.onbeforeunload = function(){
onClose(evt);
}
</script>
</body>
</html>
