<!doctype html>
<html lang="en">
<meta charset="UTF-8">
<title>本车图标在最上方</title>
<link rel="stylesheet" href="lib/ol65/ol.css" type="text/css">
<style>
html,
body,
#map {
padding: 0;
margin: 0;
width: 100%;
height: 100%;
overflow: hidden;
</style>
</head>
<div id="map"></div>
<script type="text/javascript" src="lib/ol65/ol.js"></script>
<script type="text/javascript">
//定位数据源
var positionData = [{
x: '-11560139.941628069',
y: '5538515.7834814',
carNumber: '霸道的程序猿'
x: '-11560039.941628069',
y: '5537515.7834814',
carNumber: '霸道的程序猿'
x: '-11559039.941628069',
y: '5536515.7834814',
carNumber: '霸道的程序猿'
x: '-11558039.941628069',
y: '5535515.7834814',
carNumber: '霸道的程序猿'
x: '-11557039.941628069',
y: '5534515.7834814',
carNumber: '霸道的程序猿'
x: '-11556039.941628069',
y: '5533515.7834814',
carNumber: '霸道的程序猿'
x: '-11555039.941628069',
y: '5532515.7834814',
carNumber: '霸道的程序猿'
x: '-11554039.941628069',
y: '5531515.7834814',
carNumber: '霸道的程序猿'
x: '-11553039.941628069',
y: '5530515.7834814',
carNumber: '霸道的程序猿'
x: '-11552039.941628069',
y: '5529515.7834814',
carNumber: '霸道的程序猿'
x: '-11551039.941628069',
y: '5528515.7834814',
carNumber: '霸道的程序猿'
x: '-11550039.941628069',
y: '5527515.7834814',
carNumber: '霸道的程序猿'
x: '-11549039.941628069',
y: '5526515.7834814',
carNumber: '霸道的程序猿'
x: '-11548039.941628069',
y: '5525515.7834814',
carNumber: '霸道的程序猿'
x: '-11547039.941628069',
y: '5524515.7834814',
carNumber: '霸道的程序猿'
x: '-11546039.941628069',
y: '5523515.7834814',
carNumber: '霸道的程序猿'
var source = new ol.source.XYZ({
tileUrlFunction: function (xyz, obj1, obj2) {
if (!xyz)
return "";
var z = xyz[0];
var x = Math.abs(xyz[1]);
var y = Math.abs(xyz[2]);
var xyz_convert = self.convert_(z, x, y);
x = xyz_convert[0];
y = xyz_convert[1];
z = xyz_convert[2];
var shift = z / 2;
var half = 2 << shift;
var digits = 1;
if (half > 10)
digits = parseInt(Math.log(half) / Math.log(10)) + 1;
var halfx = parseInt(x / half);
var halfy = parseInt(y / half);
x = parseInt(x);
y = parseInt(y) - 1;
var url = "./images/EPSG_900913" + "_" + self.padLeft_(2, z) + "/" + self.padLeft_(digits,
halfx) + "_" + self.padLeft_(digits, halfy) + "/" + self.padLeft_(2 * digits, x) +
"_" + self.padLeft_(2 * digits, y) + "." + 'png';
return url;
//projections投影坐标系转换相关的操作
var projection = new ol.proj.Projection({
code: 'EPSG:900913',
units: 'm',
axisOrientation: 'neu'
//Layers 图层管理类，用来管理图层信息。主要包括Tile，Image，Vector，VectorTile等图层。
var layer = new ol.layer.Tile({
source: source
//定位图层的Source
var positonSource = new ol.source.Vector({
features: []
// 定位图层
var positionLayer = new ol.layer.Vector({
source: positonSource
//定位图层的Source-本车
var positonSourceBenche = new ol.source.Vector({
features: []
// 定位图层-本车
var positionLayerBenche = new ol.layer.Vector({
source: positonSourceBenche
//View 视图管理器，主要用来管理地图视图，分辨率或旋转，中心、投影、分辨率、缩放级别等。
var view = new ol.View({
//中心点
center: [-11549894, 5533433],
//缩放等级
zoom: 11,
//投影坐标系
projection: projection,
extent: [-20037508.34, -20037508.34, 20037508.34, 20037508.34]
//Map Openlayers的核心组件，包含图层、交互事件、UI控制元素等。
var map = new ol.Map({
layers: [layer, positionLayer,positionLayerBenche],
target: 'map',
view: view
//单击获取地图坐标
map.on('singleclick', (evt) => {
console.log(evt.coordinate);
//xy行列转换
function convert_(zoomLevel, x, y) {
var extent = Math.pow(2, zoomLevel);
if (x < 0 || x > extent - 1) {
console.log("The X coordinate is not sane: " + x);
return;
if (y < 0 || y > extent - 1) {
console.log("The Y coordinate is not sane: " + y);
return;
// openlayers 6.0版本
var gridLoc = [x, extent - y, zoomLevel];
// openlayers 4.5版本
// var gridLoc = [x, extent - y + 1, zoomLevel];
return gridLoc;
//字符截取
function padLeft_(num, val) {
return (new Array(num).join('0') + val).slice(-num);
//定时器循环模拟定位效果
var index = 0;
setInterval(() => {
//坐标数据到头了 就重新开始
if (index > this.positionData.length - 2) {
index = 0;
//定义角度
var rotation = 0;
//如果是最后一个点
if (index == this.positionData.length - 1) {
rotation = setAngle(this.positionData[index], this.positionData[index]);
} else {
rotation = setAngle(this.positionData[index], this.positionData[index + 1]);
//根据索引获取数据
var item = this.positionData[index];
//清除上次的
if (this.positonSource) {
this.positonSource.clear();
if (this.positonSourceBenche) {
this.positonSourceBenche.clear();
var feature = new ol.Feature({
geometry: new ol.geom.Point([Number(item.x), Number(item.y)])
var style = new ol.style.Style({
image: new ol.style.Icon({
scale: 0.8,
src: './icon/car.png',
anchor: [0.48, 0.52],
//设置旋转角度
rotation: -rotation,
text: new ol.style.Text({
font: 'normal 12px 黑体',
// // 对其方式
textAlign: 'center',
// 基准线
textBaseline: 'middle',
offsetY: -35,
offsetX: 0,
backgroundFill: new ol.style.Stroke({
color: 'rgba(0,0,255,0.7)',
// 文本填充样式
fill: new ol.style.Fill({
color: 'rgba(236,218,20,1)'
padding: [5, 5, 5, 5],
text: `${item.carNumber}`,
//本车样式
var styleBenche= new ol.style.Style({
image: new ol.style.Icon({
scale: 0.8,
src: './icon/house.png',
anchor: [0.48, 0.52],
//设置旋转角度
rotation: -rotation,
text: new ol.style.Text({
font: 'normal 12px 黑体',
// // 对其方式
textAlign: 'center',
// 基准线
textBaseline: 'middle',
offsetY: -35,
offsetX: 0,
backgroundFill: new ol.style.Stroke({
color: 'rgba(0,0,255,0.7)',
// 文本填充样式
fill: new ol.style.Fill({
color: 'rgba(236,218,20,1)'
padding: [5, 5, 5, 5],
text: `本车`,
//以当前点为中心
this.flyToPoint([Number(item.x), Number(item.y)])
//设置样式
feature.setStyle(styleBenche);
//添加feture
this.positonSourceBenche.addFeature(feature)
//模拟车辆定位数据
var feature1 = new ol.Feature({
geometry: new ol.geom.Point([-11554039.941628069, 5531515.7834814])
//设置样式
feature1.setStyle(style);
//添加feture
this.positonSource.addFeature(feature1)
//模拟车辆定位数据
var feature2 = new ol.Feature({
geometry: new ol.geom.Point([-11554039.941628069, 5531515.7834814])
//设置样式
feature2.setStyle(style);
//添加feture
this.positonSource.addFeature(feature2)
//移到下个点
index++;
}, 1000);
//设置以当前点位为中心
function flyToPoint(point) {
var to = point
var view = this.map.getView()
view.animate({
center: to,
duration: 45
// 点位转角
function setAngle(first, second) {
var dx = second.x - first.x
var dy = second.y - first.y
var rotation = Math.atan2(dy, dx)
return rotation
</script>
</body>
</html>
