Openlayers2圖層載入(三)marker圖層
阿新 • • 發佈:2018-12-22
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); }
結果