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);
    }
}

转载自：https://blog.csdn.net/javascriptcoder/article/details/25334553