OpenLayers在地图上实现选点的动画效果
程序员文章站
2022-07-08 10:49:56
...
效果图：
（红圈往外扩散消失。类似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>
