openlayers是最好的开源地图引擎，我们开发主要在地图上标记兴趣点，画区域，任意图形，运动轨迹等等。在ol地图上画东西其实非常简单，只需要按以下步骤执行

Point

point是一个ol坐标点，例如根据经纬度来转为ol对应的坐标

var lonLat = [114.158648, 22.284701];

var transPoint = ol.proj.fromLonLat(lonLat);

Feature

接下来要把point放到feature上面

var carMarker = new ol.Feature({

type: "icon",

geometry: new ol.geom.Point(transPoint)

})

每一个feature就是一个标志物，对标志物设置样式

var styles = {

// 笔画

'route': new ol.style.Style({

stroke: new ol.style.Stroke({

width: 6, color: [237, 212, 0, 0.8]

})

}),

// 图片icon

'icon': new ol.style.Style({

image: new ol.style.Icon({

anchor: [0.5, 1],

src: 'https://openlayers.org/en/v4.2.0/examples/data/icon.png'

})

}),

// 圆点

'geoMarker': new ol.style.Style({

image: new ol.style.Circle({

radius: 7,

snapToPixel: false,

fill: new ol.style.Fill({color: 'black'}),

stroke: new ol.style.Stroke({

color: 'white', width: 2

})

})

})

};

carMarker.setStyle(styles['icon']);

Source

上面新建一个标志物，然后需要放到对应的source里面，source.vector包裹这所有

var source = new ol.source.Vector({

features: [routeFeature, geoMarker, startMarker, endMarker]

})

layer

一个layer是用来展示可视化source的数据，所以我们把source放到layer里面，在这里可以动态为feature设置不同的样式

var vectorLayer = new ol.layer.Vector({

source: source,

style: function (feature) {

// hide geoMarker if animation is active

if (animating && feature.get('type') === 'geoMarker') {

return null;

}

return styles[feature.get('type')];

}

});

Map

最后把layer放到map上面，整个步骤下来就可以实现标志物的绘制了

var map = new ol.Map({

target: 'map',

layers: [

osmLayer, vectorLayer

],

view: new ol.View({

center: transPoint,

zoom: 16

})

});