openlayers面层实时动态闪烁_openlayers6动图上图资源-CSDN文库

共4个文件

js：2个

css：1个

html：1个

1星需积分: 49 14 浏览量 2017-12-07 16:17:34 上传评论 1 收藏 477KB RAR 举报

在OpenLayers中，实现“面层实时动态闪烁”效果是一个技术性较强的课题，涉及到地图渲染、数据处理和动画效果的创建。OpenLayers是一个强大的开源JavaScript库，用于在Web上展示地图，支持多种地图源和丰富的交互功能。在这个场景中，我们将深入探讨如何使用OpenLayers来加载面要素对象，并实现动态闪烁效果。你需要了解OpenLayers的基本概念。它提供了地图对象（Map）、图层（Layer）、源（Source）和特征（Feature）等核心组件。在本例中，“面层”通常指的是包含多边形几何类型的图层，这些多边形可以代表地理区域或者其他实体。要创建一个面层，首先你需要创建一个`VectorSource`实例，用于存储面要素数据。例如： ```javascript const vectorSource = new VectorSource({ features: (new GeoJSON()).readFeatures(yourGeoJsonData) }); ``` 接着，创建一个`VectorLayer`，将`vectorSource`作为其数据源： ```javascript const vectorLayer = new VectorLayer({ source: vectorSource, style: yourStyleFunction // 自定义样式函数，用于设置面要素的外观 }); ``` `yourStyleFunction`可以根据需求定制面要素的样式，包括颜色、填充、描边等。为了实现闪烁效果，我们可以创建一个动态改变透明度或颜色的动画循环。以下是一个简单的实现闪烁效果的示例： ```javascript let opacity = 1; // 初始透明度 setInterval(() => { opacity = (opacity === 1) ? 0 : 1; // 在1和0之间切换 vectorLayer.setStyle(feature => ({ fill: new Style({ fill: new Fill({ color: 'rgba(255, 0, 0, ' + opacity + ')' }) // 使用 rgba 色值控制透明度 }) })); }, 500); // 每隔500毫秒切换一次 ``` 在上述代码中，我们使用了`setInterval`函数每隔固定时间更改图层的样式，通过调整面要素的填充透明度实现闪烁效果。`rgba`颜色值的第四个参数是透明度，0表示完全透明，1表示完全不透明。此外，压缩包中的`olFlashing`可能包含了实现闪烁效果的示例代码或数据。你可以解压并查看这些文件，以获取更具体的实现细节。这可能包括了完整的地图配置、样式函数以及数据加载逻辑。 OpenLayers提供了一个灵活的平台来实现“面层实时动态闪烁”效果。通过组合使用源、图层、样式和动画机制，开发者能够创建出具有视觉吸引力的地图应用。在实际项目中，你可能需要根据具体需求调整闪烁频率、颜色变化或其他视觉效果。

资源推荐

资源详情

资源评论

收起资源包目录

olFlashing.rar （4个子文件）

olFlashing

olAnimationPoly.html 6KB

plug-in

openlayer3

ol.js 492KB

ol-debug.js 2.48MB

css

ol.css 3KB

<!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>

评论收藏

内容反馈