openlayers添加标注(含聚合标注)、覆盖物、绘制路线

通常需要在地图上标注出一些景点、建筑或者公共设施，可以选择使用矢量标注或者聚合标注。openlayers 添加矢量标注的原理是将标注添加到一个新建的矢量层上，再将矢量层添加到地图上叠加显示；聚合标注的原理同上，但它适用于标注的数据量非常大的场景，随着层级的放大，会展示更多的标注，缩小时，则将标注聚合显示，能够在大量加载标注时提高渲染性能。

1、矢量标注

2、聚合标注

openlayers 可以创建一个 Overlay 覆盖层，这个覆盖层能够展示自己写的 html 内容，从而实现添加各种所需的覆盖物。也可以通过这个方法来添加标注，但覆盖层添加的覆盖物会影响地图的拖动（即在覆盖物上进行滑动 *** 作时地图无法响应，虽然可以通过设置 stopEvent 将滑动事件传递到地图上，但这样会导致在IOS端的覆盖物无法进行点击 *** 作）。

因此如果要添加可以点击并且不影响地图拖动的标注时，建议使用矢量层标注，而如果要展示自定义的一些内容，如点击地图d出对话信息框、地图上的自定义按钮等则使用覆盖层更加合适。

1、加载覆盖层

2、添加地图点击监听事件

原理大致与添加矢量标注相同，都是添加在矢量图层上，不过这里添加的是线对象。

/*画区域*/

/*points: Array(<{lon,lat}>)*/

drawPolygon:function(points)

{

var wkt="POLYGON("

var length=points.length

for(var i=0i<lengthi++)

{

wkt+=points[i].lon+" "+points[i].lat

if(i!=length-1)

{

wkt+=","

}

}

wkt+=")"

var polygon = new OpenLayers.Feature.Vector(

OpenLayers.Geometry.fromWKT(wkt)

)

vectors.addFeatures([polygon])

}

其中的vectors其实就是一个矢量图层

vectors = new OpenLayers.Layer.Vector("ClientVectorLayer")

以上画区域是通过构造一个polygon，然后加入到食量图层中就完了。points当然是一个点对象数组了

/使用OpenLayers.Layer.Vector，map要先建立

var vectors,lineFeature//存放线路

//线路样式

var style_green = {

strokeColor: "#00FF00",

strokeWidth: 3,

strokeDashstyle: "dashdot",

pointRadius: 6,

pointerEvents: "visiblePainted"

}

//画线图层设置

var layer_style = OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default'])

layer_style.fillOpacity = 0.2

layer_style.graphicOpacity = 1

//画线图层

vectors = new OpenLayers.Layer.Vector("Simple Geometry", {style: layer_style})

map.addLayer(vectors)

//一下采用数组型式填充轨迹

var pointList = []

for(var i=0i<5i++){

newPoint = new OpenLayers.Geometry.Point(lon,lan)

pointList.push(newPoint)

}

lineFeature = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.LineString(pointList),null,style_green)

vectors.addFeatures([lineFeature])

---