Openlayers2实现的地图闪烁


地图闪烁动画

原理:利用window.setInterval()方法,间歇性的打开地图和隐藏地图,完成闪烁动画。
示例:在一幅地图上中国地图上,实现青海省范围的闪烁动画。
js代码如下:

var map = new OpenLayers.Map("map");

//闪烁的图层
var wfsLayer;

//闪烁开关
var visble = false;

function initMap(){
	var baseLayer = new OpenLayers.Layer.WMS(
			"basic",
			"http://localhost:8080/geoserver/chinaNS/wms",
			{
                    layers: "chinaNS:shengjie"
			},
			{isBaseLayer:true}
    );

	map.addLayer(baseLayer);
	map.setCenter(new OpenLayers.LonLat(108, 34), 4);
}

//开始闪烁
function start(){
    var protocolObj = new OpenLayers.Protocol.WFS({
        url:"http://localhost:8080/geoserver/chinaNS/wfs",
        featureType: "shengjie",//这里图层名之前不能带工作空间名
        geometryName: "the_geom"
    });

    //定义过滤条件
    var filterObj = new OpenLayers.Filter.Comparison({
        type: OpenLayers.Filter.Comparison.EQUAL_TO,
        property: "NAME",
        value: "青海省"
    });

    //定义图层样式
    var styles = new OpenLayers.StyleMap({
        fillColor: "#BDBDBD",
        strokeColor: "#DF013A",
        strokeWidth: 1,
        fillOpacity: 0.4
    })

    //定义wfs图层
    wfsLayer = new OpenLayers.Layer.Vector(
        'vector',
        {
            strategies: [new OpenLayers.Strategy.BBOX()],
            protocol: protocolObj,
            styleMap: styles,
            filter: filterObj
        }
    );

    map.addLayer(wfsLayer);

    timer = window.setInterval("flicking()",300);
}

//执行闪烁
function flicking(){
    wfsLayer.display(visble);  //通过控制wfsLayer图层的隐藏和显示来实现闪烁
    visble = !visble;
}

//停止闪烁
function stop(){
    map.removeLayer(wfsLayer);
    wfsLayer = null;
    window.clearInterval(timer);
    timer = null;
}

html代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../jquery-2.0.0/jquery.min.js"></script>
    <script src="../openlayers2/lib/OpenLayers.js"></script>
    <style>
        #map{
            outline: 0.5px solid lightslategray;
            width: 100%;
            height: 500px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>ol2之闪烁动画</h2>
        <button type="button" class="btn" id ="start">开始闪烁</button>
        <button type="button" class="btn" id ="stop">停止</button>
    </div>
    <div id="map" class="map"></div>
</body>
<script src="../js/ol2/eg/map-flicker.js"></script>
<script>
    $(document).ready(function(){
        initMap();
    })
    $("#start").click(function(){
        start();
    })
    $("#stop").click(function(){
        stop();
    })
</script>
</html>

转载自:https://blog.csdn.net/u012413551/article/details/84194317

You may also like...