Openlayers2圖層加載（四）marker圖層

Marker圖層

marker圖層非常适合在地圖對一些特殊的點位标記進行展示，如想在地圖上标記出所有的空氣監測站、标記移動監測車的實時位置等。

marker圖層的使用方法很簡單，主要涉及到以下幾個Openlayers2對象：

• OpenLayers.Icon，圖示對象
• OpenLayers.Marker，marker點對象
• OpenLayers.Layer.Markers，markers圖層
• OpenLayers.LonLat，坐标

• OpenLayers.Size：marker圖示的大小

  示例代碼：

function initMap(){
	var map,baseLayer	
	map = new OpenLayers.Map("map");

	baseLayer = new OpenLayers.Layer.WMS(
			"basic",
			"http://localhost:8080/geoserver/chinaNS/wms",
			{
                    layers: "chinaNS:shengjie"
			},
			{isBaseLayer:true}
    );
    //定義marker圖層
    var markerLayer = new OpenLayers.Layer.Markers("markerLayer");

    //随機寫的4組坐标
    var LonLatList = [[98,43],[120,34],[117,32],[115,27]];

    //定義marker圖示的尺寸及相對于坐标點的偏移量
    var size = new OpenLayers.Size(32,32);
    var offset = new OpenLayers.Pixel(0,0);

    //生成marker并裝載到markerLayer圖層中
    LonLatList.forEach(element => {
        var icon = new OpenLayers.Icon('../img/marker.png',size,offset);
        var marker = new OpenLayers.Marker(new OpenLayers.LonLat(element[0],element[1]),icon);
        markerLayer.addMarker(marker);
    });
    
	map.addLayers([baseLayer,markerLayer]);
	map.setCenter(new OpenLayers.LonLat(108, 34), 4);
}

           

結果