使用OpenLayers3来展示一段运动轨迹

网上百度到的基本都是，在已经描绘好的轨迹上进行点的运动，可以参考官方示例。而这里这个有点不一样。
需求：展示在自己的地图（图片）上，描绘最近两分钟的运动轨迹。

不懂的就百度，然后看一下官方API

如果嫌弃官方的API，就看这个吧：OpenLayers 3 Primer

以下代码中的坐标都是用的 EPSG:3857，请注意。

• 第一步：需要一个map图层

  此处有很多图层可以加载，根据各自的需要来就行。参考openlayers3加载各种底图
  我就加载一个常用的吧。代码如下：

// 页面内容


// 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放在最后，可以复制粘贴 直接运行 查看效果。