地图闪烁动画
原理:利用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>