OpenLayers開發記錄（二）

繼續上次關於OpenLayers開發記錄的總結，談一下其他類型圖層、Marker以及類的使用。

3、創建矢量圖層

問題1：矢量圖層的創建

OpenLayers.Strategy.Fixed()：一個簡單的策略，一旦請求要素就不再請求新數據
OpenLayers.Protocol.WFS()：通過WFS協議請求一個矢量數據

var cellspace = new OpenLayers.Layer.Vector("WFS", {
    strategies: [new OpenLayers.Strategy.Fixed()],
    projection: new OpenLayers.Projection("EPSG:900913"), // 座標系要和map座標系匹配
    protocol: new OpenLayers.Protocol.WFS({
        version: "1.0.0",
        url: "http://localhost:8080/geoserver3D/gczx/wfs",
        featureType: "cellspace2", //
        typeName: "gczx:cellspace2", //
        maxFeatures: 50,
        outputFormat: "GML2"
    })
});

問題2：矢量圖層要素選擇

需要使用OpenLayers.Control.SelectFeature控件。

代碼

var selector = new OpenLayers.Control.SelectFeature(this.vlayer);// 爲SelectFeature控件指定矢量圖層
this.map.addControl(selector);//添加到map中
selector.activate();//激活要素選擇器
// 註冊Select事件
selector.onSelect = onFeatureSelect;
// 註冊取消Select事件
selector.onUnselect = onFeatureUnselect;

// Feature取消選中事件響應
function onFeatureUnselect(feature) {
    that.map.removePopup(feature.popup);//從map中刪除彈出框
    feature.popup.destroy();//從要素中刪除popup
    feature.popup = null;//設置爲空
}

// 實現圖層選擇彈出popup對話框
function onFeatureSelect(feature) {
    var selectedFeature = feature; //被選中的要素
    var popup = new OpenLayers.Popup.FramedCloud("chicken",
        feature.geometry.getBounds().getCenterLonLat(),//位置
        null,
        "<div style='font-size:.8em'>Feature: " + feature.id +
            "<br />Area: " + feature.geometry.getArea() +
            "<br />X: " + feature.attributes.x +
            "    Y: " + feature.attributes.y +
            "<br />Layer: " + feature.attributes.layer + "</div>",//顯示的內容
        null,
        true,//是否有關閉按鈕
        onPopupClose);//關閉時調用函數
    feature.popup = popup;//要素屬性添加popup
    that.map.addPopup(popup);//添加popup
    function onPopupClose(evt) {
        // 取消選擇，會觸發onFeatureUnSelect
        selector.unselect(selectedFeature);
    }
}

問題3：矢量圖層樣式(後續補充)

4、創建Marker圖層

問題1：創建Marker圖層

//創建markers圖層
var markers = new OpenLayers.Layer.Markers("Markers");
this.map.addLayer(markers);
//創建圖標
var size = new OpenLayers.Size(24, 24);
var offset = new OpenLayers.Pixel(-(size.w / 2), -size.h);
var icon = new OpenLayers.Icon('../img/man24.png', size, offset);
var halfIcon = icon.clone();
//創建marker
var marker = new OpenLayers.Marker(
    new OpenLayers.LonLat(12734772.12866, 3571058.56591), halfIcon);
//12734772.12866, 3571058.56591
//-232.95014          456.1636
marker.name = "Gebin";
marker.occupation = "master";
//註冊鼠標按下事件
marker.events.register('mousedown', marker, function (evt) {
    var popup = new OpenLayers.Popup.FramedCloud("people",
        marker.lonlat,
        null,
        "<div style='font-size:.8em'>Name: " + marker.name + "<br/>"
            + "Occupation:" + marker.occupation + "</div>",
        null,
        true,
        onPopupClose);
    marker.popup = popup;
    that.map.addPopup(popup);
function onPopupClose(evt) {
        // 取消選擇，會觸發onFeatureUnSelect
        that.map.removePopup(marker.popup);
        marker.popup.destroy();
        marker.popup = null;
    }

    OpenLayers.Event.stop(evt);
});

markers.addMarker(marker);
markers.setZIndex(800);//設置z方向順序，繼承自Layer

問題2：z-index問題 

5、創建控件

問題1：常用控件 

this.map.addControl(new OpenLayers.Control.PanZoomBar({
    position: new OpenLayers.Pixel(2, 15)
})); // 平移縮放工具條
this.map.addControl(new OpenLayers.Control.Navigation());// 導航工具條
this.map.addControl(new OpenLayers.Control.LayerSwitcher());// 圖層切換
this.map.addControl(new OpenLayers.Control.MousePosition());// 鼠標位置
this.map.addControl(new OpenLayers.Control.OverviewMap());// 縮略圖
this.map.addControl(new OpenLayers.Control.Scale());// 比例尺

6、marker移動

問題1：如何動態移動marker標記

在我們學習JavaScript的時候都嘗試過使用setInterval()、setTimeOut()構建循環和動畫，在OpenLayers提供的類中有一個叫做Tween的類，支持緩動動畫。 

創建Tween，簡單代碼

var tween = new OpenLayers.Tween(OpenLayers.Easing.Linear.easeIn);//參數爲緩動的方式
// 回調對象，支持三個事件start, eachStep 和 done
// 分別代表，開始緩動動畫之前，緩動中的每一步，緩動動畫結束後
var callbacks = {
    eachStep: function(value) {
        block.style.left = (value.x + viewportPosition[0]) + 'px';
        block.style.top = (value.y + viewportPosition[1]) + 'px';
        console.info(block.style.left +":"+block.style.top) ;
    }
    ,done:function(){ 
        var tween1 = new OpenLayers.Tween(OpenLayers.Easing.Linear.easeIn);//重新建了一個tween進行新的動畫
        tween1.start( from1, to1,duration, {callbacks: callbacks});
     }
}
tween.start(from, to, duration, {callbacks: callbacks});//啓動緩動動畫

移動Marker，主要修改eachStep()函數

eachStep: function(value) {
    var newLonLat = new OpenLayers.LonLat(value.x,value.y);//
    var newPx = that.map.getLayerPxFromLonLat(newLonLat);//
    try{
        lineGeometry.addPoint(new OpenLayers.Geometry.Point(newLonLat.lon,newLonLat.lat));//
        marker.moveTo(newPx);//
        pathVectorFeature.layer.redraw();//
    } catch (e){
        alert(newPx);
    }
}