<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>面层闪烁</title>
<link rel="stylesheet" href="plug-in/openlayer3/css/ol.css">
<script type="text/javascript" src="plug-in/openlayer3/js/ol-debug.js"></script>
<style type="text/css">
html,body,#map{
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
</style>
<script type="text/javascript">
function init() {
var projection = new ol.proj.Projection({
code: 'EPSG:4326',
units: 'degrees',
axisOrientation: 'neu'
});
var map=new ol.Map({
target:"map",
layers:[
getTdtLayer('img_c'),
getTdtLayer('cia_c')
],
controls: ol.control.defaults({
attribution: false
}),
view:new ol.View({
projection:projection,
extent:[-180,-90,180,90],
center:[103.628621,29.512369],
zoom:10,
minZoom:1,
maxZoom:18
})
});
var wkts=[
"POLYGON((103.540988 29.389374,103.584933 29.391434,103.59386 29.316589,103.543735 29.326202,103.540988 29.389374))"
];
var format=new ol.format.WKT();
var vecSource=new ol.source.Vector();
for(var i=0;i<wkts.length;i++){
var feature=format.readFeature(wkts[i],{
dataProjection:'EPSG:4326',
featureProjection:'EPSG:4326'
});
vecSource.addFeatures([feature]);
}
var vector=new ol.layer.Vector({
source:vecSource
});
map.addLayer(vector);
/*var postindex = 0;
window.setInterval(function () {
postindex++;
postindex = postindex%2;
var color;
if(postindex==0){
color = '#0358B3';
}else{
color = '#3081B4';
}
vector.setStyle(new ol.style.Style({
fill:new ol.style.Fill({
color:color
}),
stroke:new ol.style.Stroke({
color:color,
width:1
})
}));
},500);*/
//var radius = 0;
var now=new Date().getTime();//从 1970/01/01 至今已过去的时间(毫秒)
map.on("postcompose",function (event) {
var vectorContent=event.vectorContext;
var frameState=event.frameState;
//开始渲染时间 frameState.time(毫秒)
var elapsedTime=frameState.time-now;//运行时间
var index=Math.round(2*elapsedTime/1000);//一秒等于1000毫秒 转换成秒 即索引递增 乘2增加闪烁速度
var currentPoint=new ol.geom.Polygon([[[103.540988,29.389374],[103.584933,29.391434],[103.59386,29.316589],[103.543735,29.326202],[103.540988,29.389374]]]);
var feature=new ol.Feature(currentPoint);
if(index%2==0){
vectorContent.drawFeature(feature,getFillStyle('#DD4D40'));
}else{
vectorContent.drawFeature(feature,getFillStyle('#6DDA79'));
}
//告诉OpenLayers继续postcompose渲染动画
map.render();
});
}
function getFillStyle(color) {
return new ol.style.Style({
fill:new ol.style.Fill({
color:color
}),
stroke:new ol.style.Stroke({
color:color,
width:1
})
});
}
//获取天地图图层 加载CGCS2000坐标系地图
function getTdtLayer(lyr){
var url = "http://t4.tianditu.com/DataServer?T="+lyr+"&x={x}&Y={y}&L={z}";
var projection = ol.proj.get("EPSG:4326");
var projectionExtent = [ -180, -90, 180, 90 ];
var maxResolution = (ol.extent.getWidth(projectionExtent) / (256 * 2));
var resolutions = new Array(19);
for (var z = 0; z < 19; ++z) {
resolutions[z] = maxResolution / Math.pow(2, z);
}
var tileOrigin = ol.extent.getTopLeft(projectionExtent);
/*var crossType=null,userAgent = navigator.userAgent;//取得浏览器的userAgent字符串//取得浏览器的userAgent字符串
if(!(userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari"))){
crossType="anonymous";
}*/
var layer = new ol.layer.Tile({
extent: [ -180, -90, 180, 90],
source: new ol.source.TileImage({
crossOrigin:"anonymous",
tileUrlFunction: function(tileCoord) {
var z = tileCoord[0]+1;
var x = tileCoord[1];
var y = -tileCoord[2]-1;
var n = Math.pow(2, z + 1);
x = x % n;
if (x * n < 0) {
x = x + n;
}
return url.replace('{z}', z.toString())
.replace('{y}', y.toString())
.replace('{x}', x.toString());
},
projection: projection,
tileGrid: new ol.tilegrid.TileGrid({
origin: tileOrigin,
resolutions: resolutions,
tileSize: 256
})
})
});
layer.set("title","tdtMap");
return layer;
}
</script>
</head>
<body onload="init()">
<div id="map">
</div>
</body>
</html>
openlayers面层实时动态闪烁
1星 需积分: 49 187 浏览量
2017-12-07
16:17:34
上传
评论 1
收藏 477KB RAR 举报 
olFlashing.rar （4个子文件） 
olFlashing 
olAnimationPoly.html 6KB plug-in openlayer3 js 
ol.js 492KB ol-debug.js 2.48MB css ol.css 3KB资源评论
xb198910122018-09-03没什么用处
deyiStruket2018-07-01删了绘制，绘制了删除 ，，，
