效果图：
（红圈往外扩散消失。类似echarts的效果：https://echarts.baidu.com/examples/editor.html?c=effectScatter-bmap）
参考链接：
https://openlayers.org/en/latest/examples/feature-animation.html
https://blog.csdn.net/u014529917/article/details/52514204
这里是通过OpenLayers自带的postcompose事件来实现动画效果
页面标签：
<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<meta content=always name=referrer>
<title>OpenLayers 3地图示例</title>
<link href="/test/gis/css/ol.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/test/gis/js/ol.js" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width: 100%"></div>
<div>
<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">
<circle id="mycircle" cx="400" cy="300" r="50" />
<svg>
</div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
<script>
// 获取到popup的节点
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
var point=new ol.Feature({
geometry: new ol.geom.Point([0,0])
});
var pointLayer=new ol.layer.Vector({
source:new ol.source.Vector()
});
point.setStyle(new ol.style.Style({
image:new ol.style.Circle({
radius:10,
fill:new ol.style.Fill({
color:'red'
}),
stroke:new ol.style.Stroke({
color:'#ff8c66',
size:1
})
})
}));
var source = pointLayer.getSource()
// 创建地图
var map2=new ol.Map({
// 设置地图图层
layers: [
// 创建一个使用Open Street Map地图源的瓦片图层
new ol.layer.Tile({source: new ol.source.OSM()}),
//矢量图层
pointLayer
],
// 设置显示地图的视图
view: new ol.View({
center: [20, 0],
zoom: 2 // 并且定义地图显示层级为2
}),
// 让id为map的div作为地图的容器
target: 'map'
});
var maxRadius=16;
var speed=0.1;
var baseR=10;
var activeR=baseR；
function flash(feature) {
var start = new Date().getTime();
var listenerKey = map2.on('postcompose', animate);
function animate(event) {
activeR=activeR+speed;
var vectorContext = event.vectorContext;
var elapsedRatio = (activeR-baseR) / (maxRadius-baseR);
var flashGeom = feature.getGeometry().clone();
var radius = ol.easing.easeOut(elapsedRatio) * (maxRadius-baseR) + baseR;
var opacity = ol.easing.easeOut(1 - elapsedRatio);
var style = new ol.style.Style({
image: new ol.style.Circle({
radius: radius,
stroke: new ol.style.Stroke({
color: 'rgba(255, 140, 102, ' + opacity + ')',
width: 0.1 +opacity
})
})
});
vectorContext.setStyle(style);
vectorContext.drawGeometry(flashGeom);
if (activeR > maxRadius) {
activeR=baseR；
}
map2.render();
}
}
source.on('addfeature', function(e) {
flash(e.feature);
});
source.addFeature(point);
</script>
</body>
</html>
如果想再像一点，可以添加多个圆。
<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
<meta content=always name=referrer>
<title>OpenLayers 3地图示例</title>
<link href="/test/gis/css/ol.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="/test/gis/js/ol.js" charset="utf-8"></script>
</head>
<body>
<div id="map" style="width: 100%"></div>
<div>
<svg id="mysvg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600" preserveAspectRatio="xMidYMid meet">
<circle id="mycircle" cx="400" cy="300" r="50" />
<svg>
</div>
<div id="popup" class="ol-popup">
<a href="#" id="popup-closer" class="ol-popup-closer"></a>
<div id="popup-content"></div>
</div>
<script>
// 获取到popup的节点
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
var point=new ol.Feature({
geometry: new ol.geom.Point([0,0])
});
var pointLayer=new ol.layer.Vector({
source:new ol.source.Vector()
});
point.setStyle(new ol.style.Style({
image:new ol.style.Circle({
radius:10,
fill:new ol.style.Fill({
color:'red'
}),
stroke:new ol.style.Stroke({
color:'#ff8c66',
size:1
})
})
}));
var source = pointLayer.getSource()
// 创建地图
var map2=new ol.Map({
// 设置地图图层
layers: [
// 创建一个使用Open Street Map地图源的瓦片图层
new ol.layer.Tile({source: new ol.source.OSM()}),
//矢量图层
pointLayer
],
// 设置显示地图的视图
view: new ol.View({
center: [20, 0],
zoom: 2 // 并且定义地图显示层级为2
}),
// 让id为map的div作为地图的容器
target: 'map'
});
var maxR=22;//扩散的最大半径
var speed=0.05;//扩散速度
var baseR=10;//基准半径
var activeR=baseR;//第一个圈的当前半径
var activeR2=baseR+4;//第二个圈的当前半径
var activeR3=baseR+8;//第三个圈的当前半径
function flash(feature) {
var start = new Date().getTime();
var listenerKey = map2.on('postcompose', animate);
function animate(event) {
activeR=activeR+speed;
activeR2=activeR2+speed;
activeR3=activeR3+speed;
var vectorContext = event.vectorContext;
//三个圆的扩散进度
var elapsedRatio = (activeR-baseR) / (maxR-baseR);
var elapsedRatio2 = (activeR2-baseR) / (maxR-baseR);
var elapsedRatio3 = (activeR3-baseR) / (maxR-baseR);
var flashGeom = feature.getGeometry().clone();
//三个半径
var radius = ol.easing.linear(elapsedRatio) * (maxR-baseR) + baseR;
var radius2 = ol.easing.linear(elapsedRatio2) * (maxR-baseR) + baseR;
var radius3 = ol.easing.linear(elapsedRatio3) * (maxR-baseR) + baseR;
//三个圆的透明度
var opacity = ol.easing.easeOut(1 - elapsedRatio);
var opacity2 = ol.easing.easeOut(1 - elapsedRatio2);
var opacity3 = ol.easing.easeOut(1 - elapsedRatio3);
var style = new ol.style.Style({
image: new ol.style.Circle({
radius: radius,
stroke: new ol.style.Stroke({
color: 'rgba(255, 140, 102, ' + opacity + ')',
width: 0.1 +opacity
})
})
});
vectorContext.setStyle(style);
vectorContext.drawGeometry(flashGeom);
//画第二个圆
vectorContext.drawFeature(
new ol.Feature({
geometry: flashGeom
}),
new ol.style.Style({
image: new ol.style.Circle({
radius: radius2,
stroke: new ol.style.Stroke({
color: 'rgba(255, 140, 102,'+opacity2+')',
width: 0.1 +opacity2
})
})
})
);
//画第三个圆
vectorContext.drawFeature(
new ol.Feature({
geometry: flashGeom
}),
new ol.style.Style({
image: new ol.style.Circle({
radius: radius3,
stroke: new ol.style.Stroke({
color: 'rgba(255, 140, 102,'+opacity3+')',
width: 0.1 +opacity3
})
})
})
);
//循环点
if (activeR > maxR) {
activeR=baseR;
}
if (activeR2 > maxR) {
activeR2=baseR;
}
if (activeR3 > maxR) {
activeR3=baseR;
}
map2.render();
}
}
source.on('addfeature', function(e) {
flash(e.feature);
});
source.addFeature(point);
</script>
</body>
</html>
相关推荐
通过以上步骤，你可以在OpenLayers地图上创建一个动态的路线动画。这个过程涉及到了OpenLayers的基础操作，包括地图初始化、图层管理、几何对象的创建和动画逻辑的实现。结合`Point.js`提供的具体数据，你可以根据...
离线地图的实现主要依赖于将在线地图数据预先下载并存储在本地，然后通过OpenLayers来读取和渲染这些存储的数据。在这个DEMO中，我们重点关注两个关键点：地图瓦片的组织和OpenLayers的配置。 1. **地图瓦片的组织*...
该脚本能够实现openlayers-Cesium二三维联动效果的功能
在这个项目中，我们将探讨如何利用这两个工具来实现地图上的点的动态效果，如闪烁、扩散和动画。 首先，OpenLayers3 是一个强大的JavaScript库，它提供了丰富的API，用于在Web浏览器中展示地图，处理地图图层，以及...
在现代WebGIS应用中，OpenLayers是一个非常流行的开源JavaScript库，用于在网页上显示和操作地图。这个项目，"二三维离线地图演示系统 V1.0（for OpenLayers3）"，是一个专门针对OpenLayers 3框架设计的示例系统，它...
1. **创建地图实例**：首先，你需要创建一个OpenLayers地图实例，指定地图容器、投影、源（如WMS服务）和图层。 ```javascript var map = new ol.Map({ target: 'map', view: new ol.View({ center: [0, 0], ...
本文实例为大家分享了vue+openlayers加载geojson并实现点击弹窗教程，供大家参考，具体内容如下 第一步：安装vue-cli cnpm install -g @vue/cli 第二步：新建一个项目 1.新建项目 （vue-openlayers为项目名）,并...
本教程将详细介绍如何使用OpenLayers加载瓦片地图以及手动在地图上标记坐标点。 一、OpenLayers 瓦片地图 瓦片地图是一种常见的地图展示方式，它将大尺寸的地图分割成多个小块（即“瓦片”），每个瓦片都是一个较...
OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问，echarts是百度的开源js图表库，该示例实现了在openlayers的地图‘贴’上echarts的图表
1、实现图片地图，图片地图比例尺 2、绘制点的路径 3、绘制多边形，定位不规则多边形中心点，显示名称 4、多边形编辑 5、地图全屏，地图截图 6、点是否在区域中判定 7、暂停，播放，向前，向后20s，倍速播放控制路径...
在IT行业中，前端开发是构建Web应用程序的关键部分，而OpenLayers是一个流行的JavaScript库，用于创建交互式的、基于Web的地图应用。本实例将详细介绍如何利用OpenLayers加载离线地图，并通过mui将其打包成移动应用...
在OpenLayers中，实现“面层实时动态闪烁”效果是一个技术性较强的课题，涉及到地图渲染、数据处理和动画效果的创建。OpenLayers是一个强大的开源JavaScript库，用于在Web上展示地图，支持多种地图源和丰富的交互...
在OpenLayers中调用百度地图是一项常见的需求，特别是在构建Web GIS应用时，用户可能希望结合OpenLayers的强大功能和百度地图的丰富数据。OpenLayers是一个开源JavaScript库，用于创建交互式的地图应用，而百度地图...
OpenLayers 是一个强大的开源JavaScript库，用于在网页上创建交互式的地图应用。它支持多种地图服务，包括WMS、WMTS等，并且能够处理多种数据格式，如GeoJSON、KML等。"openlayers很多特效demo" 提供了一系列示例，...
openlayers 风场渲染效果，放置风场数据即可使用
通过以上步骤，我们就成功地在OpenLayers 3地图上添加了一个闪烁的点。这个点会根据设定的时间间隔在可见和不可见之间切换，从而达到闪烁的效果。你可以根据需要调整动画的速度、颜色和形状，以满足具体项目的需求。...
通过结合以上知识点，你可以在OpenLayers地图上创建出动态的、具有闪烁效果的行进路线，模拟从起点到终点的过程。在实际项目中，`olMoveLine`这样的文件可能包含了实现这一功能的完整JavaScript代码，包括地图初始化...
OpenLayers 3 地图框选 Draw 画多边形 Polygon 获取坐标
资源下载不可直接运行，下载前可查看博客：https://blog.csdn.net/KK_bluebule/article/details/125694548 资源可供参考，因为只是一个vue页面和json测试数据
通过以上步骤，你可以实现OpenLayers地图上的动态tooltip，提供丰富且互动的地图体验。QTip库的使用增强了提示信息的视觉效果，使得用户更容易理解和探索地图上的信息。记得根据实际需求调整代码，比如添加更多样式...